可訪問描述

可訪問描述是對使用者介面元素的描述,提供額外資訊以幫助輔助技術使用者理解使用者介面元素及其上下文。它與 HTML 或 SVG 元素相關聯,併為使用者提供除元素可訪問名稱之外的關於其目的的額外上下文。這對於依賴螢幕閱讀器等輔助技術的使用者尤其重要。元素的可訪問描述是可訪問性樹的一部分。

例如,<table> 的可訪問名稱由其第一個<caption> 提供。對於複雜的資料表,一兩句話描述該表可以提供一個描述。這可以是表格前面或後面(無論是視覺上還是原始碼順序上)的一個段落。如果位於原始碼順序的其他位置,或者為了明確關聯,可以使用aria-describedby 屬性將表格與其描述關聯起來。

類似地,當用戶被要求建立密碼時,型別為password<input><label>提供了它的可訪問名稱。一個好的可訪問描述應該包含對密碼要求的所有使用者可見的方式。它可以透過其aria-describedby屬性與輸入明確關聯,該屬性將其作為該節點的“描述”新增到可訪問性樹中。

描述被簡化為文字字串。在我們的密碼示例中,如果輸入框的aria-describedby屬性值是一個列出了需求的 HTML <ul>id,那麼描述就是所有列表項的拼接文字和文字等價物。

您可以檢查頁面上任何元素的可訪問描述:檢視瀏覽器的開發者工具的無障礙選項卡,該選項卡提供當前選定元素的無障礙資訊。

可訪問描述計算

對於 HTML 元素,如果一個元素沒有可訪問描述,則需要以程式設計方式將其與相關元素關聯。可訪問物件模型 (AOM) 透過按順序檢查以下功能來計算可訪問描述,直到其被定義:

  1. aria-describedby 屬性。

  2. aria-description 屬性。

  3. 語言特定功能,如果該功能尚未用於定義可訪問名稱,則參與描述計算。例如:

    • <summary> 由其巢狀的 <details> 的內容描述。
    • <input> 按鈕(帶有型別屬性buttonsubmitreset)由其value屬性的值描述。
    • 在 SVG 中,如果存在 <desc> 元素的內容,否則,如果它們尚未用於 可訪問名稱,則包含在後代文字容器元素(即 <text>)中的文字
  4. 如果上述任何一項都未提供描述,則使用 title 屬性,前提是該 title 不是該元素的可訪問名稱。

  5. 如果上述任何一項都沒有定義可訪問描述,則可訪問描述為空。

HTML 中定義可訪問描述的步驟在 HTML-AAM 可訪問描述中定義。SVG 元素的可訪問描述遵循相同的步驟,但存在一些細微差別,這些差別在 SVG-AAM 可訪問描述中列舉。

另見