如果您实现自定义无序列表字符，屏幕阅读器(或至少 VoiceOver)会在读出每个列表项之前读出您使用的该字符的名称。相反，如果您没有更改元素符号字符，VoiceOver 将播报“元素符号”。
如何更改屏幕阅读器为这个 Angular 色宣布的标签，例如将其设置回“子弹”？
ul li:before {
content: '○';
}
<ul>
<li>You are a beautiful human being</li>
</ul>
VoiceOver 宣布“白色圆圈你是一个美丽的人。”
最佳答案
您无法更改字符的声明，但通过将其放置在另一个元素内并在该元素上放置一个 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>
关于html - 更改屏幕阅读器自定义无序列表字符的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27614899/