建立 2026-09-15 更新 2026-09-15

無障礙與驗證

把前面幾章寫對，無障礙已經完成一大半：語意地標、標題層級、連結文字、圖片 alt、表單 label。這頁把原則收斂成可檢查的清單，並指出官方影音與驗證工具。

無障礙不是加分題。聽障、視障、行動不便、暫時無法用滑鼠（抱著小孩、斷了觸控板）的人，都依賴你選對的 HTML。

第一原則：用原生元素

W3C 對 ARIA 的第一條規則是：能用原生 HTML 表達的，就不要自己用 div 加 role 重做。

Chrome 團隊的 A11ycasts 用實際螢幕閱讀器示範：div 做成的「按鈕」往往只會被念成一組字，使用者不知道可以啟動。

只靠鍵盤走完一頁。 Tab 移動焦點，Enter 啟動連結與按鈕，空白鍵勾選 checkbox。焦點必須看得見，不要用 CSS 把 outline 設成 none 又不給替代樣式。
標題像目錄。 一個 h1，然後 h2、h3 依序下來。瀏覽器擴充功能或 DevTools 的輔助功能面板可以看到標題樹。
每張有意義的圖都有 alt。 裝飾圖用 alt=""。
每個輸入都有可見標籤。 點標籤時，對應欄位會聚焦。
html 有 lang。 繁中頁用 zh-Hant。
iframe 有 title。 嵌入 YouTube 時不要留空白標題。

更完整的流程見 Rob Dodson 的「How I do an accessibility check」：先 Tab、再看焦點、再看標題與對比。

W3C Markup Validation Service 接受上傳檔案或貼原始碼。它抓的是規格錯誤（沒關標籤、不該出現的子元素、缺 alt），不是美觀問題。

本機開發時，編輯器的 HTML 檢查與瀏覽器 DevTools 的「Elements」面板也能看 DOM 是否如你所想。DevTools 另有 Accessibility 樹，可對照語意角色。

無障礙與 HTML5 官方課

W3Cx Introduction to Web Accessibility 面向開發者與非開發者，講數位無障礙基礎。
web.dev Learn HTML 每一節都含無障礙注意事項。
Google Developer Program：Learn HTML 完成 web.dev 課程可取得徽章。

法律與標準層面，網站常對齊 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指南）。入門不必一次讀完整份，先做到本頁清單即可。