NVDA 不会读取带有 aria-label 的 aria-describedby

Question

我有一个简单的按钮。

.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>

当我切换到此 link 时，我想听到 "select product button, Enter to open"，但 NVDA 只读取 "select product button"，没有导航消息。

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

Answer 1

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

有几个更新要进行：

如果是按钮，请使用 <button> 而不是覆盖另一个元素。（我认为按钮是正确的，因为它在页面上做了一些事情，而不是去其他地方。）
Enter 是您在 NVDA（和 Jaws）上激活东西的方式，但它在其他屏幕阅读器上是不同的。最好不要告诉人们如何使用他们的屏幕阅读器，你必须假设他们知道（至少对于基础知识）否则他们不可能走到这一步。
与其提供标签，不如使用 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 中读出为 "Select product, pop-up button"，我认为您会在 NVDA 中得到类似的东西。

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

Answer 2

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

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

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

事实上 <button aria-haspopup="true" aria-label="Settings"> 读作 "Settings, Menubutton"，这在语义上可能是您想要的。但是从描述来看并不意味着，这个按钮首先打开了一个submenu/popupmenu。这意味着，它的行为类似于菜单按钮。如果您按 "cursor down"（它也允许 space/enter），菜单按钮也会执行它的默认操作。

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

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

NVDA 不会读取带有 aria-label 的 aria-describedby

NVDA doesn't read aria-describedby with aria-label

html

javascript

accessibility

screen-readers

nvda