我一直在将工作辅助工具从 Word 文档转换为 HTML,但我在使用屏幕阅读器 (Jaws 16) 时遇到了一些问题。我用 CSS 设置的有序列表显示为“第 1 步”、“第 2 步”。然而,屏幕阅读器无法识别这一点,也不会阅读列表的“第 1 步”部分。
有没有办法做到这一点,或者我是在看一些更手册的东西让屏幕阅读器正确地说出需要什么?
ol{list-style-type: none; counter-reset: elementcounter; padding-left: 0;}
li:before{content: "Step " counter(elementcounter) ". "; counter-increment:elementcounter; font-weight: bold;6px}
<ol>
<li>Open fridge</li>
<li>locate beer</li>
</ol>
最佳答案
我尝试了 JAWS 18(最新版本)和 JAWS 16。两者都可以在 Firefox 和 Chrome 中使用,但不能在 Internet Explorer 中使用。
(注意:你原来的例子有'6px'只是漂浮在你的样式表中。我猜它是一个字体大小属性,但我只是在我的例子中把它遗漏了。)
<style>
ol
{
list-style-type: none;
counter-reset: elementcounter;
padding-left: 0;
}
li:before
{
content: "Step " counter(elementcounter) ". ";
counter-increment:elementcounter;
font-weight: bold;
}
</style>
<button>foo</button>
<ol>
<li>Open fridge</li>
<li>locate beverage</li>
</ol>
<button>bar</button>
我在列表前后放置了按钮,这样我的测试就有了制表位。由于您的列表不可切换,我只是先切换到 FOO 按钮,然后使用虚拟 PC 光标向下箭头指向下一个元素。这是我在 FF 和 Chrome 中使用 JAWS 时听到的:
- “富按钮”
- “2 项列表”
- “第 1 步。打开冰箱”
- “第 2 步:找到饮料”
- “列表结束”
- “栏按钮”
关于css - 屏幕阅读器不阅读有序列表的元素符号和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41937580/