可感知

本文提供了有關如何編寫 Web 內容的實用建議，以便其符合 Web 內容無障礙指南 (WCAG) 2.0 和 2.1 的“可感知”原則中概述的成功標準。“可感知”是指使用者必須能夠以某種方式感知它，使用一種或多種感官。

注意：要閱讀 W3C 對“可感知”及其指南和成功標準的定義，請參閱 原則 1：可感知 - 資訊和使用者介面元件必須以使用者可以感知的方式呈現。

指南 1.1 — 為非文字內容提供文字替代

這裡的關鍵是文字可以轉換為殘疾人可以使用其他形式。例如，它可以由螢幕閱讀器朗讀，轉換為大字型，或顯示在盲文顯示器上。非文字內容指的是多媒體，例如影像、音訊和影片。

成功標準 如何符合標準 實用資源
1.1.1 提供文字等效項 (A) 所有傳達有意義內容的影像都應提供合適的替代文字。 文字替代。
複雜影像或圖表應提供可訪問的替代方案，無論是在同一頁面上還是透過連結。使用常規連結而不是 longdesc 屬性。

文字描述可能有效，或者可以使用可訪問的資料表（請參閱 HTML 表格高階功能和無障礙）。有關 longdesc 的論點，請參閱 W3C 的 影像描述擴充套件 (longdesc)。
多媒體內容（即音訊或影片）至少應提供描述性標識，例如字幕或類似內容。

有關靜態字幕選項，請參閱 文字替代，以及有關其他替代方案，請參閱 音訊成績單 和 影片文字軌道。
UI 控制元件（如表單元素和按鈕）應具有描述其用途的文字標籤。 按鈕很簡單——您應該確保按鈕文字描述了按鈕的功能（例如，<button>上傳影像</button>）。有關其他 UI 控制元件的更多資訊，請參閱 UI 控制元件。
以輔助技術無法看到的方式實現裝飾性（非內容）影像、影片等，這樣就不會讓使用者感到困惑。

裝飾性影像應使用 CSS 背景影像實現（請參閱 背景）。如果必須透過 <img> 元素包含影像，則將其 alt 設定為空（alt=""）。否則，螢幕閱讀器可能會嘗試讀出檔案路徑等。

如果您包含自動播放的背景影片或音訊，請使其儘可能不顯眼。不要使其看起來或聽起來像內容，並提供關閉它的控制元件。理想情況下，根本不要包含它。

注意：另請參閱 指南 1.1：文字替代的 WCAG 說明。

指南 1.2 — 為基於時間的媒體提供文字替代

基於時間的媒體是指具有持續時間的媒體，例如音訊和影片。請注意，如果音訊/影片用作現有文字內容的替代方案，則您無需提供其他文字替代方案。

成功標準 如何符合標準 實用資源
1.2.1 為預錄的純音訊和純影片內容提供替代方案 (A) 應為預錄的純音訊媒體提供成績單，並應為預錄的純影片媒體（即無聲影片）提供成績單或音訊描述。 有關成績單資訊，請參閱 音訊成績單。尚無音訊描述教程可用。
1.2.2 為基於 Web 的影片提供字幕 (A) 您應為 Web 上呈現的影片（例如，HTML 影片）提供字幕。這是為了方便無法聽到影片音訊部分的人員。

 有關 HTML 影片字幕，請參閱影片文字軌道。另請參閱新增您自己的字幕和隱藏式字幕（YouTube）。
1.2.3 為基於網路的影片提供文字轉錄或音訊描述 (A) 您應該為網路上提供的影片提供文字轉錄或音訊描述（例如，HTML 影片）。這是為了方便那些無法看到影片視覺部分，並且僅從音訊中無法獲得完整內容的人。 有關成績單資訊，請參閱 音訊成績單。尚無音訊描述教程可用。
1.2.4 為直播音訊提供字幕 (AA) 您應該為所有包含音訊的即時多媒體提供同步字幕（例如，視訊會議、直播音訊廣播）。
1.2.5 為預錄影片提供音訊描述 (AA) 應為預錄影片提供音訊描述，但僅限於現有音訊未傳達影片表達的完整含義的情況。
1.2.6 為預錄音頻提供手語等效內容 (AAA) 應為任何包含音訊的預錄內容提供等效的手語影片。
1.2.7 提供包含音訊描述的擴充套件影片 (AAA) 如果由於影片時序問題（例如，內容中沒有合適的暫停點以插入音訊描述）而無法提供音訊描述（請參閱 1.2.5），則應提供包含插入暫停（和音訊描述）的影片的替代版本。
1.2.8 為預錄媒體提供替代方案 (AAA) 對於所有包含影片的內容，都應提供描述性文字轉錄，例如您正在觀看的電影的指令碼。這是為了方便聽力障礙的觀眾，他們無法聽到內容。 有關轉錄資訊，請參閱音訊轉錄。
1.2.9 為直播音訊提供轉錄 (AAA) 對於任何正在廣播的直播音訊內容，都應提供描述性文字，例如您正在收聽的戲劇或音樂的指令碼。這是為了方便聽力障礙的觀眾，他們無法聽到內容。 有關轉錄資訊，請參閱音訊轉錄。

指南 1.3 — 建立可以以不同方式呈現的內容

此指南指的是內容能夠以多種方式供使用者使用，以適應他們不同的需求的能力。

成功標準 如何符合標準 實用資源
1.3.1 資訊和關係 (A)

任何內容結構——或內容之間建立的視覺關係——也可以透過程式設計方式確定，或者從文字描述中推斷。這相關的常見情況是

  • 文字標籤及其描述的表單元素。這些使用<label>元素明確關聯，螢幕閱讀器等可以識別該元素。
  • 影像替代文字。內容影像應提供清晰描述影像內容的文字，該文字可以與影像進行程式設計關聯（例如，替代文字），或者易於關聯（例如，描述影像並緊挨著它）。這意味著即使您看不到影像，仍然可以推斷出完整含義。
  • 列表。如果列表項的順序很重要，請使用有序列表(<ol>)。
 整個

HTML：可訪問性的良好基礎包含大量關於此的資訊，但您應特別參考良好的語義、UI 控制元件和文字替代方案。
1.3.2 有意義的內容順序 (A) 對於任何內容，即使以不尋常的方式視覺呈現，也應該很容易確定合理的邏輯閱讀順序。該順序應透過使用正確的語義元素（例如，標題、段落）來明確表示，而 CSS 用於建立任何不尋常的佈局樣式，而不管標記如何。 再次，請參閱HTML：可訪問性的良好基礎。
1.3.3 感官特徵 (A)

操作控制元件或理解內容的說明不依賴於單一感官。這可能會對患有與該感官相關的殘疾的人或不支援該感官的裝置造成障礙。因此，例如

  • "單擊圓形按鈕繼續"
    應清楚地標記按鈕，以便很明顯它是您需要按下的按鈕。如果有多個按鈕，請確保所有按鈕都已清楚地標記以區分其功能。
  • "收聽音訊說明以獲取指導"
    這顯然是有問題的——音訊對於聽力障礙者來說是無法訪問的，而文字可以閱讀，也可以根據需要由螢幕閱讀器朗讀。
  • "從螢幕右側滑動以顯示選單"
    某些使用者可能無法滑動螢幕，這可能是由於殘疾或其裝置不支援觸控造成的。應提供替代方案，例如鍵盤快捷鍵或可以透過鍵盤或其他方式啟用的按鈕。

注意：僅透過顏色傳達說明是相關的，但在其他指南（1.4.1）中進行了介紹。
1.3.4 方向 (AA) 在 2.1 中新增 內容不將其檢視和操作限制在單個顯示方向（例如縱向或橫向），除非特定顯示方向至關重要。

瞭解方向
1.3.5 識別輸入目的 (AA) 在 2.1 中新增

請遵循53 個輸入欄位的列表，以程式設計方式識別字段的目的。

 瞭解識別輸入目的
1.3.6 識別目的 (AAA) 在 2.1 中新增 在使用標記語言實現的內容中，可以透過程式設計方式確定使用者介面元件、圖示和區域的目的。 瞭解識別目的

指南 1.4: 使使用者更容易看到和聽到內容，包括將前景與背景分離

