7. 可訪問性

最佳實踐

核心模組

獲取 Web 內容，如公共服務、教育、電子商務網站和娛樂內容，是一項人權。任何人都不應因殘疾、種族、地理位置或其他人類特徵而被排除在外。本模組討論了您應該學習的最佳實踐和技術，以使您的網站儘可能可訪問。

通用資源

7.1 可訪問性基礎知識

學習成果

理解可訪問性的要點——提高所有人的可用性、更好的 SEO 和更廣泛的目標受眾。另外，請注意法律要求。
理解可訪問性應在專案開始時就予以考慮，而不是在最後才進行補充。
理解 Web 內容可訪問性指南 (WCAG) 的符合性標準。
使用語義化 HTML，也稱為“正確的元素用於正確的工作”，因為瀏覽器提供了許多內建的可訪問性鉤子。好的例子是 <a> 和 <input> 元素。
可訪問性的最佳實踐
- Alt 文字（另見 2.6 媒體）。
- 良好的連結文字（另見 2.5 連結）。
- 表單元素的 <label>（另見 2.7 其他互動式元素）。
- 移動瀏覽器為特定的 <input> 型別（如 number 或 tel）提供特定的可用性優勢。
- 使用 <th>、<thead>、<tbody>、<tfoot>、<caption> 和 scope 屬性使表格具有可訪問性（另見 2.8 HTML 表格）。
- 使用簡單的明文語言，儘可能避免使用俚語和縮寫，並在不可能避免時提供定義。
理解音訊字幕和文字軌道（字幕、旁白等）在使音訊和影片內容具有可訪問性方面的作用（我們不要求掌握它們的建立；這本身就是一項高階主題）。
鍵盤可訪問性
- 理解為什麼應用程式需要鍵盤可訪問——許多人難以使用滑鼠或其他指向裝置。
- 理解內建的瀏覽器鍵盤控制元件。
- 理解何時適合使用 accesskey 和 tabindex。

資源

學習成果

文字大小和佈局
- 確保您的文字佈局良好、一致且易於閱讀。
- 考慮為視障人士提供大字型介面。
- 另見 4.1 文字和字型樣式。
顏色對比度
- 使用線上工具，如 WebAIM 的顏色對比度檢查器或 TPGi 顏色對比度分析器，以檢查您的顏色對比度是否符合相關的 WCAG 符合性標準。
- 注意色盲或視障人士；提供高對比度模式以適應他們。
:focus 和 :hover 樣式
- 這些對於滑鼠和鍵盤使用者來說是重要的提示。
- 另見 4.2 列表和連結樣式。
合理的動畫使用——微妙地使用動畫並提供關閉動畫的控制元件
- 考慮患有某些認知障礙人士的需求。
- prefers-reduced-motion 媒體查詢的建立專門是為了幫助解決這個問題。
隱藏內容以使其不會變得不可訪問的最佳實踐。例如，display: none 會使螢幕閱讀器無法讀取內容，因此需要謹慎使用。

資源

學習成果

理解 JavaScript 過多的情況。更簡單的方法通常更具可訪問性，並且通常對每個人都更好。
理解非侵入式 JavaScript 的價值
- 如果可能，將 JavaScript 用作可用性增強功能，這對應用程式的功能不是必需的。
- 一個很好的例子是表單輸入的客戶端驗證。
明智地使用事件，以免鎖定特定的控制元件型別。例如，滑鼠特有的事件，如 mouseover 和 mouseout，可能會鎖定鍵盤或觸控式螢幕使用者。

資源

學習成果

資源

學習成果

理解 WAI-ARIA 的目的——為原本非語義化的 HTML 提供語義，以便 AT 使用者能夠理解呈現給他們的介面。
- ARIA 的第一條規則：“如果你可以使用一個具有所需語義和行為的本機 HTML 元素或屬性，而不是重新利用一個元素並新增 ARIA 角色、狀態或屬性使其具有可訪問性，那麼就這樣做。”
- 換句話說，使用語義化 HTML 是一種理想，但並非在所有情況下都可行。WAI-ARIA 是適用於這種情況的橋接技術。
基本語法——角色、屬性和狀態。
地標和指示。
增強鍵盤可訪問性。
使用即時區域宣佈動態內容更新。

資源