Question

如果您实现自定义无序列表字符，屏幕阅读器（或至少VoiceOver）将在宣布每个列表项之前公布您使用的该字符的名称。如果您没有更改子弹角色，VoiceOver将宣布＆＃34; bullet＆＃34;。

如何更改标签屏幕阅读器宣布此角色，将其设置回＆＃34; bullet＆＃34;例如？

ul li:before {
    content: '○';
}

<ul>
    <li>You are a beautiful human being</li>
</ul>

VoiceOver宣布＆＃34;白圈你是一个美丽的人。＆＃34;

Answer 1

您不能更改角色的公告，但是通过将其放在另一个元素中并在该元素上放置aria-label，您可以让屏幕阅读器覆盖元素内所有文本的公告。这是一个例子：

<!doctype html>
<html>
    <head>
        <title>Bullet list examples</title>
        <style>
        ul {
            list-style-type: none;
        }
        ul.justcontent li:before {
            content: 'x';
        }
        ul.withspan li:before {
            content: '';
        }
        ul.withspan li span:before {
            content: 'x';
        }
        </style>
    </head>
    <body>
        <ul class="justcontent">
            <li>You are a beautiful human being</li>
        </ul>
        <ul class="withspan">
            <li><span aria-label="bullet"></span>You are a beautiful human being</li>
        </ul>
    </body>
</html>

Answer 2

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

更改屏幕阅读器的自定义无序列表字符的标签

2 个答案: