JAWS 不读取 aria-label 以获取 li 内带有 role="tab" 的链接中的链接答案

【问题标题】：JAWS does not read aria-label for link within a link inside li with role="tab"JAWS 不读取 aria-label 以获取 li 内带有 role="tab" 的链接中的链接
【发布时间】：2017-05-24 10:27:30
【问题描述】：

下面是我在 html 中用于 aria 可访问性的代码。它在 ChromeVox 上运行良好，但是当使用 JAWS 运行时，当焦点位于链接 Menu1 上时，所有 aria-labels 都会被读取。但是链接 options 的 aria-label 应该当焦点放在它上面时被阅读。

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    #div1{
        padding : 12px;
    }
</style>
</head>
<body>
<div class="container">
    <ul role="tablist" class="nav nav-tabs">
        <li role="tab">
            <div id="div1">
                <a tabindex="0" aria-label="first menuitem" class="active">Menu1
                    <a class="dropdown-toggle" tabindex="0" data-toggle="dropdown" aria-label="Press spacebar to use options menu" tabindex="0">options</a>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation"><a tabindex="0" role="menuitem">Properties</a></li>
                            <li role="presentation"><a tabindex="0" role="menuitem">Edit Properties</a></li>
                        </ul>
                </a>
            </div>
        </li>
        <li role="tab">
            <a href="#">Menu2</a>
        </li>
    </ul>
</div>
</body>

我想要的是每个链接的 aria-label 应该只在焦点转到特定链接时才被读取，而不是当焦点在链接 Menu1 上时，这是当前的行为。

任何帮助将不胜感激。

【问题讨论】：

不要嵌套交互式控件，例如<a href>。首先修复它（并摆脱tabindex）。 w3.org/TR/html51/dom.html#interactive-content
哦等等——你是不是故意排除了href？如果是这样，我将不得不在下面修改我的答案。

标签： html accessibility wai-aria jaws-screen-reader

【解决方案1】：

这里的第一个问题是链接中有一个链接。不仅invalid to nest an <a href> 在<a href>（或任何interactive content）中，而且这也意味着屏幕阅读器在遇到嵌套交互控件时可能会做出意想不到的事情。不能认为是错误的事情。

这意味着您无法将第二个链接转换为 <button> 并期望一切正常，因为您仍然会有嵌套的交互式控件。

稍后将发挥作用的第二个问题是使用特定键的任何说明，除非这些键已映射。例如，您的说明文字说“按空格键使用选项菜单”，但该菜单似乎在链接中。空格键在获得焦点时不会激活链接，它会滚动页面。

WAI-ARIA Authoring Practices 1.1 for a tab control 详细说明了它需要支持的键盘控件。

最后，由于<a href> 已经是交互式内容并且可以通过键盘访问，因此您根本不需要tabindex="0"。您可以（并且应该，IMO）删除它。

【讨论】：

感谢您的回答。我已经更新了我的代码。希望您能清楚地了解我真正想要什么。正如您所说，我不能在链接中使用链接。你能帮我改一下代码吗？
我知道你想要标签。标签被一遍又一遍地编写，并且有很多例子。当然，可访问的示例是理想的。这是一个非常简单的 HTML，您可以将其用作基础：heydonworks.com/practical_aria_examples/#tab-interface 如果您尝试在标签中创建下拉菜单，我建议您不要这样做。
我想在这里提到的一件事是，如果我从li 中删除role="tab"，JAWS 将读取链接，因为焦点在链接上。那么有什么方法可以通过保留@ 来满足我的要求987654332@li?
你的意思是 JAWS 会公布列表项？这应该与链接无关。这段代码中发生了很多事情，我认为您必须首先解决嵌套问题，然后解决结构问题，然后您可以开始一次将角色分层到其中一个功能。此外，建议不要使用任何 menu 和 menuitem 角色，除非您尝试重新创建操作系统级菜单。

【解决方案2】：

不要嵌套任何交互式元素。如果当您单击这些锚标记时，它会将用户重定向到另一个页面，而不是他们应该具有 href 属性。我假设您正在使用某种点击事件处理重定向，如果是这种情况，请尝试添加

href="#"

除非非常必要，否则不要使用 tabindexes，添加 href 属性应该足以将这些链接添加到 tab 顺序。

我不知道你的设计是什么样子，但我建议采用以下方法

<ul role="tablist">
    <li role="tab">
        <a href="#" aria-label="first menuitem">Menu1</a>
        <div id="submenu" aria-hidden="true" style="display:none">
            <a href="#" aria-label="Press spacebar to use options menu">options</a>
        </div>
    </li>
</ul>

我添加了aria-hidden="true" style="display:none"，因为我假设您要在菜单选项卡上添加某种鼠标悬停和焦点事件，然后显示submenu div。

【讨论】：

我已按照您的建议进行了尝试。但它不起作用。你能帮我更新代码吗？