在<li>或<a>上有弹出=“真”吗？
在<li>或<a>上有弹出=“真”吗？
提问于 2020-10-28 18:37:29
我有一个菜单，上面写着：
<ul>
<li><a href="#">Item 1</a></li>
<li aria-haspopup="true">
<a href="#">Item 2</a>
<ul aria-label="submenu">
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li><a href="#">Item 2-3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>我用accessibe.com上的可访问性审核检查器测试了我的站点，我的子菜单上没有aria-haspopup="true"。
我的问题是，该属性是在<li>还是<a>上？
我的想法是，是<li>在鼠标和键盘上激活悬停菜单和焦点。不是<a>。如果这是正确的，那么为什么被标记为没有它呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-28 20:49:57
我不是一个无障碍的专家，但我做了一些阅读，我希望这能有所帮助。
飞出菜单-韦氏网络可访问性教程的子菜单结构与代码基本相同，并将aria-haspopup属性放在<a>元素上：
<nav aria-label="Main Navigation">
<ul>
<li><a href="…">Home</a></li>
<li><a href="…">Shop</a></li>
<li class="has-submenu">
<a href="…" aria-haspopup="true" aria-expanded="false">
Space Bears
</a>
<ul>
<li><a href="…">Space Bear 6</a></li>
<li><a href="…">Space Bear 6 Plus</a></li>
</ul>
</li>
<li><a href="…">Mars Cars</a></li>
<li><a href="…">Contact</a></li>
</ul>
</nav>为什么您的代码没有通过审核检查程序？我无法确定，因为我没有访问它的权限，但我猜是因为<li>元素在默认情况下无法访问键盘。
为了使弹出元素可以键盘访问，作者应该确保可以触发弹出窗口的元素是可聚焦的，有打开弹出窗口的键盘机制，并且弹出元素管理其所有后代的焦点，如管理焦点中所描述的那样。 -- 可访问的富Internet应用程序(WAI-ARIA) 1.1
我希望一些专家能参与进来，让我们确定一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64579286
复制相关文章
相似问题
腾讯云开发者
