html - has-popup="true" on还是？

Question

标签： htmlaccessibilitywai-aria

Answer 1

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

Fly-out Menus - WAI Web Accessibility Tutorials具有与您的代码基本相同的子菜单结构，并将aria-haspopup属性放在<a>元素上：

<nav aria-label="Main Navigation">
    <ul>
        <li><a href="…&quot;>Home</a></li>
        <li><a href="…&quot;>Shop</a></li>
        <li class="has-submenu">
            <a href="…&quot; aria-haspopup="true" aria-expanded="false">
                Space Bears
            </a>
            <ul>
                <li><a href="…&quot;>Space Bear 6</a></li>
                <li><a href="…&quot;>Space Bear 6 Plus</a></li>
            </ul>
        </li>
        <li><a href="…&quot;>Mars Cars</a></li>
        <li><a href="…&quot;>Contact</a></li>
    </ul>
</nav>

为什么你的代码没有通过审计检查？我无法确定，因为我无权访问它，但我猜这是因为<li>默认情况下该元素不可通过键盘访问。

为了使弹出元素可以通过键盘访问，作者应该确保可以触发弹出的元素是可聚焦的，存在用于打开弹出的键盘机制，并且弹出元素管理其所有后代的焦点，如管理焦点中所述.

--可访问的富 Internet 应用程序 (WAI-ARIA) 1.1

我希望一些专家加入并让我们确定。