認知無障礙

認知無障礙涵蓋了針對認知和學習障礙人群的無障礙考量。本文介紹了認知無障礙以及如何改進網路對有認知和學習差異人群的無障礙性。

認知障礙指一系列廣泛的殘疾,從能力最受限的智力障礙者,到與年齡相關的思維和記憶問題。這範圍包括患有精神疾病的人,如抑鬱症和精神分裂症。它還包括患有學習障礙的人,如閱讀障礙和注意力缺陷多動障礙 (ADHD)。

儘管認知障礙的臨床定義具有多樣性,但患有認知障礙的人會經歷一系列常見的功能問題。這些問題包括理解內容困難、記住如何完成任務困難,以及由不一致或非傳統的網頁佈局引起的困惑。在本文中,我們將重點關注開發人員應採取的措施,以提高其網站和應用程式的認知無障礙性。

概述

認知和智力障礙涵蓋了廣泛的範圍,可能是暫時的、短暫的或永久性的狀況。例如,痴呆症和阿爾茨海默病是永久性認知障礙,並且會逐漸惡化。其他永久性認知障礙包括失語症、言語和語言障礙、自閉症、ADD/ADHD、閱讀障礙和計算障礙。

暫時性認知障礙的例子可能是受酒精或藥物等物質影響的人。另一種形式是抑鬱症,例如在哀悼失去親人時,或者因為剛剛在網上看到的一條推文或影片而暫時感到悲傷。第三個例子可能是睡眠不足。

解決各種認知差異可能看起來是一個巨大的挑戰,尤其是當針對兩個不同人群的解決方案可能相互衝突時。處理這個問題的一種方法是關注認知技能。認知技能包括:

  • 注意力
  • 記憶力
  • 處理速度
  • 時間管理
  • 字母和語言
  • 數字符號和數學
  • 理解和做出選擇

為認知障礙人士提供無障礙解決方案的可靠方法包括:

  • 以多種方式提供內容,例如透過文字轉語音或影片;
  • 提供易於理解的內容,例如使用純語言標準編寫的文字;
  • 將注意力集中在重要內容上;
  • 儘量減少干擾,例如不必要的內容或廣告;
  • 提供一致的網頁佈局和導航;
  • 整合熟悉的元素,例如未訪問時為藍色,訪問後為紫色的帶下劃線的連結;
  • 將流程分解為邏輯的、必要的步驟,並帶有進度指示器;
  • 在不影響安全性的前提下,使網站身份驗證儘可能簡單;以及
  • 使表單易於完成,例如提供清晰的錯誤訊息和錯誤恢復功能。

WCAG 指南

WCAG(Web 內容無障礙指南)包含多項指南以改善認知無障礙。這些指南由全球資訊網聯盟(W3C)的 Web 無障礙倡議(WAI)釋出,W3C 是網際網路主要的國際標準組織。該組織還負責 可訪問富網際網路應用程式(ARIA) 指南。

WCAG 遵循四項原則:網站必須是可感知的、可操作的、可理解的,以及穩健的。為此,它們定義了 17 項具體指南,其中有六項與認知無障礙特別相關。

以下所有指南不僅有助於認知障礙人士。例如,能夠延長需要透過簡訊向移動裝置傳送認證程式碼的應用程式的過期時間,有助於以下場景:

  • 有注意力或焦慮障礙的人。
  • 短期記憶力差或同時處理多工的人。
  • 技術素養較低的人。
  • 無線訊號差的人。
  • 有運動控制問題的人。

適應性

指南 1.3 指出“內容應適應性強”。建立可以在不丟失資訊或結構的情況下以不同方式呈現的內容。例如,提供響應式佈局,採用單列移動設計。

所有資訊,包括透過呈現方式傳達的結構和關係,都應以所有使用者都能感知到的形式提供,以實現這一目標。例如,資訊可以透過敘述工具朗讀出來。使您的內容能夠被軟體理解是確保其可以被替代呈現模式使用的好方法。

時間

允許使用者有足夠的時間完成任務非常重要。指南 2.2 指出“為使用者提供足夠的時間閱讀和使用內容”。

時間限制是指在設定的時間後或定期發生的任何未經使用者啟動的程序,例如 30 分鐘後自動退出登入或有 15 分鐘時間完成購買。認知障礙人士可能需要更多時間來閱讀內容,或執行填寫表單等功能。解決方案包括為使用者提供足夠的額外時間來完成任務,或完全取消時間限制。

計時器

調整時間要求的選項包括:

  • 允許使用者在遇到時間限制之前,將其關閉或調整至原始限制的至少 10 倍。
  • 提醒使用者並提供至少 20 秒的緩衝時間,透過一個動作(例如按空格鍵)將超時持續時間延長 10 倍。

