無障礙開發系列之準則及評級

歡迎訪文我的部落格YangChen’s Blog

無障礙開發準則

無障礙支援的怎麼樣？自然需要一個标準來判定，這個标準是W3C制定的，分為3個等級，分别A、AA、AAA，AAA級是無障礙的最高等級。這個三個等級之間有什麼差別呢？這要從無障礙開發的四個原則說起,這4個原則分别是可感覺性，可操作性，可了解性和魯棒性，具體的解釋将會在下面說明。

原則一：可感覺性-資訊和使用者界面元件必須以可感覺的方式呈現給使用者。

可感覺性原則下面包括以下4個準則

替代文本：為所有非文本内容提供替代文本，使其可以轉化為人們需要的其他形式，如大字型印刷，盲文，語音，符号或更簡單的語言。

1. 非文本内容：為所有呈現給使用者的非文本内容都提供相同目的替代文本，以下情況例外： （A級）
   • 控件，輸入: 如果非文本内容是一個控件或接受使用者輸入，則應有一個描述其目的名稱。
   • 時基媒體: 如果非文本内容是時基媒體，這時替代文本至少要提供非文本内容的描述辨別。
   • 測試: 如果非文本内容是以一個以文本呈現會失效的測試或練習，則替代文本至少要提供非文本内容的描述辨別。
   • 感官: 如果非文本内容的主要目的是建立一種特殊感官體驗，則替代文本至少要提供非文本内容的描述辨別。
   • 驗證碼: 如果非文本内容的目的是為了确認内容正在被一個人通路，而不是計算機通路，則要提供識别和描述非文本内容目的的替代文本，并提供适應針對不同類型感官知覺的輸出模型的驗證碼替代方式， 以适應不同的殘障人群。
   • 裝飾，格式，不可見: 如果非文本内容是純粹的裝飾、或隻用于視覺格式、或不呈現給使用者，則應以輔助技術可忽略的方式進行實作。

時基媒體：為時基媒體提供替代。

1. 純音頻和純視訊（預錄）: 對于預錄的純音頻和預錄的純視訊的媒體，以下情況為真，除非音頻或視訊就是文本的替代媒體 ，并已明确标記： （A級）
   • 預錄的純音頻: 對于預錄的純音頻内容，要給出時基媒體的替代，以呈現等同資訊。
   • 預錄的純視訊： 對于預錄的純視訊内容，要麼給出時基媒體的替代，要麼給出音軌，以呈現等同資訊。
2. 字幕（預錄）：要為同步媒體裡所有預錄音頻内容提供字幕，除非此媒體就是文本的替代媒體，并已明确标記。（A級）
3. 音頻描述或媒體替代（預錄）： 要為同步媒體提供時基媒體的替代或預錄的視訊 内容的音頻描述，除非媒體就是文本的替代媒體，并已明确标記。 （A級）
4. 字幕（直播）： 要為同步媒體裡所有現場直播的音頻内容提供字幕 。 （AA級）
5. 音頻描述（預錄） : 要為同步媒體裡所有預錄的視訊内容提供音頻描述 。 （AA級）
6. 手語（預錄）:要為同步媒體裡所有預錄的音頻内容提供手語翻譯 。（AAA級）
7. 擴充音頻描述（預錄）： 前景音頻描述不足以傳達視訊意思時，可通過暫停，把同步媒體裡所有預錄的視訊内容擴充音頻描述提供出來。 （AAA級）
8. 替代媒體（預錄） : 為所有預錄的同步媒體和所有預錄的純視訊媒體提供時基媒體的替代。 （AAA級）
9. 純音頻（直播）: 要為現場直播的純音頻内容提供時基媒體的替代，以呈現等同資訊。 （AAA級）

适應性：建立可用不同方式呈現的内容（例如簡單的布局），而不會丢失資訊或結構。

1. 資訊和關系: 通過呈現傳達的資訊、結構和關系，可以程式設計式确定或在文本中得到。 （A級）
2. 有含義的順序: 當呈現出來的内容其順序影響其含義，可以通過程式設計式确定其正确的閱讀順序 （A級）
3. 感官特性: 用于了解内容和操作内容的訓示，應該不完全依賴于元件的感官特性，如形狀、大小、視覺位置、方向、或聲音。 （A級）

可辨識性：使使用者更容易看到和聽到内容，包括把背景和前景分開。

1. 顔色用途: 顔色并不是作為傳達資訊、表明動作、提示響應或區分視覺元素的唯一視覺手段。 （A級）
2. 音頻控制:如果網頁音頻自動播放超過3秒鐘，提供一個機制用以暫停或停止音頻，或者控制獨立于全局系統音量的音頻音量。 （A級）
3. 對比度（最小）: 文本的視覺呈現以及文本圖像至少要有4.5:1的對比度，以下部分除外：（AA級）
   • 大文本: 大号文本以及大文本圖像至少有3:1的對比度。
   • 附屬内容: 文本或文本圖像是未激活的使用者界面元件部分，或者隻是一個純粹的裝飾，或者對任何人不可見，或者隻是包含其他重要可視内容的圖檔一部分，此文本或文本圖像沒有對比要求。
   • 商标: 文本作為标志或品牌名稱的一部分，沒有最低對比要求。
4. 調整文本: 除了字幕和文本圖像外，文本大小不需要輔助技術就可以放大至200%，且沒有内容或功能損失。 （AA級）
5. 文本圖像:如果正在使用的技術可以達到視覺效果，應使用文本傳達資訊而不用文本圖像，以下部分除外：（AA級）
   • 定制: 文本圖像可根據使用者要求進行視覺定制。
   • 必需: 文本的特殊呈現對要傳達的資訊是必需的。
6. 對比度（加強）: 文本視覺呈現以及文本圖像至少有7:1的對比度，以下部分除外：（AAA級）
   • 大文本: 大号文本以及大文本圖像至少有 4.5:1的對比度。
   • 附屬内容: 文本或文本圖像是未激活的使用者界面元件部分，或者隻是一個純粹的裝飾，或者對任何人不可見，或者隻是包含其他重要可視内容的圖檔一部分，此文本或文本圖像沒有對比要求。
   • 商标: 文本作為标志或品牌名稱的一部分，沒有最低對比要求。
7. 低背景音或無背景音: 對于預錄的純音頻内容，（1）前景音頻主要包含說話内容，（2）不是音頻驗證碼或音頻标志，以及（3）不發聲，主要用音樂表達，如唱歌或說唱，以下部分至少有一為真：（AAA級）
   • 無背景: 音頻不包含背景聲音。
   • 關閉: 背景聲音可以被關閉。
   • 20分貝: 背景聲音至少比前景說話内容低20分貝，持續僅一兩秒的偶發性聲音除外。
8. 視覺呈現: 對于文本塊的視覺呈現，提供一個機制以實作以下目标：（AAA級）
   • 使用者可以選擇前景色和背景色。
   • 寬度不超過80個字元或符号（如果是中日韓字型，不超過40個）。
   • 文本不能調整（即左對齊和右對齊）。
   • 段落裡的行間距（行隔）至少是1.5倍行距，段落間距至少比行間距大1.5倍。
   • 不使用輔助技術可将文本大小放大200%，并且在全屏視窗的情況下不需要使用者水準滾動就可以閱讀一行文本。
9. 文本圖像（沒有例外）: 文本圖像隻能用于純粹的裝飾或此文本的特殊呈現對要傳達的資訊是必需的。 （AAA級）

原則二：可操作性-使用者界面元件和導航必須可操作。

鍵盤可通路：使所有功能都能通過鍵盤來操作

1. 鍵盤: 内容的所有功能可通過鍵盤接口實作操作并且沒有對每次鍵擊做特定時限要求，除非底層功能是依賴使用者的移動路徑并且不做為端點的輸入方法。 （A級）
2. 無鍵盤陷阱: 如果可使用鍵盤接口能将焦點到移動到某網頁元件上，那麼可以隻使用鍵盤接口操作也可以将焦點從目前元件移開，如果需要未修改的方向鍵或Tab鍵或其它标準退出方式以外的操作，要告知使用者離開焦點的方法。 （A級）
3. 鍵盤（沒有例外）: 内容的所有功能可通過鍵盤接口實作操作并且沒有對每次鍵擊做特定時限要求。 （AAA級）

