ARIA手機菜單，正確的標籤

我有一個響應式網站，一旦網站達到移動寬度菜單被隱藏，並且只有當您點擊菜單圖標時纔會顯示。這個圖標隱藏在HTML中，直到你到達這個中斷點。ARIA手機菜單，正確的標籤

問題：我應該給這個元素的正確標籤是什麼？

我正在考慮添加aria-hidden="true"，這對於桌面瀏覽器是正確的，但是在移動設備上它並未隱藏。

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

來源

2013-03-27 John Magnolia

aria-hidden="true"，因爲沒有必要：

在桌面上的鏈接已被隱藏在CSS（由display: none或visibility: hidden）
在移動它的展示，並且必須通過屏幕閱讀器感知和其他AT

我想元素a > span是視覺上隱藏（在視口之外），只有th手機上顯示i中的e圖標？然後，您可以在其中顯示文本「顯示菜單」，並且不需要其他屬性，無論是ARIA還是@title。
如果顯示「菜單」，則鏈接標題a[title="Show Menu"]更適合更明確的鏈接。

請注意：如果您使用的是ARIA角色地標（而且您應該），則應將[role="navigation"]添加到您的桌面上可見導航和此鏈接的容器中，這是您在移動設備上唯一可見的導航部分。否則，用戶會跳到一個看不見的地方，而不知道導航的位置，也不知道是否有一個特殊的鏈接/按鈕可以再次顯示。
跳過鏈接相同：它應指向放置在導航和此鏈接/按鈕之前的元素。

來源

2013-03-27 19:58:53 FelipeAls

ARIA手機菜單，正確的標籤

回答

相關問題