下面是我在 html 中实现 aria 可访问性的代码。它在 ChromeVox 上运行良好，但是当使用 JAWS 运行时，当焦点位于链接 Menu1 上时，所有 aria-labels 都会被读取。但是 aria-label of link options 应在焦点位于其上时阅读。
<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 上时，这是当前的行为。
我们将不胜感激。
最佳答案
这里的第一个问题是链接中有链接。不仅是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 - JAWS 不会读取角色为 ="tab"的 li 内链接中的 aria-label 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44155728/