此指南與確保核心內容易於從背景和其他裝飾中識別出來有關。經典示例是顏色（顏色對比度和顏色使用來傳達說明），但也適用於其他情況。

成功標準 如何符合標準 實用資源
1.4.1 顏色使用 (A)

不應僅依靠顏色來傳達資訊。例如，在表單中，您永遠不要僅使用顏色（如紅色）來標記必填欄位。相反（或同時），使用星號以及“必填”之類的標籤會更合適。

 請參閱顏色使用、顏色和顏色對比度以及多個標籤。
1.4.2 音訊控制元件 (A) 對於任何播放時間超過三秒的音訊，請提供可訪問的控制元件來播放和暫停音訊/影片，以及靜音/調整音量。 使用原生<button>提供可訪問的鍵盤控制元件，如影片播放器樣式基礎中所示。
1.4.3 最小對比度 (AA)

背景和前景內容之間的顏色對比度應達到最低水平以確保易讀性

  • 文字及其背景應具有至少 4.5:1 的對比度比率。
  • 標題（或只是較大的）文字應具有至少 3:1 的比率。較大的文字定義為至少 18pt 或 14pt 粗體。
 請參閱顏色對比度和顏色和顏色對比度。
1.4.4 調整文字大小 (AA) 當文字大小加倍時，頁面應具有可讀性和可用性。這意味著設計應該具有響應性，以便在文字大小增加時，內容仍然可以訪問。
1.4.5 文字影像 (AA) 不應使用影像來呈現文字可以完成的內容。例如，如果影像主要包含文字，則可以使用文字以及影像來表示它。
1.4.6 增強對比度 (AAA)

此標準遵循並建立在標準 1.4.3 的基礎上。

  • 文字及其背景應具有至少 7:1 的對比度比率。
  • 標題（或只是較大的）文字應具有至少 4.5:1 的比率。較大的文字定義為至少 18pt 或 14pt 粗體。
 請參閱顏色和顏色對比度。
1.4.7 低背景音訊或無背景音訊 (AAA) 主要包含語音的預錄音頻錄音應具有最少的背景噪音，以便內容易於理解。
1.4.8 視覺呈現 (AAA)

對於文字內容呈現，以下應為真

  • 前景和背景顏色應由使用者選擇。
  • 文字塊的寬度不應超過 80 個字元（或字形），以實現最大可讀性。
  • 文字不應完全對齊（例如，text-align: justify;）。
  • 行高應至少為段落內文字大小的 1.5 倍（例如，line-height: 1.5;），並且段落之間應至少為文字大小的 2.25 倍（例如，padding: 2.25rem;）。
  • 當文字大小加倍時，內容不應需要滾動。
1.4.9 文字影像（無例外）（AAA） 除非文字純粹是裝飾（即，它不傳達任何內容）或無法以任何其他方式呈現，否則不應將文字作為影像的一部分呈現。
1.4.10 重排 (AA) 在 2.1 中新增
  • 對於從左到右的語言（如英語）或從右到左的語言（如阿拉伯語），沒有水平滾動
  • 對於從上到下的語言（如日語），沒有垂直滾動
  • 除了需要二維佈局才能使用或理解的內容部分（如大型資料表）
 瞭解重排
1.4.11 非文字對比度 (AA) 在 2.1 中新增 使用者介面元件和圖形物件的最小顏色對比度比率為 3:1。 瞭解非文字對比度
1.4.12 文字間距 (AA) 在 2.1 中新增

應用以下樣式時，不會丟失內容或功能

  • 行高（行間距）至少為字型大小的 1.5 倍
  • 段落後的間距至少為字型大小的 2 倍
  • 字母間距（跟蹤）至少為字型大小的 0.12 倍
  • 字間距至少為字型大小的 0.16 倍
 瞭解文字間距
1.4.13 懸停或聚焦時的內容 (AA) 在 2.1 中新增

雖然其他內容可能會隨著懸停和鍵盤焦點而出現和消失，但此成功標準指定了必須滿足的三個條件

  • 可關閉（可以關閉/移除）
  • 可懸停（當指標懸停在其上時，其他內容不會消失）
  • 持久（其他內容不會在沒有使用者操作的情況下消失）
 瞭解懸停或聚焦時的內容

另請參閱