無障礙訪問
如果你想成為一名網頁開發者,學習一些 HTML、CSS 和 JavaScript 知識很有用。除了機械化的使用之外,學習如何負責任地使用這些技術也很重要,以便所有讀者都能在網路上使用你創作的內容。為了幫助你實現這一點,本模組將涵蓋一些通用的最佳實踐(這些實踐貫穿於整個 HTML、CSS 和 JavaScript 主題),跨瀏覽器測試,以及一些從一開始就強制執行可訪問性的技巧。我們將詳細介紹可訪問性。
概述
當有人將一個網站描述為“可訪問的”時,他們的意思是任何使用者都可以使用其所有功能和內容,無論使用者如何訪問網路——即使是並且尤其是那些有身體或精神障礙的使用者。
- 網站應該能夠被鍵盤、滑鼠和觸控式螢幕使用者以及使用者訪問網路的任何其他方式訪問,包括螢幕閱讀器和 Alexa 和 Google Home 等語音助手。
- 應用程式應該能夠被任何人在不考慮聽覺、視覺、身體或認知能力的情況下理解和使用。
- 網站也不應該造成傷害:諸如運動之類的網路功能可能會導致偏頭痛或癲癇發作。
預設情況下,如果正確使用,HTML 是可訪問的。網頁可訪問性涉及確保內容保持可訪問性,無論誰以及如何訪問網路。
Firefox 可訪問性檢查器是一個非常有用的工具,用於檢查網頁上的可訪問性問題。以下影片對此進行了很好的介紹
先決條件
為了充分利用本模組,最好至少完成 HTML、CSS 和 JavaScript 主題的前兩個模組,或者可能更好的是,在完成相關技術主題的同時完成可訪問性模組的相關部分。
指南
- 什麼是無障礙訪問?
-
本文從介紹可訪問性是什麼開始——這包括我們需要考慮哪些群體以及原因,不同的人使用哪些工具與網路互動,以及我們如何將可訪問性納入我們的網頁開發工作流程。
- HTML:無障礙訪問的良好基礎
-
透過確保始終將正確的 HTML 元素用於正確的目的,就可以使大量的網路內容變得可訪問。本文詳細介紹瞭如何使用 HTML 來確保最大的可訪問性。
- CSS 和 JavaScript 無障礙訪問最佳實踐
-
CSS 和 JavaScript 如果使用得當,也能夠提供可訪問的網路體驗,但如果使用不當,它們可能會嚴重損害可訪問性。本文概述了一些 CSS 和 JavaScript 的最佳實踐,應該考慮這些實踐以確保即使是複雜的內容也儘可能地可訪問。
- WAI-ARIA 基礎
-
承接上一篇文章,有時建立涉及無意義 HTML 和動態 JavaScript 更新內容的複雜 UI 控制元件可能會很困難。WAI-ARIA 是一種可以幫助解決此類問題的技術,它透過新增瀏覽器和輔助技術可以識別並用於讓使用者瞭解正在發生的事情的更多語義。在這裡,我們將展示如何在基本級別使用它來提高可訪問性。
- 無障礙多媒體
-
另一類可能造成可訪問性問題的內容是多媒體——影片、音訊和影像內容需要提供適當的文字替代方案,以便輔助技術及其使用者能夠理解。本文展示瞭如何做到這一點。
- 移動裝置無障礙訪問
-
隨著移動裝置上的網路訪問變得如此流行,以及 iOS 和 Android 等流行平臺擁有功能齊全的可訪問性工具,考慮網路內容在這些平臺上的可訪問性非常重要。本文探討了移動裝置特定的可訪問性注意事項。
評估
- 可訪問性故障排除
-
在本模組的評估中,我們將向你展示一個包含多個可訪問性問題的簡單網站,你需要診斷並修復這些問題。
另請參閱
- 學習無障礙網頁設計 MDN 課程合作伙伴
-
Scrimba 的 學習無障礙網頁設計課程透過解決互動式編碼挑戰和修復真實世界的網站來教你如何編寫無障礙 HTML。
- 立即開始構建可訪問的 Web 應用程式
-
Marcy Sutton 製作的一系列優秀的影片教程。
- Deque 大學資源
-
包括程式碼示例、螢幕閱讀器參考和其他有用資源。
- WebAIM 資源
-
包括指南、清單、工具等。
- 網頁可訪問性評估工具列表
-
包括網頁可訪問性評估工具列表。