aria-label和aria-labelledby之間的區別

Question

我發現了用aria-屬性標記區域的兩種方法。

第一招：

<div class="main" role="main" aria-label="Search results"> 
    <a href="">Blah-blah</a> 

第二個：

<div class="main" role="main" aria-labelledby="res1"> 
    <h2 id="res1" class="a11y">Search results</h2> 
    <a href="">Blah-blah</a> 

JAWS讀取它們絕對是一樣的。那麼，有什麼區別，你會選擇什麼？

Answer 1

這site給出你的答案的理由： -

從理論上講，你應該使用的詠歎調 - labelledby如果文本在視覺上 屏幕上的某個地方這種形式是優選的。當屏幕上不可能顯示標籤時，只能使用 aria標籤。

但是，在目前的支持下，即使您需要隱藏標籤，也應該始終使用aria-labelledby， 。雖然至少JAWS 12和 VoiceOver都按預期讀取詠歎調標籤，但事實證明，如果aria標籤在 的使用中，則VoiceOver不會正確讀取層次結構。例如：

<p id="group1">Outer group</p> 
<p id="item1">First item</p> 
<div role="group" aria-labelledby="group1"> 
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a> 
</div> 

這裏的一切是使用ARIA-labelledby和配音會讀取按鈕「第一項外組按鈕」。換句話說，按鈕標籤，組標籤，然後是對象的類型。

但是，如果您更改任何元素的使用ARIA標籤，例如：

<p id="item1">First item</p> 
<div role="group" aria-label="Outer group"> 
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a> 
</div> 

的VoiceOver會讀現在的按鈕，簡單的「第一項」按鈕。似乎哪個項目使用aria標籤並不重要，如果它位於層次結構中的任何位置，只會讀取按鈕本身的標籤。

從MDN： -

的詠歎調-labelledby屬性用於指示 元素是該對象的標籤的ID。它用於在窗口小部件或組及其標籤之間建立一個 關係。諸如屏幕閱讀器之類的輔助技術的用戶通常通過在屏幕的區域之間進行切換來導航 頁面。如果標籤不是與輸入元素，小工具或組相關聯的 ，則其不會被屏幕閱讀器讀取 。

而且this： -

的詠歎調標籤屬性用來定義標籤的 當前元素的字符串。在屏幕上顯示 時文字標籤不可見的情況下使用。（如果有明顯的文字標註元素，請改爲使用 aria-labelledby。）