可訪問性 角色、名稱和值

為什麼

使用者介面元件需要一個角色、一個名稱，有時還需要一個值，以確保使用 輔助技術 的使用者能夠使用它們。輔助技術的例子包括螢幕閱讀器、開關控制元件和語音識別軟體。

什麼

有兩種情況，即使我們想使用一個具有內建可訪問性功能的良好 HTML 元素，我們也無法做到：

• 沒有原生的 HTML 元素來實現我們想要實現的功能。
• 存在技術限制，阻止我們使用語義正確的元素。

在這兩種情況下，我們都需要構建一個自定義控制元件。一個重要的可訪問性原則是，自定義控制元件需要一個角色、一個名稱，有時還需要一個值。

如何操作

我們如何確保自定義元件具有角色、名稱和值？

角色

在我們上一節“按鈕和連結”中，我們瞭解到下拉選單按鈕應該被編碼為一個 <button>。如果我們的框架不允許我們這樣做怎麼辦？如果它強制我們改用 <a> 呢？如果我們正在使用的庫中的導航元件是用 <a> 構建的呢？那麼我們需要新增一個角色。

這是透過 role="button" 屬性完成的。現在，輔助技術的使用者可以理解自定義控制元件是什麼。<button> 具有內建的 role="button"，因此編寫 <button role="button"> 是多餘的。

名稱

自定義控制元件需要一個名稱。在我們的例子中，名稱是元素的內容，即Company。只要我們是這樣編寫元素的：<div role="button">Company</div>，我們就擁有了一個好的名稱。這也被稱為可訪問名稱。我們 <div> 的可訪問名稱是Company。很好。

這太簡單了。在下面的登入表單中，我們有幾個元件——一個 logo、一個標題、一個標籤、一個下拉選單、一個輸入框和一個按鈕。

我們正在仔細檢視標籤、下拉選單和輸入框。在視覺上，下拉選單和輸入框之間沒有明顯的區別。下拉選單是用 <select> 編碼的，這是一個適合此情況的正確元素。但是，它沒有名稱。

<select name="countryCode">…</select>

它有一個 name 屬性。這與可訪問名稱不同。這令人困惑。文章《什麼是可訪問名稱？》對此進行了更詳細的解釋。name 屬性是為計算機準備的。在 <form> 中，它在提交資料時用作引用。這個名稱 countryCode 對任何使用者都沒有幫助。它不會被輔助技術識別。

要給這個 <select> 提供可訪問名稱，我們必須使用 aria-label 屬性。通常，我們會將一個可見標籤連線到 <select> 元件。在此情況下，只有一個可見標籤同時用於這兩個元件。

這是一個帶有可訪問名稱的 <select>

值

某些元件具有值或狀態。手風琴是開啟還是關閉。這個資訊必須是可訪問的。

手風琴被視為自定義元件。這裡沒有標準的 HTML 元素可以使用。每個手風琴標題都應該是 <button> 或 role="button"

<div role="button">我何時會被收取乘車費用？</div>

好的。它具有 button 的角色。它也有一個名稱，即 div 的內容。要給這個 button 提供一個值，我們需要告訴輔助技術它當前是關閉的。這是透過 aria-expanded="false" 完成的。

<div role="button" aria-expanded="false">我何時會被收取乘車費用？</div>

現在，我們的手風琴標題具有角色、名稱和值。