在內容上提供一個切換按鈕,允許使用者啟用更長的會話時間限制,或者完全沒有會話時間限制。定時內容的示例包括表單、定時閱讀練習和培訓材料。如果時間限制超過 20 小時,則無需提供特殊便利。

移動、閃爍、滾動

不要分散使用者注意力,特別是認知障礙人士的注意力,這一點很重要。

如果移動、閃爍、滾動或自動更新的資訊自動啟動,持續時間超過五秒,並與其他內容並行顯示,則使用者必須能夠暫停、停止、隱藏或控制它,除非它是基本功能。“基本”意味著移除移動、閃爍、滾動或自動更新的資訊會從根本上改變內容和/或功能的含義,並且資訊和功能無法以其他符合規定的方式實現。這包括動畫 GIF,如果 GIF 動畫超過 5 秒。

需要考慮的其他計時標準是:

  • 有認知或語言障礙的人可能需要更多時間來閱讀和理解。為提高可用性,請取消任何時間限制。還應避免定時內容,非互動式同步媒體和即時事件除外。
  • 注意力缺陷障礙人士應該能夠專注於內容而不會分心。使用者應該能夠推遲或抑制中斷,除了涉及提醒某人緊急情況的情況。這透過使認知障礙人士能夠專注於內容的主要目的來提供訪問。透過提供一種請求內容更新而非自動更新的方式,使使用者能夠推遲內容更新。此外,提供一種使非必要警報可選的方式。
  • 確保使用者在重新驗證過期會話後能夠繼續活動而不會丟失資料,例如儲存問卷的狀態。確保以一種方式儲存資料,以便使用者重新驗證後可以修改資料。在重新驗證之前,將資料編碼為隱藏或加密。
  • 提供有關可能導致資料丟失的不活動警告。當使用超時時,準確告知使用者多少時間會導致會話超時並導致資料丟失。例外情況是,在不採取任何行動的情況下,將資料保留超過 20 小時。

指南 2.4 指出“提供幫助使用者導航、查詢內容並確定其所在位置的方法”,並提供了 10 項指南以確保網站可導航且內容可查詢。

包含 <title>

務必為文件包含一個 <title>,因為標題可以快速輕鬆地提供螢幕主要內容的描述。認知障礙人士、短期記憶力有限的人以及閱讀障礙人士都能透過這種方式識別內容目的而受益。

標題和標籤

包含清晰且具有描述性的標題,以便使用者可以輕鬆找到資訊並理解不同內容部分之間的關係。描述性標籤可幫助使用者識別內容中的特定元件。閱讀速度慢的人和短期記憶力有限的人會受益於能夠透過章節標題預測每個章節包含的內容。

章節標題

標題有助於定義頁面內容的整體組織。它們有助於促進在頁面內容部分之間的導航,並提供一種機制來輔助理解。標題的示例包括內容的章節、節和小節等。

與其他用於識別頁面內容部分的方法(邊框、空白、水平線等)相比,標題是更明顯的導航輔助工具。

多種查詢內容的方式

不同的使用者喜歡不同的資訊查詢方法,因此為使用者提供多種方法來查詢您網站上的內容非常重要。

提供多種導航網站的方式可以幫助人們更快地找到資訊。一些使用者可能更喜歡目錄、網站地圖或搜尋功能,而不是閱讀和瀏覽多個頁面來尋找他們需要的內容。另一些使用者可能更喜歡按順序探索網站,一頁一頁地移動,以便更好地理解網站的佈局、內容和概念。

跳過內容塊的能力

提供一種機制,例如 跳過連結,以跳過多頁重複出現的內容塊。

焦點順序合理

互動元素的焦點順序應該合理。為此,DOM 順序應與視覺順序匹配,而視覺順序又應與 Tab 鍵順序匹配。如果 Tab 鍵順序跳來跳去,特別是當使用鍵盤導航時與視覺順序不匹配時,使用者可能會感到迷失方向。

獲得焦點的元素應具有可見的焦點

當用戶使用鍵盤導航時,UI 應該清晰地顯示當前哪個元素擁有焦點。不要修改或刪除瀏覽器的預設 :focus 樣式,除非您正在使焦點更加明顯。

連結的文字應清晰簡潔地傳達使用者如果選擇啟用它,下一步將導航到何處。措辭不當的連結文字可能會讓使用者對其目的或目的地感到困惑。

某些形式的輔助技術允許使用者透過頁面上所有連結的列表進行導航。連結將從其周圍的非連結內容的上下文中移除,使得可理解的連結文字變得更加重要。一個糟糕的體驗示例是,一個頁面上充滿了文字為“點選這裡”的連結。如果不指示“這裡”將帶您去往何處,連結的目的就不明確。

