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