Question

以下是我在html中的咏叹调可访问性代码。它与ChromeVox一起运行正常但在使用JAWS时，当焦点在链接Menu1上时，所有咏叹调标签都被读取。但是链接的{aria-label} {当焦点转移时应该读取1}}。

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>上时才读取，这是当前行为。

任何帮助将不胜感激。

Answer 1

此处的第一个问题是您在链接中有链接。它不仅在<a href>（或任何invalid to nest an <a href>）中interactive content，而且还意味着屏幕阅读器在遇到嵌套交互式控件时可能会发生意外情况。不能被视为错误的事情。

这意味着你无法将第二个链接转换为<button>并期望事情没有问题，因为你仍然会有嵌套的交互式控件。

稍后将发挥作用的第二个问题是使用特定键的任何指令，除非映射了这些键。例如，您的教学文本会显示为＆＃34;按空格键以使用选项菜单＆＃34;但该菜单似乎在一个链接中。空格键在有焦点时不会激活链接，它会滚动页面。

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

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

Answer 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。

JAWS没有在带有role =“tab”的li里面的链接中读取链接的aria-label

2 个答案: