has-popup= "true" on <li> 或 <a>？

Question

我有一个菜单，写得像：

<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>。如果这是正确的，那么为什么会因为没有它而被标记？

Answer 1

我不是可访问性方面的专家，但我读了一些书，希望这能有所帮助。

弹出菜单-WAI Web辅助功能教程的子菜单结构与您的代码基本相同，并将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>元素无法通过键盘访问。

对于可以通过键盘访问的弹出元素，作者应该确保可以触发弹出的元素是可聚焦的，有用于打开弹出的键盘机制，并且弹出元素管理其所有子元素的焦点，如管理焦点中所述。

--可访问富互联网应用程序(WAI-ARIA(1.1

我希望一些专家能参与进来，让我们确信无疑。