您是否曾經想過螢幕等輔助技術的「功用」？ 知道該向使用者宣布什麼嗎？答案是這些技術 建議開發人員使用語意 HTML 來標記網頁。但什麼是 以及如何使用螢幕閱讀器？
功效與語義
探討語意之前，建議您先瞭解其他字詞： 預設用途。免費工具是指任何有使用者提供或負擔內容的物件 顯示執行特定操作的機會典型的例子就是茶壺：
這個茶壺不需要指導手冊；而在 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 的開發人員工具即可檢查元素的語意 資源 並探索它在無障礙功能樹狀結構中的位置。
後續步驟
一旦你初步瞭解語義及其在螢幕閱讀器的導覽下， 雖然沒辦法幫上忙，但看看您設計不同的網頁。在下一節中 我們會先退一步，思考網頁的整體大綱 透過有效的方向和界標傳達。