無障礙網頁

網路開發中的無障礙網頁,意味著盡可能令所有人都能使用網站,就算是在某些感官方面受限的人也不例外。本頁面會提供一些關於無障礙網頁的資訊。

「理想的無障礙環境就是在各方面都營造一個無障礙的環境。在有形方面,所應該考量事情包括,生活上、行動上、教育上所可能遭受到的障礙,並提供其足以克服這些環境的需求,此等需求包括個體本身的配備,如點字機……以及周圍環境中的裝設,如扶手、導盲磚……」 中文維基百科的「無障礙環境」、「理想無障礙環境」章節

從根本上,網路是為了在所有人面前都能運行而設計的,無論他們使用的軟硬體、語言文化、地理位置、抑或身心功能如何。當聽覺、運動、視力或認知能力障礙的人,都能訪問網路的時候,這個目標才算達成。」W3C - Accessibility

重要概念

MDN Accessibility Learning Area 涵蓋了最新的無障礙網頁教學所需:

何謂無障礙網頁?

這篇文章針對何謂無障礙網頁,起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。

HTML:無障礙網頁的好開始 (en-US)

只要確保在任何時候,正確的 HTML 元素都用於正確的目的,就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。

充分實踐 CSS 與 JavaScript 的無障礙 (en-US)

如果 CSS 與 JavaScript 使用得當,將可以為無障礙網頁提供助力……反過來的話,就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下,確保能充分實踐 CSS 與 JavaScript 的無障礙。

WAI-ARIA 基礎

從之前的文章來看,有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等,會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意,讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術,以提昇無障礙。

無障礙多媒體 (en-US)

會導致無障礙網頁出問題的另一個根源是多媒體:影片、聲音、圖片等內容,需要有合適的文字替代,以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。

行動無障礙網頁 (en-US)

隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台,已經具備完善的輔助工具,考慮到如何在這些平台上實踐無障礙網頁,就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。

其他文件

Understanding the Web Content Accessibility Guidelines (en-US)

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

Keyboard-navigable JavaScript widgets

Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.

ARIA (en-US)

A collection of articles to learn how to use ARIA to make your HTML documents more accessible.

Assistive technology (AT) development

A collection of articles intended for AT developers

Mobile accessibility checklist

This document provides a concise checklist of accessibility requirements for mobile app developers.