Question

我想知道屏幕阅读器是否正常阅读：

＆＃39;运动[]选择展开的标签，1/2＆＃39;

<div role="tablist">
     <a role="tab" aria-expanded="false" aria-selected="false">Sports</a>
     <a role="tab" aria-expanded="true" aria-selected="true">News</a>
</div>

我对可访问性不是很专业，我想知道你的意见。

Answer 1

你会发现不同的屏幕阅读器以不同的方式阅读。您需要担心的是设置适当的角色和属性，这是您在小样本中所做的。 VoiceOver（在Mac和iOS设备上），NVDA（在PC上）和JAWS（在PC上）都将读取你所听到的变化。有些人可能会说“1中的2”而其他人会将其遗漏（后者我觉得个人很讨厌）。有些人可能会在“选定”之前说“扩大”。

作为旁注，仅仅因为你有一些扩展的东西，它并不一定意味着它被选中了。我知道你的例子只是一个用于演示目的的小片段，但我想指出它。

Answer 2

您可以共享CSS吗？我猜您有一些CSS内容。如果此内容是字形，您将在屏幕阅读器上听到不同的声音。如果代码在private use区域之一中，则没有定义。

在下面提供的代码示例中，CSS内容为“ \ E70D”。 “ E7”位于UTF-16的专用区域中。屏幕阅读器有时会将这些内容视为“空白”。在您的情况下，屏幕阅读器的输出不知道字符是什么，因此您会得到一个小矩形。

[role="tab"]::before{
  content:"\E70D";
}

<div role="tablist">
     <a role="tab" aria-expanded="false" aria-selected="false">Sports</a>
     <a role="tab" aria-expanded="true" aria-selected="true">News</a>
</div>

一个tablist / tab可访问性，屏幕阅读器看到方括号是否正常？

2 个答案: