處理屏幕閱讀器ARIA

我一直在閱讀有關使用ARIA讓屏幕閱讀器閱讀標籤，否則不會在那裏。但是，我很難獲得一個下拉菜單（來自Foundation 6）以供閱讀。考慮這段代碼：處理屏幕閱讀器ARIA

<li role="menuitem"> 
    <label id="label1" class="sr-only">Testing click label</label> 
    <a class="submenu-link" href="/" tabindex="1"> 
     <span class="has-tip right" data-tooltip aria-haspopup="true" data-disable-hover="false" title="Foundation tooltip"> 
      <i class="fa fa-plus-circle"></i> 
      <span class="text" aria-hidden="true" aria-labelledby="label1">Click here</span> 
     </span> 
    </a> 
</li>

有兩件事情我迷惑一下：

爲什麼沒有<a>標籤由屏幕閱讀器，並非適用於所有其他人一樣讀一個菜單下拉菜單？
爲什麼aria-labelledby沒有被讀取？

來源

2016-04-08 Martavis P.

我懷疑這是跨度上的「詠歎調隱藏」。就屏幕閱讀器而言，該鏈接沒有任何內容。

另外：

label似乎是這裏是順理成章的事情，但它實際上只是爲有投入使用。
將aria-hidden和aria-labelledby放在同一個元素上並沒有什麼意義。
避免tabindex=1;如果您需要用戶可點擊/聚焦，請使用0;如果您只需要通過javascript將其聚焦，請使用-1。
代碼示例中有很多事情要做，你能解釋還是顯示你想要達到的目標？爲什麼有一個帶有標籤的下拉項目，帶有圖標的工具提示？這個菜單項應該看起來和功能如何？每個標籤實際上代表什麼？

添加標籤，在適當情況下是絕對是一個好去想，但只要有可能，讓正常的標記做繁重。

來源

2016-04-21 18:29:37 jack

我忘了對此發表評論。我發現事情確實有效，但聽到懸停的屏幕閱讀器時，讀者實際上是在按Tab鍵時說出標籤。所以我不需要''''''和''''aria-labelledby'''。那是絕望之情。另一方面，你是對的，我的代碼有很多，這是不能及時處理可訪問性的結果。另外，我正在使用基金會。這是來自其下拉菜單部分的菜單項。感謝您的建議，我會在未來的項目中牢記它們。 –

處理屏幕閱讀器ARIA

回答

相關問題