has-popup="true" 在 <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

我不是无障碍方面的专家，但我读了一些书，希望这能有所帮助。

Fly-out Menus - WAI Web Accessibility Tutorials 具有与您的代码基本相同的子菜单结构，并将 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> 元素默认情况下无法通过键盘访问。

For the popup element to be keyboard accessible, authors SHOULD ensure that the element that can trigger the popup is focusable, that there is a keyboard mechanism for opening the popup, and that the popup element manages focus of all its descendants as described in Managing Focus.

-- Accessible Rich Internet Applications (WAI-ARIA) 1.1

我希望有专家插话并让我们确定。

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

has-popup="true" on <li> or <a>?

html

accessibility

wai-aria