充足的時間：為使用者提供足夠的時間用以閱讀和使用内容。

1. 定時可調:對于由内容設定的每一個時間限制，以下部分至少有個一為真：（A級）
   • 關閉: 允許使用者達到時間期限之前，關閉時間限制。
   • 調整: 允許使用者達到時間期限前，調整時間限制。調整範圍要放寬，至少是預設設定長度的10倍。
   • 延長: 在逾時之前向使用者發出警告，并給使用者至少20秒的時間，使使用者可以通過簡單的動作來延長時間（例如“按空格鍵”），并允許使用者延長期限至少10次。
   • 實時特例: 時間限制是一個實時事件（例如拍賣）的必要部分，可能沒有時間限制的替代方法。
   • 必需特例: 時間限制是必需的，延長時限将導緻行為失效。
   • 20小時特例: 時間限制超過20個小時。
2. 暫停、停止、隐藏:對于運動、閃爍、滾動或自動更新的資訊，以下部分全部為真：（A級）
   • 運動、閃爍、滾動: 任何運動、閃爍或滾動的資訊（1）自動啟動，（2）持續時間超過5秒鐘，（3）與其他内容同時呈現。對于這些資訊，提供一個機制可使使用者暫停，停止或隐藏，除非運動、閃爍、或滾動是某個行為的必需部分。
   • 自動更新: 任何自動更新的資訊（1）自動啟動（2）與其他内容同時呈現。對于這些資訊，提供一個機制可使使用者暫停、停止、或隐藏，或控制更新的頻率，除非自動更新是某個行為的必需部分。
3. 無定時:定時不是一個事件或内容呈現行為的必需部分，非互動同步媒體和實時事件除外。 （AAA級）
4. 中斷: 中斷可以由使用者推遲或禁止，緊急中斷除外。 （AAA級）
5. 重新認證: 當認證的會話到期時，重新驗證後，使用者的行為可以繼續并且不丢失資料。 （AAA級）

癫痫：不要設計會導緻癫痫發作的内容。

1. 閃光三次或低于門檻值: 網頁不包含任何閃光超過3次/秒的内容，或閃光低于一般閃光和紅色閃光門檻值。 （A級）
2. 閃光三次: 網頁不包含任何閃光超過3次/秒的内容。 （AAA級）

可導航性：提供幫助使用者導航、查找内容、并确定其位置的方法。

1. 繞過子產品:提供一種機制以跳過在多個網頁中重複出現的内容子產品。 （A級）
2. 網頁标題: 網頁提供标題，以描述主題或用途。 （A級）
3. 聚焦順序: 如果網頁可以順序導航，并且導航順序影響含義和操作，可聚焦的元件以保持其含義和可操作的順序接受聚焦。 （A級）
4. 連結目的（在上下文裡）: 每個連結目的的确定可通過：單獨的連結文本，或者是連結文本聯系其程式設計式确定的連結上下文。除非連結的目的也會困惑普通使用者。 （A級）
5. 多種方法：用一種以上的方法在網頁集裡定位一個網頁，除非網頁是流程的結果或流程的某個步驟。 （AA級）
6. 标題和标簽: 标題和标簽說明主題或目的。 （AA級）
7. 焦點可見: 任何鍵盤可操作的使用者界面應有一套操作模式，在該模式裡鍵盤焦點訓示是可見的。 （AA級）
8. 定位:網頁集裡關于使用者定位的資訊是有效的。 （AAA級）
9. 連結目的（隻針對連結）: 提供一個機制允許隻從連結文本來識别每個連接配接目的。除非連結目的也會困惑普通使用者。 （AAA級）
10. 章節标題: 用章節标題（Section headings）組織内容。 （AAA級）

原則三：可了解性-資訊和使用者界面操作必須是可了解的。

可讀性：使文本内容可讀，可了解。

