行動無障礙檢核清單

本文提供行動應用程式開發者一個簡潔的無障礙必備要件檢核清單，本文將隨著更多模型產生而不斷地演進。

顏色

  • 顏色對比必須符合WCAG 2.0 AA 等級要求:

    • 一般文字對比值為 4.5:1(小於 18 點字或 14 點粗體)
    • 大文字對比值為 3:1(大於 18 點字或 14 點粗體)

  • 透過顏色傳遞資訊 必須 能藉由其他方式獲得資訊 (底線文字表示連結等)

备注： Jon Snook 已撰寫實用的 Colour Contrast Checker 能用於檢查背景與前景顏色的對比。同樣地，Tanaguru Contrast-Finder 也提供類似功能，而且建議相似且更好的對比顏色提供你考量使用。

可視性

  • 內容隱藏技術如完全不透明、Z 型態索引順序與螢幕外的配置必須不能單獨用於處理可視性。

  • 目前可視螢幕之外的所有事物必須真正地不可見(特別適用於具有多個卡片的單一頁面應用程式)：

    • 使用 hidden 屬性或 visibility 或 display 樣式屬性。
    • 除非絕對無法避免，否則不應使用aria-hidden 屬性。

焦點

  • 所有可觸發的元素必須可獲得焦點：

    • 標準的控制措施如連結、按鈕與表單輸入框預設為可獲得焦點。
    • 非標準的控制措施必須賦予它們合適的 ARIA Role，如按鈕、連結或核取框。

  • 焦點應該以邏輯的順序與一致的方式處理。

文字相等意義

  • 在應用程式之中，為每一個非嚴格呈現的非文字元素提供文字相等意義。

    • 在適當情況下使用alt 與 title(使用指引請參見 Steve Faulkner 關於Using the HTML title attribute的文章)。
    • 如果上述屬性不適用，則使用合適的ARIA 屬性如aria-label、aria-labelledby或 aria-describedby。

  • 文字圖片 必須避免使用。

  • 所有表單控制措施必須有標籤(<label> 元素) ，以利於螢幕報讀器使用者使用。

處理狀態

  • 標準控制措施如選項按鈕與核取框可被作業系統處理。然而，其他客製的控制措施狀態改變必須透過ARIA 狀態如 aria-checked、aria-disabled、ria-selected、aria-expanded 與 aria-pressed 來提供。

一般準則

  • 應用程式的名稱必須提供。

  • 標題必須不能破壞層級結構。

    html
    <h1>Top level heading</h1>
<h2>Secondary heading</h2>
<h2>Another secondary heading</h2>
<h3>Low level heading</h3>

  • ARIA 地標角色應該用於描述應用程式或文件結構，例如banner、complementary、contentinfo、 main、 navigation、search。

  • 觸控事件處理器必須只有在touchend事件上觸發。

  • 觸控目標必須提供使用者足夠大的互動操作(有用的觸控目標大小指引請參見BBC Mobile Accessibility Guidelines)。

備註： Tanaguru 自動無障礙測試服務提供有用的方法去發現一些發生於網頁或安裝的網頁應用程式(如 Firefox OS)無障礙錯誤。你可在tanaguru.org找到更多關於 Tanaguru 技術開發，以及貢獻該專案的資訊。

備註： 本文件原始版本由 Yura Zenevich 撰寫。