無障礙

取用 Web 內容,如公共服務、教育、電子商務網站和娛樂是一項人權。沒有人應該因為身心障礙、種族、地理位置或其他人類特質而被排除在外。這個單元討論了你應該學習的最佳實踐和技術,以使你的網站盡可能地無障礙。

先決條件

在開始學習這個單元之前,你應該要先熟悉 HTMLCSSJavaScript

備註: 如果你使用的電腦/平板/其他裝置無法建立自己的檔案,你可以在線上程式編輯工具如 JS BinGlitch

教學和挑戰

什麼是無障礙

這篇文章以深入探討無障礙是什麼作為本單元的開始——這包括我們需要考慮哪些群體以及為什麼,不同人使用哪些工具與 Web 互動,以及我們如何將無障礙融入我們的 Web 開發工作流程。

無障礙工具與輔助技術

接下來我們將注意力轉向無障礙工具,提供有關你可以用來幫助解決無障礙問題的各種工具資訊,以及身心障礙者在瀏覽 Web 時使用的輔助技術。你將在後續文章中使用這些工具。

HTML:無障礙的良好基礎

大量的 Web 內容只要確保始終為正確的目的使用正確的 HTML 元素,就能實現無障礙。這篇文章詳細探討了如何使用 HTML 來確保最大程度的無障礙。

CSS 與 JavaScript 無障礙最佳實踐

CSS 與 JavaScript,當正確使用時,也有潛力創造無障礙的 Web 體驗,但如果誤用則可能嚴重損害無障礙性。這篇文章概述了一些 CSS 與 JavaScript 的最佳實踐,應該考慮這些實踐以確保即使是複雜的內容也盡可能地無障礙。

WAI-ARIA 基礎

承接上一篇文章,有時候製作包含非語義化 HTML 和動態 JavaScript 更新內容的複雜 UI 控制項可能會很困難。WAI-ARIA 是一種可以透過加入瀏覽器和輔助技術,能夠識別並使用的額外語義的技術,它可以幫助解決這類問題,讓使用者了解正在發生的事情。在這裡我們將展示如何在基礎層面上使用它來改善無障礙性。

無障礙多媒體

另一類可能造成無障礙問題的內容是多媒體——影片、音訊和圖像內容需要提供適當的文字替代方案,以便輔助技術及其使用者能夠理解。這篇文章將展示如何做到這一點。

行動無障礙

由於行動裝置上的 Web 存取如此普及,且像 iOS 和 Android 這樣的主流平台擁有完善的無障礙工具,考慮你的 Web 內容在這些平台上的無障礙性是很重要的。這篇文章探討了行動裝置特有的無障礙考量。

無障礙技術排除 挑戰

在這個挑戰中,我們向你展示一個有幾個無障礙問題的簡單網站,你需要診斷並修復這些問題。

參見

立即開始建立無障礙 Web 應用程式

Marcy Sutton 的一系列優秀影片教學

Deque University 資源

包含程式碼範例、螢幕閱讀器參考資料和其他有用資源。

WebAIM 資源

包含指南、檢查清單、工具等等。

Web 無障礙評估工具列表

包含 Web 無障礙評估工具列表。

學習無障礙 Web 設計 MDN 學習夥伴

Scrimba學習無障礙 Web 設計課程教你如何透過解決互動式挑戰和修復真實世界的網站來撰寫無障礙 HTML。