移動版無障礙檢查清單

本文件提供了一份針對移動應用開發人員的簡潔無障礙需求清單。隨著更多模式的出現，它將不斷發展。

顏色

  • 顏色對比度必須符合 WCAG 2.1 AA 級別要求
    • 正常文字（小於 18 點或 14 點粗體）的對比度比率為 4.5:1。
    • 大型文字（至少 18 點或 14 點粗體）的對比度比率為 3:1。
  • 透過顏色傳達的資訊必須透過其他方式（連結的下劃線文字等）也能獲得。

可見性

  • 內容隱藏技術（例如零透明度、z 索引順序和螢幕外放置）不得單獨用於處理可見性。
  • 除了當前可見螢幕外，所有其他內容必須真正不可見（尤其適用於包含多個卡片的單頁應用程式）
    • 使用hidden屬性或visibility或display樣式屬性。
    • 除非絕對不可避免，否則不應使用aria-hidden屬性。

焦點

  • 所有可啟用的元素都必須可聚焦
    • 標準控制元件（例如連結、按鈕和表單欄位）預設情況下是可聚焦的。
    • 非標準控制元件必須分配有適當的ARIA 角色，例如button、link或checkbox。
  • 焦點應以邏輯順序和一致的方式處理。

文字等效項

  • 必須為應用程式中所有非嚴格呈現的非文字元素提供文字等效項。
    • 在適當的地方使用alt和title（閱讀史蒂夫·福克納關於使用 HTML title 屬性的帖子，以獲得良好的指南）
    • 如果上述屬性不適用，請使用適當的ARIA 狀態和屬性，例如aria-label、aria-labelledby或aria-describedby。
  • 必須避免使用文字影像。
  • 所有使用者介面元件，其可見文字（或文字影像）用作標籤，都必須在元件的程式化名稱中提供相同的文字。WCAG 2.1：標籤在名稱中。
  • 所有表單控制元件都必須有標籤（<label>元素），以便螢幕閱讀器使用者使用。

處理狀態

  • 標準控制元件（例如單選按鈕和複選框）由作業系統處理。但是，對於其他自定義控制元件，狀態更改必須透過ARIA 狀態提供，例如aria-checked、aria-disabled、aria-selected、aria-expanded和aria-pressed。

方向

  • 內容不應侷限於單一方向（例如縱向或橫向），除非必不可少。WCAG 2.1：方向
    • 方向必不可少的情況的示例包括鋼琴應用程式或銀行支票。

一般指南

  • 必須提供應用程式標題。
  • 標題不得破壞層次結構
    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。
  • 對於觸控事件，請確保以下內容（WCAG 2.1：指標取消）
    • 下壓事件不應用於執行函式的任何部分；
    • 如果上述條件不滿足，則函式的完成應在抬起事件上發生，並且應提供一種機制，以便在函式完成之前中止操作或在函式完成之後撤消操作；
    • 如果上述條件不滿足，則抬起事件應能夠撤消在按下事件上觸發的任何操作；
    • 如果需要在按下事件觸發操作，通常是為了模擬現實世界體驗或提供即時反饋，則以上所有規則可能會被違反。例如，遊戲控制器、鋼琴鍵盤或虛擬鍵盤。
  • 觸控目標必須足夠大，以便使用者進行互動（有關有用的觸控目標大小指南，請參閱BBC 移動裝置無障礙指南）。