對於螢幕閱讀器而言,連結文字描述每個連結的目的至關重要。如果您已為螢幕閱讀器添加了連結內容,並且該內容冗長且可能讓有視力的讀者感到困惑,請考慮剪輯新增的文字,以在視覺上將其隱藏起來,不讓不使用輔助技術的人看到。

當前位置可用

使用者應該能夠在網站或應用程式中找到自己的方向。這對於注意力持續時間短的人尤其重要和有幫助,他們可能會在遵循一長串導航步驟時感到困惑。

所有使用者都受益於瞭解自己在網站層級結構中的位置,特別是對於內容量大或子部分多的網站或應用程式。麵包屑導航網站地圖以及在導航中將當前頁面標識為“當前”都是有助於傳達當前位置的技術。

可讀性

指南 3.1 指出“使文字內容可讀和可理解”。對於某些使用者來說,很難從上下文中推斷出單詞或短語的含義,特別是當單詞或短語以不尋常的方式使用,或被賦予了專業含義時。

對於這些使用者,閱讀和理解的能力可能取決於特定定義或首字母縮略詞或縮寫的擴充套件形式的可用性。有些使用者可能在識別書面文字方面遇到很大困難,但當文字被朗讀,或當關鍵過程和思想以視覺方式呈現時,他們能夠理解極其複雜和精密的文件。

宣告頁面語言和非主語言的任何內容

每個頁面的語言必須透過在 <html> 元素上使用 lang 屬性來宣告。對於文件主要語言之外的文字,再次包含 lang 屬性。

正確使用 lang 可以使一些螢幕閱讀器在將其轉換為合成語音時正確地播報文字。它還有助於使用文字轉語音軟體的人。

定義不尋常的詞語和詞語用法

有些殘疾會使人難以理解非字面意義的詞語用法,例如習語、俗語和專業術語。非母語使用者也可能難以理解這些術語。如果某個詞語或短語在文件中具有獨特的含義,請在文件中以內聯或連結方式、在詞彙表中或連結到線上詞典的方式提供定義。如果一個詞語或短語用於表示多個事物,請定義其每種用法。

定義縮寫

縮寫對於以下人群來說可能會造成困惑:

  • 解碼詞語有困難。
  • 記憶力有限。
  • 難以利用上下文輔助理解。
  • 依賴螢幕放大鏡(這通常會減少上下文線索)。

首次使用時提供縮寫的完整形式,後跟放置在 <abbr> 元素中的縮寫。如果縮寫沒有完整形式,或者是一個不在文件主語言中的詞的縮寫(例如拉丁語),則解釋其含義。此外,考慮為首字母縮略詞(縮寫詞的發音)使用 ruby 文字

閱讀水平

內容應該儘可能清晰地編寫。一個好的原則是使內容足夠簡單,以便第一次就能理解。實現這一目標的方法包括:

  • 使用簡短、簡單的詞語。
  • 寫短句子。
  • 使用主動語態和現在時。
  • 使用正確的語法和拼寫。

為認知障礙人士提供低閱讀水平的文字摘要(有時稱為 TL;DR,即“太長;沒讀”)很有幫助。您還可以使用另一種技術,即提供配套的視覺效果來幫助解釋想法、事件和過程。

有些工具可以評估您內容的閱讀水平。例如,這份文件的平均閱讀水平約為 11 級。這意味著它應該能被 16 到 17 歲的英語母語人士輕鬆理解。有些工具甚至可以提供建議來幫助簡化它。

發音

有多種技術可以幫助人們學習如何發音單詞:

  • 在單詞後面立即提供發音。
  • 連結到發音列表。
  • 提供帶有發音的詞彙表。
  • 使用 <ruby> 元素來演示單詞如何發音。

提供單詞發音指導有助於各種人群,包括喜歡朗讀的人、非母語人士以及不熟悉上下文中術語含義的人。

另一種解決方案是使用字形或變音符號來演示發音。但是,如果使用此技術,則必須有一個機制來將其關閉。此外,連結到所用符號的指南會很有幫助,因為它們的含義可能不明顯。

可預測性

WCAG 指南 3.2 指出“使網頁以可預測的方式顯示和操作”。這是良好使用者體驗設計的一項原則。一致性對於認知困難人士尤其重要。這包括頁面佈局的一致性和可預測的互動元件。

使用啟用,而非焦點來改變上下文

建立上下文更改應該是故意的。因此,當 UI 功能獲得 焦點 時,不應觸發進一步的使用者操作。相反,使用者應該需要“啟用”某個功能才能觸發更改。

根據主動請求更改設定

表單控制元件操作和資料輸入應產生可預測的行為。上下文的變化可能會使認知障礙使用者感到困惑,因此只有當明確這種變化是響應使用者行為而發生時,才應發生上下文變化。

