您是否曾經好奇，螢幕閱讀器等輔助技術「如何」知道要向使用者朗讀的內容嗎？答案在於這些技術仰賴開發人員使用語意 HTML 標記網頁。但何謂語意？螢幕閱讀器如何使用這些語意？
負擔與語意
在深入探討語意之前，建議您先瞭解另一個術語：「預設用途」。用途是指提供或讓使用者執行操作的任何物件。經典的茶壺：
這個茶壺不需要解說手冊，而是對使用者的實體設計傳達應如何操作。這個帳號代碼具有帳號代碼，由於您看過世界上其他具有類似帳號代碼的物件，因此可以推論出應如何取及操作。
建構圖形使用者介面時，我們會利用 CSS 等元件，在 UI 中加入視覺功能。舉例來說，您可以為按鈕提供投射陰影和邊框，讓按鈕與實際世界中的按鈕類似。
但如果使用者無法查看畫面，系統就不會傳送這些視覺功能提示。因此，您必須確保 UI 的建構方式能夠向輔助技術傳達相同的預設用途。這種非視覺呈現方式呈現 UI 元素的主要用途，稱為「語意」。
使用語意 HTML
如要傳達正確語意，最簡單的方法是使用語意豐富的 HTML 元素。
使用 CSS 可以設定 <div> 和 <button> 元素的樣式，藉此傳達相同的視覺功能，但當使用螢幕閱讀器時，這兩種體驗會大有不同。<div> 只是一般分組元素，因此螢幕閱讀器只會朗讀 <div> 的文字內容。<button> 宣告為「按鈕」，讓使用者知道這是可以與其互動的內容。
如要解決這個問題，最簡單且通常最好的解決方式是完全避免自訂互動式控制項。例如，將類似按鈕的 <div> 替換為實際的 <button>。
語意屬性和無障礙功能樹狀結構
一般來說，每個 HTML 元素都具有下列語意屬性：
- 角色或類型
- 名稱
- value (選用)
- state (選用)
元素的角色描述的類型，例如「按鈕」、「輸入」，甚至是「群組」，就代表 div 和 span 元素。
元素的名稱是運算的標籤。螢幕閱讀器通常會朗讀元素的名稱和角色，例如「訂閱」按鈕。演算法決定元素名稱的演算法包括：元素中是否有任何文字內容、是否具有 title 或 placeholder 等屬性、元素是否與實際的 <label> 元素建立關聯，以及該元素是否有任何 ARIA 屬性，例如 aria-label 和 aria-labelledby。
部分元素可具有值。舉例來說，<input type="text"> 的值可能反映使用者在文字欄位中輸入的內容。
部分元素可包含state，傳達目前的狀態。舉例來說，<select> 元素可以是「展開」或「收合」狀態 (視該元素為開啟或關閉而定)。
無障礙功能樹狀結構
瀏覽器會針對 DOM 中的每個節點，判斷節點是否在語意上是「有趣」，並將該節點新增至無障礙功能樹狀結構。輔助技術 (例如螢幕閱讀器) 向使用者提供替代 UI 時，通常是藉由步行此無障礙功能樹狀結構操作。
您可以使用 Chrome 的開發人員工具檢查元素的語意屬性，並探索元素在無障礙功能樹狀結構中的位置。
後續步驟
瞭解語意以及這些語句可如何幫助螢幕閱讀器瀏覽後，您便無法有所幫助，而是查看您以不同方式建構的網頁。在下一節中，我們會先退一步，想想看該如何使用有效的標題和地標，才能理解整個網頁大綱。