ARIA移动菜单，正确的标签

Question

我有一个响应式网站，一旦网站达到移动宽度，菜单就会被隐藏，只有在您点击菜单图标时才显示。此图标隐藏在HTML中，直到您到达此断点。

问题：我应该给元素提供正确的标签是什么？

我正在考虑添加aria-hidden="true"这对于桌面浏览器是正确的，但在移动设备上却没有隐藏。

<a href="#" id="menu-phone" data-menu="mobile" title="Show Menu">
    <span>Menu</span>
    <i class="icon"></i>
</a>

Answer 1

aria-hidden="true"没有必要，因为：

• 在桌面上，该链接已隐藏在CSS中（display: none或visibility: hidden）
• 在移动设备上显示，必须被屏幕阅读器和其他AT感知

我猜元素a > span在视觉上是隐藏的（在视口之外），只有i中的图标显示在移动设备上？然后你可以在其中显示“显示菜单”文字而没有其他属性，无论是ARIA还是@title都是必要的。
如果显示“菜单”，那么链接标题a[title="Show Menu"]更适合更明确的链接。

注意：如果您正在使用ARIA角色标记（并且您应该），则[role="navigation"]应添加到桌面上可见导航的容器和此链接上，该链接是您在移动设备上导航的唯一可见部分。否则，用户将跳转到一个看不见的东西，不知道导航的位置，也没有任何线索要么有一个特殊的链接/按钮再次显示它。
对于跳过链接也是如此：它应该指向放置在导航和此链接/按钮之前的元素。