css - 屏幕阅读器不阅读有序列表的元素符号和 CSS

Question

我一直在将工作辅助工具从 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>

Answer 1

我尝试了 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 步:找到饮料”
• “列表结束”
• “栏按钮”