您是否曾想過，螢幕閱讀器等輔助技術如何知道要向使用者朗讀哪些內容？答案是這些技術依賴開發人員在網頁中加入語意 HTML 標記。但什麼是語意，螢幕閱讀器又是如何使用語意？
可供性與語意
深入探討語意之前，建議先瞭解可供性。可供性是指任何可讓使用者執行動作的物件。茶壺就是經典範例：
這個茶壺不需要說明手冊，而是透過實體設計，向使用者傳達操作方式。這個物件有把手，而且您在現實世界中看過其他有類似把手的物件，因此可以推斷該如何拿起及操作這個物件。
建構圖形使用者介面時，我們會使用 CSS 為介面新增視覺提示。舉例來說，您可以為按鈕加上陰影和邊框，讓它看起來像現實世界中的按鈕。
但如果使用者無法看見畫面，就無法接收這些視覺提示。因此，您需要確保介面的建構方式能將這些預設用途傳達給輔助技術。這種 UI 元素功能的非視覺曝光稱為「語意」。
編寫語意式 HTML
如要傳達正確的語意，最簡單的方法就是使用語意豐富的 HTML 元素。
使用 CSS 時，可以設定 <div> 和 <button> 元素的樣式，讓兩者傳達相同的視覺效果，但使用螢幕閱讀器時，這兩種體驗差異很大。<div> 只是通用分組元素，因此螢幕閱讀器只會朗讀 <div> 的文字內容。<button> 會以「按鈕」的形式發布，向使用者發出更強烈的信號，表示這是可互動的項目。
通常，解決這個問題的最佳方法是完全避免使用自訂互動式控制項。舉例來說，將充當按鈕的 <div> 替換成實際的 <button>。
語意屬性和無障礙樹狀結構
一般來說，每個 HTML 元素都會有下列部分語意屬性：
- 角色或類型
- 名稱
- 值 (選填)
- 狀態 (選用)
元素的角色會說明其類型，例如「按鈕」、「輸入」或甚至是 div 和 span 元素等項目的「群組」。
元素的名稱是其運算標籤。螢幕閱讀器通常會先播報元素的名稱，再播報其角色，例如「註冊，按鈕」。決定元素名稱的演算法會考量元素內是否有任何文字內容、是否具有 title 或 placeholder 等屬性、元素是否與實際的 <label> 元素相關聯，以及元素是否具有 aria-label 和 aria-labelledby 等 ARIA 屬性。
部分元素可能會有值。舉例來說，<input type="text"> 的值可能反映使用者在文字欄位中輸入的內容。
部分元素可能也有狀態，可傳達目前的狀態。舉例來說，<select> 元素可以處於「展開」或「收合」狀態，視開啟或關閉而定。
無障礙功能樹狀結構
針對 DOM 中的每個節點，瀏覽器會判斷節點是否在語意上「有趣」，並將其新增至無障礙樹狀結構。當輔助技術 (例如螢幕閱讀器) 為使用者提供替代 UI 時，通常會遍歷這個無障礙樹狀結構。
您可以使用 Chrome 開發人員工具檢查元素的語意屬性，並探索元素在無障礙樹狀結構中的位置。
後續步驟
稍微瞭解語意和語意如何輔助螢幕閱讀器導覽後，您會發現自己看待網頁的方式有所不同。在下一節中，我們將退一步，思考如何使用有效的標題和地標傳達網頁的完整大綱。