1. Web
  2. 無障礙
  3. 指南
  4. 理解 WCAG
  5. 可感知

可感知

本文提供了關於如何編寫符合 Web 內容無障礙指南（WCAG）2.0 和 2.1 中可感知原則所列成功標準的網頁內容的實用建議。可感知原則指出，使用者必須能夠以某種方式，使用他們的一種或多種感官來感知內容。

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

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

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

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

文字描述可能有效，或可訪問的資料表（請參閱HTML 表格輔助功能）。請參閱 W3C 關於反對 longdesc 的影像描述擴充套件 (longdesc)。
多媒體內容（即音訊或影片）至少應提供描述性標識，例如字幕或類似內容。

請參閱文字替代以瞭解靜態字幕選項，以及音訊文字稿、影片文字軌道以瞭解其他替代方案。
表單元素和按鈕等使用者介面控制元件應具有描述其用途的文字標籤。 按鈕很簡單——你應該確保按鈕文字描述了按鈕的功能（例如，<button>上傳影像</button>）。有關其他使用者介面控制元件的更多資訊，請參閱儘可能使用語義化使用者介面控制元件。
以對輔助技術不可見的方式實現裝飾性（非內容）影像、影片等，以免混淆使用者。

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

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

注意：另請參閱 WCAG 對指南 1.1 的描述：文字替代。

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

基於時間的多媒體是指具有持續時間的多媒體，例如音訊和影片。請注意，如果音訊/影片作為現有文字內容的替代，則無需提供另一個文字替代。

成功標準 如何符合標準 實用資源
1.2.1 為預錄製純音訊和純影片內容提供替代方案 (A) 應為預錄製純音訊媒體提供文字稿，併為預錄製純影片媒體（即無聲影片）提供文字稿或音訊描述。 請參閱音訊文字稿以獲取文字稿資訊。目前尚無音訊描述教程。
1.2.2 為網頁影片提供字幕 (A) 您應該為網頁上呈現的影片（例如 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) 對於任何正在播出的直播音訊內容，應提供描述性文字，例如您正在收聽的戲劇或音樂劇的劇本。這有助於聽力障礙者觀看者，他們無法聽到內容。 請參閱音訊文字稿以獲取文字稿資訊。

注意：另請參閱 WCAG 對指南 1.2 的描述：基於時間的多媒體：為基於時間的多媒體提供替代方案。

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

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

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

任何內容結構或內容之間建立的視覺關係也可以透過程式設計方式確定，或從文字描述中推斷出來。這主要適用於以下情況：

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

HTML：輔助功能的基礎 包含了大量相關資訊，但您應特別參考良好的語義、儘可能使用語義 UI 控制元件和文字替代。
1.3.2 有意義的內容順序 (A) 任何內容都應該易於確定一個合理、邏輯的閱讀順序，即使它的視覺呈現方式不尋常。應透過使用正確的語義元素（例如標題、段落）來明確順序，並使用 CSS 建立任何不尋常的佈局樣式，而不受標記的影響。 再次，請參閱HTML：輔助功能的基礎。
1.3.3 感知特性 (A)

操作控制元件或理解內容的說明不依賴單一感官。這可能導致與該感官相關的殘障人士或不支援該感官的裝置無法訪問。因此，例如：

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

注意：僅透過顏色傳達指令與此相關，但在不同的指南中有所涵蓋——1.4.1。
1.3.4 方向 (AA) 內容不將其檢視和操作限制為單一顯示方向，例如縱向或橫向，除非特定的顯示方向至關重要。

理解方向

1.3.5 識別輸入目的 (AA)

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

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

注意：另請參閱 WCAG 對指南 1.3 的描述：可適應：建立能夠以不同方式呈現而不會丟失資訊或結構的內容。

指南 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)
  • 從左到右的語言（如英語）或從右到左的語言（如阿拉伯語）不應出現水平滾動
  • 從上到下的語言（如日語）不應出現垂直滾動
  • 除非內容的一部分需要二維佈局才能使用或理解（例如大型資料表）
 理解迴流
1.4.11 非文字對比度 (AA) 使用者介面元件和圖形物件的最小顏色對比度應為 3:1。 理解非文字對比度
1.4.12 文字間距 (AA)

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

  • 行高（行間距）至少為字型大小的 1.5 倍
  • 段落後的間距至少為字型大小的 2 倍
  • 字距（字距調整）至少為字型大小的 0.12 倍
  • 詞間距至少為字型大小的 0.16 倍
 理解文字間距
1.4.13 懸停或聚焦時的內容 (AA)

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

  • 可關閉（可關閉/刪除）
  • 可懸停（當指標位於其上方時，附加內容不會消失）
  • 永續性（附加內容不會在沒有使用者操作的情況下消失）
 理解懸停或聚焦時的內容

注意：另請參閱 WCAG 對指南 1.4 的描述：可區分：讓使用者更容易看到和聽到內容，包括將前景與背景分開。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者於最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.