Question

我一直在将工作辅助工具从Word文档转换为HTML，而我正在使用的屏幕阅读器存在一些问题（Jaws 16）。我用CSS设置的有序列表表示为＆＃34;步骤1＆＃34;，＆＃34;步骤2＆＃34;。然而，屏幕阅读器无法识别这一点，也没有阅读＆＃34;步骤1＆＃34;列表的一部分。

有没有办法做到这一点，或者我正在寻找更多手动的东西让屏幕阅读器调出所需的正确信息？

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'才浮动在你的样式表中。我猜这是一个字体大小的属性，但我只是在我的例子中将它遗漏了。）< / p>

<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时所听到的：

“foo Button”
“2项目清单”
“步骤1.打开冰箱”
“Step 2. locate beverage”
“list end”
“bar Button”

屏幕阅读器无法读取有序列表的项目符号和CSS

1 个答案: