2

I have a responsive website, once the website reaches mobile width the menu gets hidden and only shown when you click the menu icon. This icon is hidden within the HTML until you reach this break point.

Question: what is the correct label that I should be giving the element?

I was thinking of adding aria-hidden="true" which is correct for desktop browsers but on mobile it's not hidden. 

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

1 回答 1

3

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

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

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

注意：如果您正在使用 ARIA 角色地标（并且应该），[role="navigation"]则应将其添加到桌面上可见的导航容器和移动设备上唯一可见的导航部分中。否则，用户将跳转到不可见的空白处，不知道导航在哪里，也不知道有一个特殊的链接/按钮可以再次显示它。
跳过链接也一样：它应该指向放置在导航和此链接/按钮之前的元素。

于 2013-03-27T19:58:53.577 回答