您是否曾經想過螢幕等輔助技術的「功用」? 知道該向使用者宣布什麼嗎?答案是這些技術 建議開發人員使用語意 HTML 來標記網頁。但什麼是 以及如何使用螢幕閱讀器?
功效與語義
探討語意之前,建議您先瞭解其他字詞: 預設用途。免費工具是指任何有使用者提供或負擔內容的物件 顯示執行特定操作的機會典型的例子就是茶壺:
![](https://web.dev/static/articles/semantics-and-screen-readers/image/EXqR31Kq3mosH6jv6jiG.png?authuser=6&hl=zh-tw)
這個茶壺不需要指導手冊;而在 Vertex AI Workbench 中 應向使用者說明其操作方式。有一個帳號代碼 你看過世界上其他有類似帳號代碼的物件 請務必接管並操作
建構圖形使用者介面時,我們會使用 CSS 等項目來加入 功能。舉例來說,您可以將按鈕設為投射陰影 類似於現實生活中的按鈕
不過,如果使用者看不到螢幕畫面 因此無法取得相關資訊因此,必須確認使用者介面 能傳達相同用途的輔助能力 技術。這種非視覺暴露於 UI 元素的預設用途稱為 其語意。
使用語意 HTML
傳達正確語意的最簡單方法,就是使用語意豐富的 HTML 元素。
透過 CSS
設定 <div>
和 <button>
元素的樣式,以便傳達相同的視覺預設用途
但在螢幕閱讀器上會大不相同。
<div>
只是一般的分組元素,
因此螢幕閱讀器只會朗讀 <div>
的文字內容。
<button>
已宣布為「按鈕」。
表示可以與使用者互動。
最簡單
通常能解決這個問題
是避免完全避免自訂互動式控制項
例如,替換模擬按鈕的 <div>
並附上實際的 <button>
。
語意屬性和無障礙樹狀結構
一般來說,每個 HTML 元素都有下列語意 資源:
- 角色或類型
- 名稱
- 值 (選填)
- 州/省 (選填)
元素的角色說明其類型,例如「按鈕」。「input」甚至只需要
「群組」例如 div
和 span
元素
元素的名稱是經過計算的標籤。螢幕閱讀器通常會朗讀訊息
元素名稱後接其角色,例如:「註冊,按鈕。」演算法
決定元素的名稱是 決定元素名稱的因素
內容,無論該元素是否具有 title
等屬性
或 placeholder
,無論元素是否與實際
<label>
元素,以及如果元素有任何 ARIA 屬性,例如
aria-label
和aria-labelledby
。
部分元素「可能」具有「值」。舉例來說,<input type="text">
可能會
具有反映使用者在文字欄位輸入的內容的值。
部分元素也可能包含「狀態」,藉此傳達其目前狀態。
舉例來說,<select>
元素可以採用「展開」格式,或是
收合狀態,具體取決於是否為開啟或關閉。
無障礙功能樹狀結構
對於 DOM 中的每個節點,瀏覽器會判斷 節點的語句是「有趣」並將該程式碼新增至無障礙功能 樹狀結構。 如果輔助技術 (例如螢幕閱讀器) 提供替代使用者介面 通常只要走過這個無障礙功能樹狀結構即可
使用 Chrome 的開發人員工具即可檢查元素的語意 資源 並探索它在無障礙功能樹狀結構中的位置。
後續步驟
一旦你初步瞭解語義及其在螢幕閱讀器的導覽下, 雖然沒辦法幫上忙,但看看您設計不同的網頁。在下一節中 我們會先退一步,思考網頁的整體大綱 透過有效的方向和界標傳達。