Skip to main content

無障礙網站

什麼是無障礙網站?​

Web accessibility refers to the inclusive practice of designing and developing websites and web applications in a way that ensures equal access and usability for people with disabilities, including those with visual, auditory, motor, and cognitive impairments.

設計和開發網站應用程式時，確保對擁有視覺、聽覺、運動和認知障礙等人提供一致的訪問和可用性。

無障礙原則 Principles​

根據 W3C 發布的無障礙網頁內容指引 WCAG (Web Content Accessibility Guidelines)，可分成 4 大原則和 13 個指引：

  1. 可察覺性（Perceivable）：資訊及使用者介面元件應以使用者能察覺之方式呈現

    • 1.1 替代文字 : 為任何非文字的內容提供相等意義的替代文字，使這些內容能轉換成大字版、點字、語音、符號或簡化過的語言等不同型態
    • 1.2 Times-based 媒體：針對 Times-based 媒體提供替代內容
    • 1.3 可調適：建立能以不同方式(例如：簡化版面)呈現，而仍不會喪失資訊或結構的內容
    • 1.4 可辨識：讓使用者能更容易地看見及聽到內容、區分前景和背景

  2. 可操作性（Operable） 使用者介面元件及導覽功能應具可操作性

    • 2.1 鍵盤可操作：所有功能都能夠過鍵盤使用
    • 2.2 充足時間：提供使用者充分的時間閱讀及操作
    • 2.3 預防痙攣和身體不適反應：不用任何已知會引發痙攣或身體反應的方式來設計內容
    • 2.4 可導覽：提供協助使用者導覽、尋找內容及判斷所在的方法
    • 2.5 輸入方式 : 提供鍵盤以外的其他輸入方式，讓使用者更容易操作

  3. 可理解性（Understandable） 資訊及使用者介面之操作應具可理解性

    • 3.1 可讀性：讓文字內容可讀並可理解
    • 3.2 可預期性：讓網頁以可預期的方式來呈現及運作
    • 3.3 輸入協助：幫助使用者避開及更正錯誤

  4. 穩健性 (Robust): 網頁內容應可供身心障礙者以輔助工具讀取，並具有相容性

    • 4.1 相容性：針對目前及未來的使用者代理與輔助科技，最大化其相容性

參考資料：

相關套件資源​

  1. axe DevTools - Web Accessibility Testing (Chrome 套件連結)

  2. WAVE Evaluation Tool(Chrome 套件連結)

  3. DigitalA11y Tublets(Chrome 套件連結)