1. 網頁語言: 每個網頁的預設人類語言可以程式設計式确定。 （A級）
2. 局部語言:内容裡每個段落或短語的人類語言可以程式設計式确定，除了文本中專有名詞、術語、不确定語言的詞彙、已經融入到本地語言的詞語或短語。
3. 特殊單詞: 若單詞或短語被特定或者有限制的方式使用，包括成語和術語，則提供一個機制确定這些單詞或短語的具體定義。 （AAA級）
4. 縮寫:提供一個機制用于确定縮寫詞的擴充形式或含義。 （AAA級）
5. 閱讀水準: 當文本中排除專有名詞、标題，仍需要國中教育水準以上的閱讀能力時，提供補充内容，或者提供不高于國中教育水準既能閱讀的版本。（AAA級）
6. 發音: 若單詞沒有發音就無法了解單詞含義，則提供一個機制用于确定單詞的具體發音。 （AAA級）

可預測性：讓網頁以可預見的方式呈現和操作。

1. 焦點:當任何使用者界面元件接收焦點時，不會引起上下文變化。 （A級）
2. 輸入:更改任何使用者界面元件設定不會自動導緻上下文變化，除非使用者使用元件前已被告知該行為。 （A級）
3. 一緻性導航: 對于在網頁集裡多個網頁中重複出現的導航機制，每次出現時都應保持同樣的相對順序，除非是由使用者引起的順序變化。 （AA級）
4. 一緻性辨別: 網頁集集裡相同功能的元件可被一緻性辨別。 （AA級）
5. 請求變化: 上下文變化隻能由使用者請求來啟動，或者提供一個可關閉這種變化的機制。 （AAA級）

輔助輸入：幫助使用者避免和糾正錯誤。

1. 錯誤辨別: 如果輸入錯誤能夠被自動發現，錯誤類型應能被辨別，并且用文本描述給使用者。 （A級）
2. 标簽或說明: 當需要使用者輸入内容時，要給出标簽或說明。 （A級）
3. 錯誤建議: 如果輸入錯誤能夠被自動發現，且修改建議已知，則提供建議給使用者，除非它會危及安全或影響内容目的。 （AA級）
4. 錯誤預防（法律、金融、資料）: 對于使用者操作将引起法律承諾或者金融交易的網頁、修改或删除資料存儲系統裡的使用者可控資料的網頁、送出使用者測試響應的網頁等 ，對于這些網頁，以下部分至少有一為真：（AA級）
   • 可逆: 送出是可逆的。
   • 檢查: 使用者輸入的資料将被檢查是否有輸入錯誤，并為使用者提供一個改正錯誤的機會。
   • 确認: 提供一個機制用于最後送出之前審查、确認和糾正資訊。
5. 幫助:上下文相關的幫助是可用的。 （AAA級）
6. 錯誤預防（全部）: 對于要求使用者送出資訊的網頁，以下部分至少有一為真：（AAA級）
   • 可逆: 送出是可逆的。
   • 檢查: 使用者輸入的資料将被檢查是否有輸入錯誤，并為使用者提供一個改正錯誤的機會。
   • 确認: 提供一個機制用于最後送出之前審查、确認和糾正資訊。

原則四：魯棒性-内容必須健壯到可信地被種類繁多的使用者代理(包括輔助技術)所解釋。

相容：最大化相容目前和未來的使用者代理(包括輔助技術)。（AAA級）

1. 解析:使用标記語言實作的内容，元素要有完整的開始和結束标簽，元素根據其規格進行嵌套，元素不包含重複的屬性，任何ID都是唯一的，除非規範允許這些特性。 （A級）
2. 名稱，角色，值:對于所有使用者界面元件（包括但不限于：表單元素，連結和由腳本生成的元件），名稱和角色可以程式設計式确定; 可由使用者設定的狀态、屬性和值可以程式設計式設定，這些變化通知對使用者代理（包括輔助技術）有效。 （A級）

最後

以上就是無障礙開發的準則及評級，要做到哪一級标準就對應着看看要求吧，一般大部分網站做到AA級即可，我的這次無障礙項目的要求也是AA級。

參考文章

Web Content Accessibility Guidelines (WCAG) 2.0