語意和螢幕閱讀器

您是否曾經想過螢幕等輔助技術的「功用」? 知道該向使用者宣布什麼嗎?答案是這些技術 建議開發人員使用語意 HTML 來標記網頁。但什麼是 以及如何使用螢幕閱讀器?

功效與語義

探討語意之前,建議您先瞭解其他字詞: 預設用途。免費工具是指任何有使用者提供或負擔內容的物件 顯示執行特定操作的機會典型的例子就是茶壺:

茶壺的控點屬於自然用途。

這個茶壺不需要指導手冊;而在 Vertex AI Workbench 中 應向使用者說明其操作方式。有一個帳號代碼 你看過世界上其他有類似帳號代碼的物件 請務必接管並操作

建構圖形使用者介面時,我們會使用 CSS 等項目來加入 功能。舉例來說,您可以將按鈕設為投射陰影 類似於現實生活中的按鈕

不過,如果使用者看不到螢幕畫面 因此無法取得相關資訊因此,必須確認使用者介面 能傳達相同用途的輔助能力 技術。這種非視覺暴露於 UI 元素的預設用途稱為 其語意

使用語意 HTML

傳達正確語意的最簡單方法,就是使用語意豐富的 HTML 元素。

透過 CSS 設定 <div><button> 元素的樣式,以便傳達相同的視覺預設用途 但在螢幕閱讀器上會大不相同。 <div> 只是一般的分組元素, 因此螢幕閱讀器只會朗讀 <div> 的文字內容。 <button> 已宣布為「按鈕」。 表示可以與使用者互動。

最簡單 通常能解決這個問題 是避免完全避免自訂互動式控制項 例如,替換模擬按鈕的 <div> 並附上實際的 <button>

語意屬性和無障礙樹狀結構

一般來說,每個 HTML 元素都有下列語意 資源:

  • 角色或類型
  • 名稱
  • (選填)
  • 州/省 (選填)

元素的角色說明其類型,例如「按鈕」。「input」甚至只需要 「群組」例如 divspan 元素

元素的名稱是經過計算的標籤。螢幕閱讀器通常會朗讀訊息 元素名稱後接其角色,例如:「註冊,按鈕。」演算法 決定元素的名稱是 決定元素名稱的因素 內容,無論該元素是否具有 title 等屬性 或 placeholder,無論元素是否與實際 <label> 元素,以及如果元素有任何 ARIA 屬性,例如 aria-labelaria-labelledby

部分元素「可能」具有「值」。舉例來說,<input type="text"> 可能會 具有反映使用者在文字欄位輸入的內容的值。

部分元素也可能包含「狀態」,藉此傳達其目前狀態。 舉例來說,<select> 元素可以採用「展開」格式,或是 收合狀態,具體取決於是否為開啟或關閉。

無障礙功能樹狀結構

對於 DOM 中的每個節點,瀏覽器會判斷 節點的語句是「有趣」並將該程式碼新增至無障礙功能 樹狀結構。 如果輔助技術 (例如螢幕閱讀器) 提供替代使用者介面 通常只要走過這個無障礙功能樹狀結構即可

使用 Chrome 的開發人員工具即可檢查元素的語意 資源 並探索它在無障礙功能樹狀結構中的位置。

後續步驟

一旦你初步瞭解語義及其在螢幕閱讀器的導覽下, 雖然沒辦法幫上忙,但看看您設計不同的網頁。在下一節中 我們會先退一步,思考網頁的整體大綱 透過有效的方向和界標傳達。