Web 上的可訪問性

預備知識

在開始本模組之前，您應該熟悉 HTML、CSS 和 JavaScript。

教程與挑戰

什麼是可訪問性？

本文是本模組的開篇，將深入探討可訪問性是什麼——這包括我們需要考慮哪些人群以及為什麼，不同的人使用哪些工具與 Web 互動，以及我們如何將可訪問性融入我們的 Web 開發工作流程。

無障礙輔助工具和輔助技術

接下來，我們將關注可訪問性工具，提供有關您可以使用哪些工具來幫助解決可訪問性問題的相關資訊，以及殘障人士在瀏覽網頁時使用的輔助技術。您將在後續文章中一直使用這些工具。

HTML：可訪問性的良好基礎

透過確保正確 HTML 元素始終用於正確目的，可以使大量的 Web 內容變得可訪問。本文詳細介紹瞭如何利用 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。

• 概述：核心學習模組
• 下一頁