歡迎使用學習無障礙工具!

數位無障礙 (通常簡稱 11y) 的重點在於設計及建構停用使用者能夠以有意義且同等的方式進行互動的網站和網頁應用程式。

本課程適合初學者及進階的網站開發人員使用。完成本系列課程的整個流程後,您可以全面瞭解無障礙功能和測試方法,或將該系列當做特定科目的參考資料。如果您有熟悉的術語,請參閱我們的詞彙解釋。如果您是網頁開發新手,請參閱學習 HTML 課程,掌握有關標記的基礎知識,以及瞭解 CSS 課程的基本概念。

這不是完整的參考檔案,每個章節都會介紹章節主題,並提供背景資訊和範例。系統會提供主題參考資料的連結,例如 MDNWCAG 規格,以及其他 web.dev 文章的連結。每個章節都會附上簡短的評量,協助使用者確認自己的理解。

部分無障礙功能最佳做法會根據要解決的身心障礙情況而有所差異。請務必瞭解使用者,並在身心障礙者提供所需資訊時吸引他們的目光。

歡迎提供意見回饋!請開啟 GitHub 問題,並盡可能提供詳細資訊,方便我們解決問題。

以下是課程內容:

什麼是數位無障礙設計?重要性為何?

設計及建構網站和網頁應用程式,讓身心障礙人士能以有意義且同等的方式進行互動。詳閱這些選擇對業務和法律的影響。

ARIA 和 HTML

何時要使用 ARIA 與 HTML。

內容結構

使用語意 HTML、地標和表格,方便使用者存取內容。

文件

建構無障礙網站和網頁應用程式時,應考慮的其他 HTML 元素。

鍵盤焦點

瞭解及強化鍵盤瀏覽順序和樣式。

JavaScript

編寫可存取的觸發條件事件、網頁標題和動態內容等。

圖片

製作無障礙圖片。

色彩和對比

採用合適的對比度和無障礙調色盤。

動畫和動態

支援各種動作觸發的動作不流暢的人。

Typography

挑選合適的字體和大小,並透過無障礙的版面配置整理文案。

影片和音訊

方便觀眾存取影片和音訊的替代媒體類型。

表單

建立無障礙表單。

設計和使用者體驗

建立無障礙設計及評估使用者體驗。

自動化無障礙功能測試

如何執行自動化無障礙功能測試。

手動測試無障礙功能

如何手動測試無障礙功能。

輔助技術測試

如何使用輔助技術 (AT) 進行測試。

結語與後續步驟

可協助你進行後續步驟的更多資源。

詞彙解釋

瞭解常見的無障礙術語和概念。

準備好學習無障礙設計了嗎?讓我們開始吧