2

我有一个简单的按钮。

.icon {
    border: 1px solid black;
    display: inline-block;
    height: 25px;
    text-indent: -999em;
    vertical-align: middle;
    width: 25px;
}

    <a role="button" href="javascript:void(0);" aria-label="select product" aria-describedby="navigation">
        <span id="navigation" class="icon >Enter to open, tab to navigate</span>
    </a>

当我点击此链接时，我想听到“选择产品按钮，回车打开”，但 NVDA 只读取“选择产品按钮”而没有导航消息。

有人可以知道如何修复它或以某种方式为按钮提供额外的导航消息吗？

4

2 回答 2

5

1. 为什么aria-describedby在您的示例中未使用： aria-describedby用于附加不重要的信息。通常title属性会aria-describedby自动匹配。（注意：如果缺少标签或内容，则title匹配 a11y 名称（即：与aria-label自动宣布它（屏幕阅读器用户可能有快捷方式和设置来强制阅读这些内容。）但也有例外：例如，大多数屏幕阅读器会自动阅读对话框的描述。

2. 为什么你的使用aria-describedby错误： 你描述了用户应该如何激活这个控件，但这显然不是必需的。实际上这是 aria 角色和属性的主要功能。如果你用语义标记来描述一个元素，它会告诉用户如何与之交互，你不需要用词重复它。例如： a <button>,role="button"表示如果您按下回车键或空格键或（鼠标）单击，它将执行此控件的默认操作（如果是原生button元素，则可以通过click事件简单地完成）。

3.你可以使用aria-haspopup="true"，但如果你这样做，你必须添加额外的JS： 上面的观点也解释了为什么简单地添加<button aria-haspopup="true">如另一个答案所描述的那样，在屏幕阅读器中对你来说听起来很棒，但这并不总是最好的做。

实际上<button aria-haspopup="true" aria-label="Settings">读取“设置，菜单按钮”，这可能是您想要的语义。但从描述来看，这并不意味着这个按钮首先会打开一个子菜单/弹出菜单。这意味着，它的行为就像一个菜单按钮。如果您按下“向下光标”（它也允许空格/输入），菜单按钮也会执行它的默认操作。

这意味着带有子菜单的链接教程是胡说八道。如果您按下光标或空格，它不会打开子菜单。

这里还有一个有趣的部分。如果您创建一个<button aria-haspopup="true" aria-label="Settings">（包括所有菜单按钮交互（即：空格、回车、向下光标...）然后打开一个role="dialog"并在此对话框内移动焦点。这将不是用户所期望的，但它完全很好/可访问，因为您的控件的行为与描述的一样，并且一旦用户切换到对话框，他就会收到通知，他不在菜单中，而是在对话框中，并且可以相应地与之交互。

于 2016-08-26T11:21:43.923 回答
2

我假设这会打开某种下拉菜单？我没有 NVDA 可供测试，但我可以将其重新定义为我知道适用于该场景的东西。

有几个更新：

  1. 如果它是一个按钮，请使用<button>而不是覆盖另一个元素。（我认为按钮是正确的，因为它在页面上做了一些事情，而不是去其他地方。）
  2. Enter 是您在 NVDA（和 Jaws）上激活事物的方式，但在其他屏幕阅读器上却不同。最好不要告诉人们如何使用他们的屏幕阅读器，你必须假设他们知道（至少对于基础知识），否则他们不可能走到这一步。
  3. 与其提供标签，不如使用aria-haspopup来指示按钮的功能。

例如（改编自HeydonWorks）：

<div class="product-selector">  
  <button aria-haspopup="true">
    <span>Select product</span>
  </button>
  <ul class="pop-up" aria-hidden="true" aria-label="Product Menu">
    <li><a href="#">Test item</a></li>
  </ul>
</div>

显然，您需要 CSS/JS 才能使弹出窗口工作，而 aria-haspopup 和 aria-hidden 应该首先由 JS 添加。在被读出为“选择产品，弹出按钮”的 VoiceOver 中，我想你会在 NVDA 中得到类似的东西。

注意：如果弹出窗口以源代码顺序在按钮下方立即打开，这是一个好方法，因为它将是屏幕阅读器的下一个目标。如果弹出窗口在页面的其他位置打开，您最好使用链接（不带角色=按钮）并将焦点移到弹出窗口上.focus()。

于 2016-08-26T08:20:48.310 回答