2017-09-19 27 views
2

我有一個按鈕,看起來像這樣:如何使用ARIA標記按鈕與非直觀的文字TABEL

<button type="button"> 
    Remove 
</button> 

根據上下文,誰可以看到用戶將能夠告訴按鈕被提及他們可以刪除的特定產品。但是,對於視力殘疾的用戶,文字「刪除」不足以提供有助於他們刪除內容的信息。

我知道aria-label是,根據MDN web docs,應該按照如下方式使用:

使用它在情況下,一個文本標籤是不可見的屏幕

我也知道aria-labelledby應該被用來將其他標記與被標記的元素相關聯。但是,就我的按鈕而言,按鈕本身包含標籤。恰巧標籤本身並不具有足夠的描述性。

在這一點上,你可能會問爲什麼我不只是改變按鈕文本!恰巧,UX團隊不想更改可見的按鈕文本,所以我仍然試圖找出按鈕的可訪問性,而不更改按鈕的可見部分。

無論如何,有沒有在這種情況下做什麼定義規範?我的傾向是使用aria-label,但我不是積極的,它本身就是符合ARIA的。

在此先感謝!

回答

2

無論如何,有沒有在這種情況下做什麼定義規範?我的傾向是使用aria標籤,但我不積極,這是ARIA兼容本身。

是的,你可以。

將使用aria-label屬性並將替換內部文本。

規格文本Alternative Computation做定義aria-label將優先使用(步驟2C),而內容將被用來只有當不存在(步驟2F)

2

是的,你可以使用ARIA標籤。通常,它優先於可見文本或元素內的文本(在大多數情況下,除了已設置自定義設置時,JFW,NVDA,VO都是如此)。

<button aria-label="Remove article XYZ">Remove</button> 

至於與圖片alt屬性,確保ARIA標籤是每CE足夠的,即元素內的可見文本或文本將很有可能不能說,它完全由詠歎調取代-標籤。 對於我們這裏的示例,標籤中必須出現「刪除」一詞。

作爲替代方案,而不是唱段標籤,你也可以使用一個CSS類,使文字只能通過屏幕閱讀器說:

<button>Remove <span class="sr-only">XYZ</span></button> 

你會發現相應的CSS代碼中像引導框架。 在這種情況下,可見文本和屏幕閱讀器特定的文本都會一個接一個地說出來。確保單詞不粘在一起,否則可能會有發音問題。