更改狀態需要有意的使用者操作。例如,選中複選框、輸入資料或更改選擇選項。此外,請務必提供提交按鈕以啟動上下文更改,並在更改發生之前描述將發生什麼。

保持整個網站導航的一致性

保持頁面之間的導航順序一致。例如,如果您在多個頁面上都有導航欄,請確保整個網站的導航是統一的,具有相同的連結和相同的位置。這不僅適用於導航:每次出現時,所有重複元件都應以相同的相對順序呈現。

提供一致的標籤

相同的功能在每次使用時都應具有相似的標籤。一致的按鈕標籤、圖示的替代文字以及相似互動的圖示等,即使在您網站的不同部分,也能幫助所有使用者。

保持一致性和可預測性,並使用規範

雖然無標籤圖示並非傳達資訊最有效的方法,但保持圖示使用(如果帶標籤,則其標籤文字)的一致性有助於人們理解圖示所代表的含義。同樣,不要更改瀏覽器後退按鈕等預設設定。如果您需要重定向使用者,請事先告知使用者。

輸入輔助

指南 3.3 幫助確保準確的資料輸入,指出“幫助使用者避免和糾正錯誤”。雖然我們都會犯錯,但有些人更容易犯錯,更不容易注意到錯誤,或者一旦犯錯就更難糾正。

輸入輔助指南旨在降低使用者(特別是殘障使用者)犯錯的可能性,如果他們確實犯錯,則增加他們看到並理解錯誤訊息併成功修復任何錯誤的可能性。

傳達自動錯誤檢測

需要提醒使用者錯誤並告知錯誤原因。如果存在客戶端錯誤檢測,請遵守以下準則,以確保錯誤在傳達給使用者時儘可能有效:

  • 錯誤必須以文字形式描述。
  • 確保錯誤訊息儘可能具體。
  • 如果輸入的值無效,提供文字以識別未完成的必填欄位和文字描述。
  • 如果錯誤阻止了表單提交,請聚焦於該錯誤。如果存在多個錯誤,請提供摘要,每個錯誤連結到相關的輸入。
  • 除了使用圖示、圖片、顏色等之外,還應包含文字。有些人難以理解圖示和其他視覺線索的含義。
  • 其他人可能難以理解錯誤訊息的文字版本。對於這些人,還應提供圖示和顏色等。
  • 此外,在表單成功提交時提供反饋。

提供使用者輸入說明

在表單開頭提供文字說明,指導如何操作。當用戶需要輸入資訊時,使用 <label><fieldset><legend> 元素來包含標籤或說明。

標籤應具有描述性,並放置在與其相關的輸入附近。當要求特定輸入格式時,提供一個格式正確的示例。此外,考慮執行伺服器端驗證以幫助格式化輸入資料,以幫助使用者輕鬆輸入。

如果表單控制元件是必需的,請透過視覺和程式碼兩種方式指示。如果表單控制元件會改變上下文,請在使用者觸發上下文改變之前,以使用者能夠理解的方式描述將發生什麼。

錯誤建議

如果自動檢測到輸入錯誤且已知糾正建議,則向用戶提供建議輸入(除非這樣做會危及內容的安全性或目的)。

防止災難

對於導致或可能導致法律、財務或其他重大後果的提交,請確保可以審查、確認和/或撤銷提交。

使用者輸入的資料在提交前應進行錯誤檢查,並應給予使用者糾正錯誤的機會。使用者在最終提交前應能夠審查、確認和糾正資訊。此外,除了提交按鈕之外,務必包含一個確認複選框。

如果提交導致法律或金融交易發生,應提供一個明確的時間,在此時間內使用者可以修改或取消請求。

提供幫助

應提供上下文相關的幫助。如果表單需要文字輸入,請提供表單說明,描述目的和必要的輸入。包括拼寫檢查和長篇文字輸入的建議,以及幫助和支援材料的連結。如果預期輸入需要特定資料格式,請提供示例。

注意

以上都是良好的設計實踐。它們將使所有人受益。

  • 許多認知障礙人士也患有肢體殘疾。網站必須符合 W3C 的Web 內容無障礙指南
  • W3C 的認知和學習障礙無障礙工作組為認知障礙人士制定了網頁無障礙指南。
  • WebAIM 有一個認知頁面,其中包含相關資訊和資源。
  • 美國疾病控制與預防中心估計,截至 2018 年,每 4 名美國公民中就有 1 人患有殘疾,其中認知障礙是年輕人中最常見的
  • 在美國,“智力障礙”過去被稱為“精神發育遲滯”。在英國,“智力障礙”通常被稱為“學習障礙”或“學習困難”。

另見