建立可存取的內容 (符合 WCAG 2.1)

由萬維網聯盟工作組起草的《網頁內容無障礙准則》(WCAG)2.1由一套技術獨立准則和成功准則組成，幫助殘疾人能夠訪問和使用網頁內容。🔗

作為介紹，該聯合組織提供了一系列章節和支援檔案：

• WCAG 2.1的新功能
• How to Meet WCAG 2.1 (如何達成 WCAG 2.1)
• Understanding WCAG 2.1 (了解 WCAG 2.1)
• Techniques for WCAG 2.1 (WCAG 2.1 的專用技術)
• WCAG檔案

此外，請參閱：

• 我們的WCAG 2.1快速指南。
• Adobe解決方案的協助工具符合性報表。
• 設定Rich Text Editor，以產生可存取的內容

該准則按三個一致性級別分級：A級（最低）、AA級和AAA級（最高）。 簡單地說，這些級別的定義如下：

• ​​A級：您的網站達到基本的最低協助功能等級。要達到此級別，將滿足所有A級成功標準。
• AA級： 這是您致力達到的最佳無障礙環境支援等級，其中您的網站達到基本無障礙環境支援等級，因此在大多數情況下，大部分使用者都可使用大部分的技術。要達到此級別，將滿足所有A級和A級成功標準。
• ​​AAA級：您的網站可達到非常高的協助功能。要達到此級別，將滿足所有A級、AA級和AAA級成功標準。

建立網站時，您必須決定要讓網站遵循的整體等級。

以下部分介紹了WCAG 2.1准則的層以及A級和A級符合性級別的相關成功標準。🔗

原則1:可感知

原則1:可感知——資訊和使用者介面元件必須以使用者可感知的方式呈現給使用者。

替代文字(1.1)

准則1.1備選案文：為任何非文字內容提供替代文字，以便將其變更為人們需要的其他形式，例如大型印刷、盲文、語音、符號或更簡單的語言。

非文字內容(1.1.1)

• 成功標準1.1.1
• A級
• 非文字內容：除下列情況外，提供給使用者的所有非文字內容都有提供同等目的的文字替代項目。

用途——非文字內容(1.1.1)

網頁上的資訊可以提供許多不同的非文字格式，例如圖片、視訊、動畫、圖表和圖形。 盲人或視力嚴重受損的人無法看到非文本內容，但他們可以通過螢幕閱讀器讀取文本內容或通過盲文顯示設備以觸覺形式顯示文本內容。 因此，提供圖形格式的內容替代文字，讓無法看見圖形內容的使用者可以存取內容所提供的相同版本資訊。

另一個有用的好處是，替代文字可讓非文字內容依搜尋引擎技術建立索引。

如何開會——非文字內容(1.1.1)

對於靜態圖形，基本要求是為圖形提供等效的文本替代。 這可在​替代文字​欄位中完成；例如，請參閱核心元件​Image。

AEM要求預設填入​替代文字​欄位。 如果影像純粹是裝飾性的，而且不需要替代文字，則可以檢查​Image is decortional​選項。

建立好的替代文字

非文字內容有多種形式，因此文字替代項目的價值取決於圖形在網頁中所扮演的角色。 以下是一些一般經驗法則：

• 文字替代項目應簡明扼要，但應清楚地擷取非文字內容所提供之基本資訊。
• 應避免過長的說明（超過100個字元）。 如果替代文字需要更詳細的資訊：
  • 在替代文字中提供簡短說明
  • 並在相同頁面的其他位置或個別網頁的文字中有較長的說明。 將影像設為連結，或將文字連結置於影像旁，以連結至此個別的說明。
• 替代文字不應複製相同頁面附近文字表單中提供的內容。 請記住，許多影像是頁面文字中已涵蓋的點的插圖，因此可能已有詳細的文字替代項目。
• 如果非文字內容是指向其他頁面或檔案的連結，而沒有其他文字構成相同連結的一部分，則影像的替代文字必須指出連結的目的地，而非描述影像。
• 如果非文字內容包含在按鈕元素中，且沒有文字組成相同按鈕的一部分，則影像的替代文字必須指出按鈕的功能，而非描述影像。
• 對於給予空白(null)替代文字的影像，完全可以接受，但前提是影像不需要替代文字（例如，它是純裝飾性圖形），或是頁面文字中已存在等同文字。

需要替代文字的特定非文字內容類型可能包括：

• 說明性像片：這些是人物、物件或地點的影像。 請務必考慮像片在頁面中的角色，並建議一般描述影像內容，因為輔助技術會宣佈元素類型（例如graphic或image）;它可提高替代文字說明中使用screenshot或illustration的清晰度，但這取決於內容。 一致性是一個重要因素，因此應針對整個製作團隊做出決策，並套用至使用者體驗。
• 圖示：這些是傳達特定資訊的小型圖片（圖形）。 必須在頁面和網站上一致使用這些變數。 頁面或網站上的圖示所有例項都應有相同的簡短文字替代項目，除非這麼做會造成相鄰文字的不必要複製。
• 圖表和圖形：這些通常代表數值資料。 因此，提供文字替代選擇的一個選項可能是包含圖表或圖形中主要趨勢的簡短摘要。 如有必要，也可使用​Advanced​影像屬性標籤中的​Description​欄位，在文字中提供更詳細的說明。 此外，您也可以在頁面或網站的其他地方以表格形式提供來源資料。
• 地圖、圖表、流程圖：對於提供空間資料的圖形（例如，支援描述對象或進程之間的關係），請確保關鍵消息以文本格式提供，並且該文本資訊位於每個相關資料點附近。 對於地圖，提供等同全文的地圖可能不切實際，但如果提供地圖以幫助人們找到特定位置的方式，則地圖影像的替代文字可以簡短地標示 X，然後在頁面其他地方的文字或透過 Image元件的「 Advanced 」 (進階) 索引標籤中的「 Description ​​」 (說明) 欄位，提供指向該位置的指示。
• 驗證碼：CAPTCHA是​完全自動化的公共圖靈測試，可告訴電腦和人類Apart。 它是用於網頁上的安全檢查，用於區分人類和惡意軟體，但會造成無障礙環境支援。 這些影像需要使用者描述他們所看到的內容，才能通過安全性測試。 為影像提供替代文字顯然不可能，因此您需要考慮其他非圖形解決方案。 W3C提供了一些建議，如：
  • 邏輯謎題
  • 使用音效輸出而非影像
  • 使用帳戶和垃圾訊息篩選的限制。
• 背景影像：這些功能是使用階層式樣式表(CSS)而非HTML來達成。 這表示無法指定替代文字值。 因此，背景影像不應提供重要的文字資訊——如果有的話，這項資訊也必須提供在頁面的文字中。 但是，當無法顯示影像時，必須顯示替代背景。

詳細資訊——非文字內容(1.1.1)

• 瞭解成功標準1.1.1
• 如何符合成功標準1.1.1
• W3C說明及驗證碼的替代方案

基於時間的介質(1.2)

准則1.2基於時間的媒體：為時間型媒體提供替代選擇。

這涉及​時間型​的網頁內容。 這涵蓋使用者可播放的內容（例如視訊、音訊和動畫內容），並可預先錄制或即時串流。

僅限音訊和僅限視訊（預錄）(1.2.1)

• 成功標準1.2.1
• A級
• 僅限音訊和僅限視訊（預錄）:對於預錄的純音訊和純視訊媒體，除非音訊或視訊是文字的替代媒體，並明確標示為：
  • 僅預錄音效：提供了用於基於時間的媒體的替代方案，該替代方案為預錄的僅音頻內容呈現等同資訊。
  • 僅預錄視訊：提供了用於基於時間的媒體的替代選擇或音頻軌道，該音頻軌道顯示用於預錄的僅視頻內容的等效資訊。

用途——僅限音訊和僅限視訊（預錄）(1.2.1)

視訊和音訊的協助功能問題可能會透過下列方式發生：

• 沒有配樂或配樂時，視覺受損者無法告知視訊或動畫中的情況；
• 聽障者，聾者，聽不到配樂；
• 聽得見配樂但不懂的人（例如，因為配樂是他們不懂的語言）。

使用不支援以特定媒體格式（例如Adobe Flash）播放內容的瀏覽器或裝置的使用者，也可能無法使用視訊或音訊。

以不同格式提供此資訊，例如文字（或無音訊的視訊音訊），可讓無法存取原始內容的使用者存取。

如何開會——僅限音訊和僅限視訊（預錄）(1.2.1)

• 如果內容是預先錄制的音訊，但沒有視訊（例如播客）:
  • 在內容之前或之後，提供連結至音訊內容的文字記錄。 成績單應是HTML頁面，其文字等同於所有口語和重要的非口語內容，另外還包括說話者的指示、設定的描述、聲音表達以及任何其他重要音效的描述。
• 如果內容是動畫或預錄的視訊，且沒有音效：
  • 在內容之前或之後，提供視訊所提供資訊的等同文字說明連結
  • 或是常用音訊格式（例如MP3）的等效音訊描述。

將多媒體插入AEM網頁類似於插入影像。 然而，由於多媒體內容遠非靜態影像，因此有多種不同的設定和選項來控制多媒體的播放方式。

詳細資訊——僅限音訊和僅限視訊（預錄）(1.2.1)

• 瞭解成功標準1.2.1
• 如何符合成功標準1.2.1

標題（預錄）(1.2.2)

• 成功標準1.2.2
• A級
• 標題（預錄）:除了媒體是文字的替代媒體，而且已清楚標示為同步媒體外，所有預先錄制的音訊內容都會提供標題。

目的——標題（預錄）(1.2.2)

聾人或聽障者將無法或很難存取音訊內容。 標題是語音和非語音音訊的文字等效，在視訊中的適當時間在螢幕上顯示。 它們讓聽不到音效的人，瞭解現在的情況。

如何符合——標題（預先錄制）(1.2.2)

標題可以是：

• 開啟：播放視訊時一律顯示
• 已關閉：字幕可由使用者開啟或關閉

盡可能使用隱藏字幕，因為這可讓使用者選擇是否檢視字幕。

對於隱藏字幕，您需要在視訊檔案旁建立並提供適當格式（例如SMIL）的同步化字幕檔案(如如何做到的詳細資訊不在本指南的範圍之內，但我們提供了更多資訊——標題（預錄）(1.2.2)下的教學課程連結。 請確定您提供附註或啟用視訊播放器中的標題功能，讓使用者知道標題可用於視訊。

如果您必須使用開放標題，請將文字內嵌至視訊軌。 這可以使用影片編輯應用程式來實現，讓標題可以覆蓋在影片上。

詳細資訊——標題（預先錄制）(1.2.2)

• 瞭解成功標準1.2.2
• 如何符合成功標準1.2.2

音訊描述或替代媒體（預錄）(1.2.3)

• 成功標準1.2.3
• A級
• 音訊描述或媒體替代（預錄）:為同步媒體提供基於時間的媒體或預錄視頻內容的音頻描述的替代物，除非媒體是文本的媒體替代物，並且被明確標示為這樣。

用途——音訊說明或媒體替代（預錄）(1.2.3)

如果視障或視障人士僅以視覺化方式提供視訊或動畫中的資訊，或者配樂無法提供足夠的資訊，以視覺化方式瞭解發生的情況，將會遇到無障礙環境支援。

How to Meet - Audio Description or Media Alternation(Prerecorded)(1.2.3)

為滿足此成功標準，可採用兩種方法。 兩者皆可接受：

1. 加入視訊內容的其他音訊描述。 這可以通過以下三種方式之一實現：
   • 在現有對話方塊的暫停期間，提供場景中未呈現為現有音軌一部分的變更資訊；
   • 提供新的、額外的可選音軌，其中包含原始音軌，但也包含場景變更的額外音訊資訊。
     • 這可讓使用者在現有的音軌（不包含音訊描述）和新的音軌（​包含音訊描述）之間切換。**
     • 如此可避免中斷不需要其他說明的使用者。
   • 建立視訊內容的第二版本，以允許擴充音訊說明。 這可借由在適當的點暫停音訊和視訊，減少在現有對話方塊之間的間隙中提供詳細音訊描述的相關困難。 因此，在動作再次開始之前，可以提供更長的音訊描述。 如上例所示，這最好是選用的額外音軌，以防止不需要額外說明的使用者中斷。
2. 提供與視訊或動畫的音訊和視覺元素相當的適當文字記錄。 這應當包括，在適當情況下，指示說話者、設定說明、任何以視覺方式呈現的事件或資訊，以及聲音表達。 視其長度而定，您可以將成績單放在視訊或動畫的相同頁面，或放在個別頁面上；如果您選擇後一個選項，請提供視訊或動畫旁的轉錄本連結。

如何建立音訊描述視訊的確切詳細資訊，不在本指南中。 建立視訊和音訊描述可能很耗時，但其他Adobe產品可協助您完成這些工作。

詳細資訊——音訊說明或媒體替代（預錄）(1.2.3)

• 瞭解成功標準1.2.3
• 如何符合成功標準1.2.3

標題(Live)(1.2.4)

• 成功標準1.2.4
• AA級
• 標題（即時）:同步化媒體中所有即時音訊內容都提供標題。

用途——標題(Live)(1.2.4)

此成功標準與標題（預錄）相同，因為它可解決聾人或聽障人士所經歷的無障礙環境障礙，但此成功標準涉及即時簡報，例如網路廣播。

How to Meet - Captions(Live)(1.2.4)

請遵循上述標題（預先錄制）的指引。 但是，由於媒體的即時性質，必須盡快建立字幕布建，以因應目前的情況。 因此，您應考慮使用即時字幕或語音轉文字工具。

詳細說明超出本檔案的範圍，但下列資源可提供有用資訊：

• WebAIM:即時字幕

• AccessComputing專案（華盛頓大學）:是否可以使用語音識別自動產生字幕？

詳細資訊——標題(Live)(1.2.4)

• 瞭解成功標準1.2.4
• 如何符合成功標準1.2.4

音訊說明（預錄）(1.2.5)

• 成功標準1.2.5
• AA級
• 音訊說明（預錄）:提供同步媒體中所有預先錄制的視訊內容的音訊描述。

用途——音訊說明（預錄）(1.2.5)

此成功標準與音訊描述或媒體替代項目（預錄）相同，但作者必須提供更詳細的音訊描述，以符合等級AA。

How to Meet - Audio Description(Prerecorded)(1.2.5)

遵循音訊說明或媒體替代項目（預錄）的指引。

詳細資訊——音訊說明（預錄）(1.2.5)

• 瞭解成功標準1.2.5
• 如何符合成功標準1.2.5

適應性(1.3)

准則1.3適應性：建立可以以不同方式呈現的內容（例如更簡單的版面），而不會遺失資訊或結構。

本准則涵蓋支援以下人員的必要要求：

• 可能無法存取作者在預設內容呈現中所呈現的資訊（例如，多欄版面或大量使用色彩和／或影像的頁面）。

• 可能會使用純音效，或是其他視覺顯示，例如大型文字或高對比度。

資訊與關係(1.3.1)

• 成功標準1.3.1
• A級
• 資訊與關係：通過表現傳遞的資訊、結構和關係可以通過寫程式方式確定，或在文本中可用。

用途——資訊與關係(1.3.1)

許多殘障人士使用的輔助技術都依賴結構資訊，以有效顯示或瞭解​內容。​此結構資訊可以採用頁標題、表行和列標題以及清單類型的形式。 例如，螢幕閱讀程式可讓使用者從標題到標題瀏覽頁面。 但是，當頁面內容只看起來是透過視覺樣式而非基礎HTML來呈現結構時，輔助技術就無法使用結構資訊，限制了其支援更輕鬆瀏覽的能力。

此成功標準的存在是為了確保此類結構資訊是透過HTML或其他編碼技術以程式設計方式提供，讓瀏覽器和輔助技術可存取並運用這些資訊。

如何認識——資訊與關係(1.3.1)

AEM可讓您使用適當的HTML元素，輕鬆建構具有語義意義的網頁內容。 在RTE（文本元件）中開啟頁面內容，然後使用​Paraformat​菜單（段落符號）指定適當的結構元素（例如段落、標題等）。

您可以使用下列適用的元素，確保您的網頁已獲得適當的結構：

• 標題： 只要您已啟用RTE的協助功能，AEM就會提供3個頁面標題層級。您可以使用這些項目來識別內容的區段和子區段。標題1是標題的最高級別，標題3是最低級別。系統管理員可以配置系統以允許使用更多標題級別。

• 清單:您可以使用HTML來指定三種不同的清單類型：

  • 元素 <ul> 用於無序 列 (項目符號) 清單。使用元素來識別個別清 <li> 單項目。在RTE中，使用「項目符號列 表」表徵圖 。
  • <ol>元素用於​編號​清單。 使用<li>元素來識別個別清單項目。 在RTE中，使用​Numbered List​表徵圖。

  如果要將現有內容變更為特定的清單類型，請反白標示適當的文字並選取適當的清單類型。 如先前顯示如何輸入段落文字的範例，適當的清單元素會自動新增至您的HTML。

  在全螢幕模式中，會顯示個別 的「項目符號清單 」和「 ​​編號清單」圖示。當未處於全螢幕模式時，單一「清單」圖示後面會提供這兩個 選項 。

• 表格:必須使用HTML表格元素來識別資料表格：

  • 一個<table>元素
  • a <tr>元素，用於表格的每一列
  • 每個列和列標題的<th>元素
  • 每個資料儲存格的<td>元素

  此外，可存取的表格還使用下列元素和屬性：

  • <caption>元素用於為表格提供可見標題。 字幕預設會出現在表格的正中，但可使用CSS適當定位。 標題以寫程式方式與表關聯，因此它是提供內容介紹的有用方法。
  • <summary>元素提供有視力的使用者可看到的摘要，協助無視力的使用者更輕鬆地瞭解表格中顯示的資訊。 在使用複雜或非常規表格版面時（此屬性不會顯示在瀏覽器中，只會讀出至輔助技術），此功能特別有用。
  • <th>元素的scope屬性用於指示單元格是代表特定行的標題，還是代表特定列的標題。 類似的方法是在複雜表格中使用標題和id屬性，其中資料儲存格可與一或多個標題相關聯。
  注意

  預設情況下，這些元素和屬性不直接可用，但系統管理員可以在​表屬性​對話框中添加對這些值的支援（請參閱添加對其他HTML元素和屬性的支援）。

  要開啟​表​對話框，您可以在其中選擇​表屬性​頁籤：

  • 定義適當的​標題。
  • 理想情況下，請移除「寬 度」、「邊框高度」、「邊框高度」、「邊框高度」、「單元格間距」、「單元格間距 」、「單元格​​​​​​​間距」的預設值。因為這些屬性可以在全局樣式表中設定。

  然後，可以使用​單元格屬性​來選擇單元格是資料單元格還是標題單元格：

• 重點:使用或 <strong> 元 <em> 素來指出強調。請勿使用標題來反白標示段落中的文字。

  • 反白標示您要強調的文字；

  • 按一下「屬性」面板中顯示的 B 表徵圖( <strong>for)或「屬性」面板中顯示 的「I 」表徵圖(for <em>)(請確定已選 ​​中HTML)。

    注意

    標準AEM安裝中的RTE已設定為使用：

    • <b> 的 <strong>
    • <i> 的 <em>

    它們實際上相同，但<strong>和<em>更好，因為它們在語義上是正確的html。 您的開發團隊可以設定RTE在開發專案例項時使用<strong>和<em>（而非<b>和<i>）。

• 複雜的資料表:在某些情況下，如果有具有兩個或多個標題級別的複雜表，則基本表屬性可能不足以提供所有必要的結構資訊。對於這些類型的複雜表格，需要使用header和 id屬性在標題及其相關儲存格之間建 立直 接 關係。

  注意

  id屬性不適用於現成可用的安裝。 它可以通過配置HTML規則和RTE中的串列化函式來啟用。

  例如，在下表的標題和ID中，會對輔助技術使用者進行程式化關聯。

    <table>
      <tr>
        <th rowspan="2" id="h">Homework</th>
        <th colspan="3" id="e">Exams</th>
        <th colspan="3" id="p">Projects</th>
      </tr>
      <tr>
        <th id="e1" headers="e">1</th>
        <th id="e2" headers="e">2</th>
        <th id="ef" headers="e">Final</th>
        <th id="p1" headers="p">1</th>
        <th id="p2" headers="p">2</th>
        <th id="pf" headers="p">Final</th>
      </tr>
      <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
      </tr>
    </table>
  

  若要在AEM中達成此目的，您必須使用來源編輯模式直接新增標籤。

  注意

  標準安裝中不會立即使用此功能。 它需要配置RTE、HTML規則和串列化器。

詳細資訊——資訊與關係(1.3.1)

• 瞭解成功標準1.3.1
• 如何符合成功標準1.3.1

有意義的序列(1.3.2)

• 成功標準1.3.2
• A級
• 有意義的序列：當內容呈現的序列影響其含義時，可以寫程式地確定正確的讀取序列。

目的——有意義的序列(1.3.2)

本「成功准則」的目的是讓使用者代理提供內容的替代呈現方式，同時保留理解其含義所需的閱讀順序。 必須能夠以程式設計方式確定至少一個有意義的內容序列。 當輔助技術以錯誤的順序讀取內容，或套用替代樣式表或其他格式變更時，不符合此成功准則的內容可能會混淆或誤導使用者。

如何符合——有意義的序列(1.3.2)

遵循如何符合成功准則1.3.2下的准則。

詳細資訊——有意義的序列(1.3.2)

• 瞭解成功標準1.3.2
• 如何符合成功標準1.3.2

感官特性(1.3.3)

• 成功標準1.3.3
• A級
• 感官特徵：提供的理解和操作內容的指示不僅依賴於部件的感官特性，如形狀、大小、視覺位置、方向或聲音。

目的——感官特性(1.3.3)

設計人員通常會專注在視覺設計功能上，例如顏色、形狀、文字樣式，或內容在呈現資訊時的絕對或相對位置。 這些設計技術在傳遞資訊方面非常強大（並且可以改善有認知無障礙需求的有視力的用戶的整體無障礙環境），但是盲人或視覺障礙的人可能無法訪問需要視覺識別屬性（如位置、顏色或形狀）的資訊。

同樣地，如果需要區分不同聲音（例如男性或女性口語內容）的資訊沒有反映在音頻內容的任何文本替代內容中，則對聽力有障礙的人會造成無障礙。

如何滿足——感官特性(1.3.3)

請確定任何依賴頁面內容視覺特性的資訊，也會以替代格式顯示。

• 不要依賴視覺位置提供資訊。 例如，如果您想將使用者引薦至頁面右側的功能表，以取得詳細資訊，請勿參考右側的​功能表；請改為命名功能表（例如透過標題），並在文字中參照該名稱。
• 切勿依賴文字樣式（例如粗體或斜體文字）來傳達資訊。

更多資訊——感官特性(1.3.3)

• 瞭解成功標準1.3.3
• 如何符合成功標準1.3.3

可區分(1.4)

准則1.4可區分：讓使用者更輕鬆地檢視和聽取內容，包括將前景與背景分開。

色彩的使用(1.4.1)

• 成功標準1.4.1
• A級
• 色彩的使用：顏色不是傳送資訊、指示動作、提示響應或區分視覺元素的唯一視覺手段。

用途——色彩的使用(1.4.1)

顏色是增強網頁美感的一種明顯有效的方式，在資訊傳遞方面也有很大的幫助。 但是，從失明到彩色視覺缺陷，都存在著一系列的視覺缺陷，這意味著有些人無法區分某些顏色。 這使得色彩編碼成為提供資訊的不可靠方式。

例如，有紅綠色視覺缺陷的人，將無法區分綠色和紅色。 他們可能會將這兩種顏色視為第三種顏色（例如，棕色），在這種情況下，他們將無法區分紅色、綠色和棕色。

此外，使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白列印成品的使用者無法察覺色彩。

進一步考慮的是介面元素的​選擇的​狀態（例如，制表符、切換按鈕等），它需要以除僅用顏色和超出視覺表現之外的其他方式傳達。 對於這些元素，額外使用圖樣、形狀和程式化資訊對於建立完全包容且不依賴特定意義的使用者體驗非常有用。

How to Meet - Use of Color(1.4.1)

無論使用何種顏色來傳達資訊，請確定這些資訊是可用的，而不需要查看顏色。

例如，請確定文字中也明確提供由顏色提供的資訊。

如果使用顏色做為提供資訊的提示，您應提供額外的視覺提示，例如變更樣式（例如粗體、斜體）或字型。 這可協助視力低下或色彩視覺缺乏者識別資訊。 但是，它不能完全依賴，因為它不會幫助根本看不到頁面的人。 因此，（有時）提供隱藏文字或使用程式化解決方案(例如 Accessible Rich Internet Applications(ARIA)Web標準套件)，將此資訊傳達給無視覺的使用者是很有用的。

更多資訊——色彩的使用(1.4.1)

• 瞭解成功標準1.4.1
• 如何符合成功標準1.4.1

音訊控制(1.4.2)

• 成功標準1.4.2
• A級
• 音訊控制：如果網頁上的任何音訊自動播放超過3秒，則可使用暫停或停止音訊的機制，或使用獨立於整體系統音量等級的機制來控制音訊音量。

用途——音頻控制(1.4.2)

使用螢幕閱讀軟體的使用者若同時播放其他音訊，就很難聽到語音輸出。 當螢幕閱讀器的語音輸出是以軟體為基礎（如今大多數），並透過與音效相同的音量控制來控制時，這一困難就會加劇。 此外，一些認知障礙者和神經發散者可能具有聽覺敏感性。 這些人會發現，無法變更音訊內容的音量等級會造成相當的中斷。

因此，使用者必須能夠關閉背景音效。

如何滿足——音頻控制(1.4.2)

遵循如何符合成功准則1.4.2下的准則。

詳細資訊——音訊控制(1.4.2)

• 瞭解成功標準1.4.2
• 如何符合成功標準1.4.2

對比度（最低）(1.4.3)

• 成功標準1.4.3

• AA級

• 對比度（最小值）:文字和影像的視覺呈現至少有4.5:1的對比率，但下列除外：

  • 大型文字：大型文字和大型文字影像的對比度至少為3:1。
  • 附帶：屬於非作用中使用者介面元件的文字或影像，即任何人不可見的純裝飾，或是包含重要其他視覺內容之圖片的一部分，則無對比需求。
  • Logotypes:屬於標誌或品牌名稱的文字沒有最低對比要求。
  注意

  如需詳細資訊，請參閱瞭解非文字對比，協助確保內容作者瞭解非文字元素（包括圖示、介面元素等）的其他需求。

用途——對比（最低）(1.4.3)

某些視覺障礙的人可能無法區分某些低對比色彩對。 如果以下情況，這些人可能會遇到無障礙環境支援問題：

• 文字與背景顏色對比較差。
• 文本（如連結文本和非連結文本）的顏色編碼在區分資訊方面具有重要意義。

如何符合——對比（最低）(1.4.3)

請確定文字與其背景對比充分。 對比率取決於相關文本的大小和樣式：

• 對於大小小於18點（或14點粗體）的文字，文字的文字／影像與背景的對比率應至少為4.5:1。
• 對於大小至少為18點（或14點粗體）的文字，對比率應至少為3:1。
• 如果對背景進行圖案化，則任何文字周圍的背景都應該著色，以保持4.5:1或3:1比例。

要檢查對比度，請使用顏色對比工具，如Paciello Group Color Contrast Analyser或WebAIM顏色對比檢查器。 這些工具可讓您檢查顏色對，並報告任何對比問題。

或者，如果您不太在意指定頁面的外觀，可以選擇不指定背景和前景文字顏色。 不需要進行對比檢查，因為使用者的瀏覽器會決定文字和背景的顏色。

如果無法達到建議的對比度等級，您將需要提供頁面的替代等同版本（沒有顏色對比問題）的連結，或讓使用者根據自己的需求調整頁面色彩配置的對比度。

詳細資訊——對比度（最低）(1.4.3)

• 瞭解成功標準1.4.3
• 如何符合成功標準1.4.3

調整文字大小(1.4.4)

• 成功標準1.4.4
• A級
• 調整文字大小：除了文字的標題和影像外，不需使用輔助技術就可調整文字大小，最高200%不會遺失內容或功能。

用途——調整文字大小(1.4.4)

本成功准則的目的是確保以視覺化方式呈現文字，包括以文字為基礎的控制項(已顯示的文字字元，以便在與仍以ASCII↑[a1/]等資料格式顯示的文字字元可成功縮放，讓視覺障礙輕微的人直接讀取，而不需使用輔助技術（例如螢幕放大鏡）。 []使用者可從縮放網頁上所有內容中獲益，但文字最重要。

How to Meet - Resize Text(1.4.4)

除了遵循如何符合成功准則1.4.4下的准則，您還可鼓勵內容作者在其頁面設計和字型大小（例如，互動式網頁設計）中使用流暢、有彈性的寬度和高度，讓讀者能夠調整文字大小。

詳細資訊——調整文字大小(1.4.4)

• 瞭解成功標準1.4.4
• 如何符合成功標準1.4.4

文字影像(1.4.5)

• 成功標準1.4.5
• AA級
• 文字影像：如果所使用的技術可以實現視覺呈現，則除了下列項目外，文字會用來傳達資訊，而非文字影像：
  • 可自訂：文本影像可以根據用戶的需求進行可視化定製；
  • 基本：對所傳達的資訊而言，文本的具體呈現至關重要。

用途——文字影像(1.4.5)

當偏好特定文字樣式時，通常會使用文字影像；例如，logotype或如果文字是從其他來源產生（例如，掃描紙張檔案）。 但是，與使用HTML呈現的文字和使用CSS建立樣式的文字相比，文字的影像缺乏彈性來變更尺寸或外觀，這對於有視覺障礙或閱讀困難的人而言可能是必要的。

How to Meet - Images of Text(1.4.5)

如果必須使用文字影像，請使用CSS將文字影像取代為HTML中的等同文字，讓文字以可自訂的方式使用。 有關如何實現此目的的示例，請參閱C30:使用CSS將文字取代為文字影像，並提供使用者介面控制項來切換。

詳細資訊——文字影像(1.4.5)

• 瞭解成功標準1.4.5
• 如何符合成功標準1.4.5

原則2:可操作

原則2:可操作——用戶介面元件和導航必須可操作。

可存取鍵盤(2.1)

准則2.1可存取鍵盤：從鍵盤使用所有功能。

這就是為了確保使用者可以使用鍵盤存取所有功能。

鍵盤(2.1.1)

• 成功標準2.1.1
• A級
• 鍵盤：所述內容的所有功能可通過鍵盤介面操作而不需要個別按鍵的特定定時，除非所述基礎功能需要取決於用戶移動的路徑而不是僅僅取決於端點的輸入。

用途——鍵盤(2.1.1)

本「成功准則」的目的在於確保內容可透過鍵盤或鍵盤介面（以便使用替代鍵盤）運作。 當內容可透過鍵盤或替代鍵盤操作時，無視力的人（無法使用例如需要眼睛協調的老鼠等裝置），以及必須使用替代鍵盤或輸入裝置作為鍵盤模擬器的人，都可進行操作。 鍵盤模擬器包括語音輸入軟體、吹吸式軟體、螢幕上鍵盤、掃描軟體以及各種輔助技術和替代鍵盤。 視力低的個人也可能無法追蹤指標，如果能夠從鍵盤控制，就會發現軟體的使用更輕鬆（或僅限可能）。

如何開會——鍵盤(2.1.1)

遵循如何符合成功准則2.1.1下的准則。

更多資訊——鍵盤(2.1.1)

• 瞭解成功標準2.1.1
• 如何符合成功標準2.1.1

無鍵盤陷印(2.1.2)

• 成功標準2.1.2
• A級
• 無鍵盤陷阱：如果鍵盤焦點可以使用鍵盤介面移動到頁面的元件，則焦點可以僅使用鍵盤介面從該元件移開，並且，如果它需要的不是未修改的箭頭鍵或Tab鍵或其他標準退出方法，則建議用戶使用將焦點移開的方法。

用途——無鍵盤陷印(2.1.2)

本「成功准則」的目的是確保內容不會在網頁內容的子區段中以​trap​鍵盤焦點。 當頁面內結合多種格式並使用外掛程式或內嵌應用程式來轉換時，這是常見的問題。

有時網頁的功能會將焦點限制在內容的子部分（例如，模式對話）。 在這種情況下，您應提供一種方法，讓使用者能夠退出該內容的子部分（例如，ESC鍵關閉模態對話框，或「關閉」按鈕關閉模態對話框）。

如何開會——無鍵盤陷阱(2.1.2)

遵循如何符合成功准則2.1.2下的准則。

詳細資訊——無鍵盤陷印(2.1.2)

• 瞭解成功標準2.1.2
• 如何符合成功標準2.1.2

足夠的時間(2.2)

准則2.2足夠時間：為使用者提供足夠的時間閱讀和使用內容。

這就是為了確保使用者有足夠的時間閱讀並採取行動。

可調整時間(2.2.1)

• 成功標準2.2.1
• A級
• 鍵盤：為使用者提供足夠的時間閱讀和使用內容。

用途——可調整時間(2.2.1)

本「成功准則」的目的在於確保為殘障人士提供適當的時間，讓他們盡可能與網頁內容互動。 失明、低視力、靈活度障礙和認知限制等殘障人士可能需要更多時間閱讀內容或執行功能，例如填寫線上表格。 如果Web函式與時間相關，某些用戶將難以在時間限制出現之前執行所需的操作。 這可能會使他們無法存取服務。 設計不依賴時間的功能將幫助殘障人士成功完成這些功能。 提供選項來停用時限、自訂時限長度或在時間限制發生之前請求更多時間，可協助那些需要超過預期時間的使用者順利完成工作。 這些選項會依對使用者最有幫助的順序列出。 停用時間限制比自訂時間限制長度好，這比在時間限制出現之前請求更多時間好。

如何符合——可調整時間(2.2.1)

遵循如何符合成功准則2.2.1下的准則。

詳細資訊——可調整計時(2.2.1)

• 瞭解成功標準2.2.1
• 如何符合成功標準2.2.1

暫停、停止、隱藏(2.2.2)

• 成功標準2.2.2
• A級
• 暫停、停止、隱藏：對於移動、閃爍、捲動或自動更新資訊，以下是正確的：
  • 移動、閃爍、滾動：對於(a)自動啟動、(b)持續超過五秒，且©與其他內容並行顯示的任何移動、閃爍或捲動資訊，使用者有暫停、停止或隱藏的機制，除非動作、閃爍或捲動是活動不可或缺的一部分；
  • 自動更新：對於任何(a)自動啟動且(b)與其他內容並行顯示的自動更新資訊，使用者有暫停、停止或隱藏更新或控制更新頻率的機制，除非自動更新是其必要活動的一部分。

注意事項有：

1. 有關閃爍或閃爍內容的要求，請參閱「Do not Design Content in a Way that is Know to Cause Countude(2.3)（以已知導致癲癇的方式設計內容）」。
2. 由於任何不符合此成功標準的內容都可能干擾使用者使用整個頁面的能力，因此網頁上的所有內容（無論是否用於符合其他成功標準）都必須符合此成功標準。 請參閱符合性要求5:非干擾。
3. 由軟體定期更新或流向用戶代理的內容不需要保留或呈現在暫停開始和恢復演示之間生成或接收的資訊，因為這在技術上可能不可能，在許多情況下可能會誤導。
4. 如果在預先載入階段或類似情況中發生的動畫，對於所有使用者而言，在該階段無法進行互動，且若未指出進度，可能會混淆使用者，或導致使用者認為內容已凍結或中斷，則視為必要。

用途——暫停、停止、隱藏(2.2.2)

某些使用者可能會發現移動的內容會分散注意力，甚至是讓身體很痛苦，因此很難將注意力集中在頁面的其他部分。 此外，對於無法跟上動態文字腳步的人而言，這些內容可能很難閱讀。

如何開會——暫停、停止、隱藏(2.2.2)

根據內容的性質，在建立包含移動、閃爍或閃爍內容的網頁時，您可以套用下列一或多個建議：

• 提供暫停捲動內容的方式，讓使用者有足夠的時間閱讀內容。 例如，新聞提示器、自動更新的文字，以及自動前進的影像轉盤。
• 請確定眨眼的內容在5秒後停止閃爍。
• 使用適當的技術來顯示可由瀏覽器停用的移動或閃爍內容。 例如，圖形交換格式(GIF)或可移植網路圖形(APNG)動畫檔案。
• 在網頁上提供表單控制項，讓使用者停用頁面上所有移動或閃爍的內容。
• 如果無法使用上述任一功能，請提供包含所有內容的頁面連結，但不會移動或閃爍。

詳細資訊——暫停、停止、隱藏(2.2.2)

• 瞭解成功標準2.2.2
• 如何符合成功標準2.2.2

癲癇與生理反應(2.3)

准則2.3緝獲：切勿以已知會導致癲癇或身體反應的方式設計內容。

3個閃爍或低於閾值(2.3.1)

• 成功標準2.3.1
• A級
• 閃爍三次或低於閾值：網頁不包含任何在任一秒內閃爍超過三次的內容，或flash低於一般flash和紅色flash臨界值。

用途——三個閃爍或低於閾值(2.3.1)

在某些情況下，閃爍的內容可能導致感光性癲癇。 此成功標準可讓這些使用者存取並體驗所有內容，而不需擔心內容閃爍。

如何符合——三個閃爍或低於閾值(2.3.1)

您應採取步驟，以確保套用下列技術：

• 確保元件在一秒內不會閃爍超過三次；
• 如果無法符合上述條件，則在螢幕上以像素顯示​小安全區​內閃爍的內容。 此區域是使用複數公式計算的，該公式在G176中涵蓋：保持閃爍區域足夠小，因此只有在必要閃爍內容​絕對​時才應採用此技術。

詳細資訊——三個閃爍或低於臨界值(2.3.1)

• 瞭解成功標準2.3.1
• 如何符合成功標準2.3.1

可導航(2.4)

准則2.4可導航：提供協助使用者導覽、尋找內容及判斷其所在位置的方式。

這可確保內容簡單易用，讓使用者輕鬆導覽。

旁路塊(2.4.1)

• 成功標準2.4.1
• A級
• 略過區塊：一種機制可略過多個網頁上重複的內容區塊。

用途——旁路塊(2.4.1)

本「成功准則」的目的，在於讓依序導覽內容的使用者更直接存取網頁的主要內容。 網頁和應用程式通常會有內容出現在其他頁面或螢幕上。 重複的內容區塊範例包括但不限於導覽連結、頁首圖形、選單和廣告影格。 就本規定而言，個別字詞、片語或單一連結等重複的小段不視為區塊。

如何符合——旁路塊(2.4.1)

遵循如何符合成功准則2.4.1下的准則。

詳細資訊——略過區塊(2.4.1)

• 瞭解成功標準2.4.1
• 如何符合成功標準2.4.1

標題為(2.4.2)的頁面

• 成功標準2.4.2
• A級
• 標題為：網頁標題可說明主題或目的。

用途——標題為(2.4.2)的頁面

此成功標準可協助每個人（不論是否有任何特定的損害）快速識別網頁內容，而不需完整閱讀網頁。 當在瀏覽器標籤中開啟多個網頁時，這特別有用，因為頁面標題會顯示在標籤中，因此可快速找到。

如何開會——標題為(2.4.2)的頁面

在AEM中建立新的HTML頁面時，您可以指定頁面標題。 請確定標題已充分說明頁面的內容和用途，尤其是任何獨特的方面，讓訪客可以快速識別內容是否與其需求實際相關。

編輯頁面時，您也可以編輯頁面標題，頁面資訊——屬 性可​存取。

更多資訊——標題為(2.4.2)的頁面

• 瞭解成功標準2.4.2
• 如何符合成功標準2.4.2

焦點順序(2.4.3)

• 成功標準2.4.3
• A級
• 焦點順序：如果網頁可依序導覽，而導覽順序會影響意義或操作，則可聚焦元件會依保留意義和操作性的順序接收焦點。

用途——焦點順序(2.4.3)

本「成功准則」的目的是確保當使用者依序瀏覽內容時，會以符合內容含義的順序遇到資訊，並可從鍵盤操作。 這可讓使用者對內容建立一致的心理模型，以減少混淆。 內容中可能會有不同順序反映邏輯關係。 例如，在由多個欄位和／或步驟組成的線上表單中移動元件，會反映內容中的邏輯關係。

如何滿足——焦點順序(2.4.3)

遵循如何符合成功標準2.4.3下的准則。

詳細資訊——焦點順序(2.4.3)

• 瞭解成功標準2.4.3
• 如何符合成功標準2.4.3

連結用途（在內容中）(2.4.4)

• 成功標準2.4.4
• A級
• 連結用途（在內容中）:每個連結的目的可以單獨地從連結文本確定，也可以從連結文本連同其寫程式確定的連結上下文一起確定，除非連結的目的一般對用戶來說是模糊的。

用途——連結用途（在內容中）(2.4.4)

對所有使用者而言，無論是否受到損害，透過適當的連結文字清楚指出連結的方向至關重要。 這可協助使用者決定是否實際要追蹤連結。 對有目光的使用者而言，當頁面上有數個連結時（尤其是頁面文字較多時），有意義的連結文字非常有用，因為有意義的連結文字可更清楚地指出目標頁面的功能。 某些輔助技術的使用者可以在單一頁面上產生所有連結的清單，如果連結文字既獨特又具資訊性，就可以更輕鬆地瞭解不符合上下文的連結文字。 然而，如果連結無法提供足夠的資訊，以準確描述連結將帶往何處，則有認知障礙的有視者可能會感到困惑。

How to Meet - Link Purse(In Context)(2.4.4)

首先，請確定連結的目的在連結的文字中已清楚說明。

• 錯誤示例：
  • 文字：如需2010年秋季晚間課程的詳細資訊，請按一下這裡。
  • 原因：它沒有明確，明確地指出其目的地。
• 好例子：
  • 文字：2010年秋季夜校課程——詳細內容。
  • 原因：只要稍微調整文字和連結元素的位置，連結文字就可以改善：

連結應在各頁面上使用一致的措辭，尤其是導覽列。 例如，如果某個頁面上的特定頁面的連結名為​Publications，請在其他頁面上使用該文字以確保一致性。

在編寫時，使用標題屬性會有一些問題，以確保頁面上顯示的類似連結提供有關目的地的唯一資訊（例如，「閱讀更多」通常會指一系列不同的目的地）:

• 標題屬性中包含的文字通常僅供滑鼠使用者使用，做為工具提示快顯視窗，而且無法使用鍵盤或行動使用者一致地存取。
• 螢幕閱讀程式可讀出標題屬性，但此功能可能未依預設啟用；因此，使用者可能不知道標題屬性存在。
• 很難改變標題文本的外觀，這意味著有些人可能很難或不可能閱讀。

因此，雖然title屬性可用來提供連結的額外內容，但請注意其限制，請勿將它當做適當連結文字的替代項目。

當連結由影像組成時，請確定影像的替代文字說明連結的目的地。 例如，如果書架的影像設定為連結至某人的出版品，則替代文字應為​John Smith』的出版物，而非​Bookshelf。

或者，如果連結錨點除了影像元素以外還包含說明連結用途的文字（因此文字會出現在影像旁邊），請為影像使用空白alt屬性：

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

雖然建議提供識別連結目的的連結文字，而不需要額外的內容，但是可以認識到，這並非總是可能。 無上下文連結可用於下列情況，其HTML範例可在如何符合成功准則2.4.4中找到。

• 其中連結文字是緊密相關連結清單的一部分，而包含連結的清單項目則提供足夠的內容。
• 從​前面的（非下）段文本中可清楚識別連結目的的。
• 如果連結包含在資料表中，因此可以從關聯的標題中清楚地確定目的。
• 其中，連結清單包含在一組標題中，標題本身提供了合適的上下文。
• 其中，連結清單包含在巢狀連結中，而巢狀連結上方的父清單項目則提供適當的內容。

在某些情況下，如果頁面上有數個連結（其中每個連結以複雜但必要的詳細資訊提供連結的方向），則可以提供網頁的替代版本，以顯示完全相同的內容，但連結文字未如此詳細。

或者，可以使用指令碼，使得在連結本身內提供最少數量的文本，但在激活定位在頁面頂部的適當控制項時，連結文本被​擴展​進一步詳細。 類似的方法是使用CSS來隱藏完整連結，以免有目光的使用者看到，但仍會將它完整輸出給螢幕閱讀程式使用者。 **​這不在本檔案範圍內，但有關如何實現此目標的更多資訊，請參閱更多資訊——連結用途（在內容中）(2.4.4)一節。

詳細資訊——連結用途（在內容中）(2.4.4)

• 瞭解成功標準2.4.4
• 如何符合成功標準2.4.4

多種方式(2.4.5)

• 成功標準2.4.5
• AA級
• 多種方式：在一組網頁中，除了網頁是某個程式的結果或步驟之外，還有多種方法可用來尋找網頁。

用途——多種方式(2.4.5)

本「成功准則」的目的，在於讓使用者能以最符合其需求的方式來尋找內容。 使用者會發現，一種技術比另一種技術更容易使用或更容易理解。

即使是小型網站，也應該為使用者提供一些方向。 對於三、四個頁面網站（所有頁面皆從首頁連結），僅提供來自首頁和來自首頁的連結（首頁上的連結也可當成網站地圖）就足夠了。

如何開會——多種方式(2.4.5)

遵循如何符合成功准則2.4.5下的准則。

更多資訊——多種方式(2.4.5)

• 瞭解成功標準2.4.5
• 如何符合成功標準2.4.5

標題和標籤(2.4.6)

• 成功標準2.4.6
• AA級
• 標題和標籤：標題和標籤描述主題或目的。

用途——標題和標籤(2.4.6)

本「成功准則」旨在協助使用者瞭解網頁中包含哪些資訊以及該資訊的組織方式。 當標題清晰且描述性強時，使用者可以更輕鬆地找到他們所尋找的資訊，並更輕鬆地瞭解內容不同部分之間的關係。 描述性標籤可協助使用者識別內容中的特定元件。

如何符合——標題和標籤(2.4.6)

遵循如何符合成功標準2.4.6下的准則。

詳細資訊——標題和標籤(2.4.6)

• 瞭解成功標準2.4.6
• 如何符合成功標準2.4.6

焦點可見(2.4.7)

• 成功標準2.4.7
• AA級
• 焦點可見：任何鍵盤可操作的用戶介面具有操作模式，其中鍵盤焦點指示器是可見的。

用途——焦點可見(2.4.7)

此成功標準的目的是協助使用者瞭解哪個元素具有鍵盤焦點。

人必須能夠知道多個元素中哪個元素具有鍵盤焦點。 如果螢幕上只有一個鍵盤可操作的控制項，則會符合成功標準，因為視覺設計只顯示一個鍵盤可操作的項目。

當成功標準顯示「操作模式」時，這是為了說明不一定總是顯示焦點指標的平台。 在大多數情況下，只有一種操作模式，因此會套用此成功准則。

如何開會——焦點可見(2.4.7)

遵循如何符合成功標準2.4.7下的准則。

詳細資訊——焦點可見(2.4.7)

• 瞭解成功標準2.4.7
• 如何符合成功標準2.4.7

原則3:可理解

原則3:可理解——資訊和用戶介面的操作必須可理解。

讓文字內容可讀且可理解(3.1)

准則3.1可讀：讓文字內容可讀且易於理解。

頁面語言(3.1.1)

• 成功標準3.1.1
• A級
• 頁面語言：每個網頁的預設人文語言可依程式設計決定。

用途——頁面語言(3.1.1)

此成功標準的目的是確保文字和其他語言內容正確呈現。 對於螢幕閱讀器使用者，這可確保內容正確發音，而視覺瀏覽器更可能正確顯示特定字元集。

How to Meet - Language of Page(3.1.1)

為符合此成功標準，可使用頁面頂端的<html>元素中的lang屬性來識別網頁的預設語言。 例如：

• 如果頁面以英文寫入，<html>元素應為：
  <html lang = “en”>

• 而以西班牙文轉譯的頁面，則應採用下列標準：
  <html lang = “es”>

在AEM中，建立頁面時會設定頁面的預設語言，但編輯頁面屬性時也可以變更。

詳細資訊——頁面語言(3.1.1)

• 瞭解成功標準3.1.1
• 如何符合成功標準3.1.1
• 代碼基於ISO 639-1。 W3學校網站提供更詳盡的每種語言代碼清單。

部件語言(3.1.2)

• 成功標準3.1.2
• AA級
• 部件語言：除了正確的名稱、技術術語、不確定語言的字詞和已成為立即周圍文本的白話部分的字詞或短語外，內容中每個段落或短語的人文語言可以寫程式確定。

用途——部件語言(3.1.2)

此成功准則的目的類似於「頁面語言」的「成功准則」，但適用於單一頁面上包含多種語言內容的網頁（例如，由於引文或不常見的借記字詞）。

套用此成功准則的頁面允許：

• 盲文轉換軟體以插入帶重音字元。
• 螢幕閱讀程式可讀出那些具有特殊字元的字詞，或不是在頁面層級識別的預設語言。
• 翻譯工具（例如Google Translate），可將內容從一種語言正確翻譯為另一種語言。

How to Meet - Language of Parts(3.1.2)

lang屬性可用來識別內容語言的變更。 例如，德文引號（ISO 639-1代碼"de"）如下所示：

<blockquote cite = "John F. Kennedy" lang = "de">
     <p>Ich bin ein Berliner</p>
 </blockquote>

同樣地，如果span元素的使用方式如下，瀏覽器也可正確呈現不常見的借記字詞或片語：

<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</code>.</p>

要使用適當的語言添加span元素，可以在RTE的源編輯模式中手動編輯HTML標籤，以便其讀取如上。 或者，系統管理員可將lang屬性包含在RTE中（請參閱添加對其他HTML元素和屬性的支援）。

詳細資訊——部件語言(3.1.2)

• 瞭解成功標準3.1.2
• 如何符合成功標準3.1.2

可預測(3.2)

准則3.2可預測：讓網頁以可預測的方式顯示和運作。

這就是要確保網頁的外觀和運作方式一致。

焦點(3.2.1)

• 成功標準3.2.1
• A級
• 焦點：當任何使用者介面元件收到焦點時，它不會起始內容變更。

目的——重點(3.2.1)

此成功標準的目的是確保在訪客瀏覽檔案時，功能可預測。 任何在接收焦點時能夠觸發事件的元件，都不得變更內容。 元件接收焦點時更改上下文的示例包括，但不限於：

• 元件獲得焦點時自動提交的表單；
• 當元件收到焦點時，就會啟動新視窗；
• 當該元件接收焦點時，焦點會變更為另一個元件；

焦點可以通過鍵盤（例如與控制項對開）或滑鼠（例如在文本欄位上按一下）移動到控制項。 將滑鼠移至控制項上時，除非指令碼實作此行為，否則不會移動焦點。 請注意，對於某些類型的控制項，按一下控制項也可能會啟動控制項（例如按鈕），而此控制項可能會啟動內容變更。

如何開會——焦點(3.2.1)

遵循如何符合成功准則3.2.1下的准則。

更多資訊——焦點(3.2.1)

• 瞭解成功標準3.2.1
• 如何符合成功標準3.2.1

輸入時(3.2.2)

• 成功標準3.2.2
• A級
• 輸入時：變更任何使用者介面元件的設定並不會自動造成內容變更，除非使用者在使用元件之前已被告知該行為。

用途——輸入時(3.2.2)

本「成功准則」的目的是確保輸入資料或選取表單控制項具有可預測的效果。 變更任何使用者介面元件的設定，會變更控制項中在使用者不再與其互動時會持續存在的某些方面。 因此，勾選核取方塊、在文字欄位中輸入文字或變更清單控制項中選取的選項會變更其設定，但啟動連結或按鈕則不會變更。 情境的變更會迷惑不解的使用者，讓他們不容易察覺變更，或容易被變更分心。 只有當使用者的動作顯然會發生這類變更時，才適合變更內容。

如何符合——輸入時(3.2.2)

遵循如何符合成功准則3.2.2下的准則。

詳細資訊——輸入(3.2.2)

• 瞭解成功標準3.2.2
• 如何符合成功標準3.2.2

一致導覽(3.2.3)

• 成功標準3.2.3
• AA級
• 一致導覽：在一組網頁內的多個網頁上重複的導覽機制，在每次重複時都以相同的相對順序發生，除非使用者啟動變更。

用途——一致導覽(3.2.3)

本「成功准則」旨在鼓勵使用者在一組網頁內與重複內容互動且需要多次找出特定資訊或功能的情況下，使用一致的簡報和版面。 低視覺的個人使用螢幕放大率，一次顯示螢幕的一小部分時，通常會使用視覺提示和頁面邊界來快速找出重複的內容。 對於視覺使用者而言，以相同順序呈現重複內容也很重要，因為視覺使用者在設計中使用空間記憶體或視覺提示來定位重複內容。

請務必注意，本節中使用「相同順序」一詞並非暗示無法使用子導覽功能表，或無法使用次導覽或頁面結構區塊。 相反地，此成功准則旨在協助使用者透過網頁與重複內容互動，以預測所尋找內容的位置，並在再次遇到時更快速找到。

用戶可以通過使用自適應用戶代理或通過設定首選項來根據順序發起更改，以便以對他們最有用的方式呈現資訊。

如何開會——一致導覽(3.2.3)

遵循如何符合成功准則3.2.3下的准則。

詳細資訊——一致導覽(3.2.3)

• 瞭解成功標準3.2.3
• 如何符合成功標準3.2.3

一致識別(3.2.4)

• 成功標準3.2.4
• A級
• 一致的識別：在一組網頁中具有相同功能的元件會一致識別。

用途——一致標識(3.2.4)

本「成功准則」的目的，在於確保一致識別在一組網頁中重複出現的功能元件。 使用螢幕閱讀程式的使用者在操作網站時採用的策略，是高度依賴使用者熟悉可能出現在不同網頁的功能。 如果相同的功能在不同的網頁上有不同的標籤（或更一般地說，是不同的可存取名稱），則網站的使用難度會大大增加。 這也可能令人困惑，並增加了對認知有限的人的認知負荷。 因此，一致的標籤將有所幫助。

這種一致性延伸到了文本替代項。 如果圖示或其他非文字項目具有相同的功能，則其文字替代項目也應保持一致。

如果網頁上有兩個元件，其功能都與一組網頁中其他頁面上的元件相同，則這3個元件必須保持一致。 因此，同一頁上的兩者將保持一致。

雖然在單一網頁內始終保持一致是最理想且最佳的作法，但3.2.4隻解決一組網頁內的一致性問題，而該組網頁中的多個網頁會重複某些內容。

如何滿足——一致性標識(3.2.4)

遵循如何符合成功准則3.2.4下的准則。

更多資訊——一致識別(3.2.4)

• 瞭解成功標準3.2.4
• 如何符合成功標準3.2.4

輸入協助(3.3)

准則3.3投入援助：協助使用者避免並修正錯誤。

錯誤標識(3.3.1)

• 成功標準3.3.1
• A級
• 錯誤標識：如果自動檢測到輸入錯誤，則識別出錯誤的項目，並以文本向用戶說明錯誤。

用途——錯誤標識(3.3.1)

本成功准則的目的是確保使用者知道發生錯誤，並可判斷錯誤的內容。 錯誤訊息應盡可能具體。 如果表單提交失敗，重新顯示表單並指出有錯誤的欄位不足以讓部分使用者察覺到發生錯誤。 例如，螢幕閱讀程式使用者在遇到其中一個指示器之前，不會知道有錯誤。 他們可能會在遇到錯誤指示器之前完全放棄表單，認為頁面無法運作。 根據WCAG中的定義，輸入錯誤是用戶提供的不被接受的資訊。 這包括：

網頁要求但使用者省略的資訊，或使用者提供但不符合要求資料格式或允許值的資訊。
例如：

• 用戶未能在州、省、地區等地輸入正確的縮寫。 欄位;
• 用戶輸入非有效狀態的狀態縮寫；
• 用戶輸入的郵遞區號不存在；
• 用戶在未來2年內進入出生日期；
• 用戶在只接受數字的電話號碼欄位中輸入字母或括弧；
• 使用者輸入低於先前出價或最低出價增量的出價。

How to Meet - Error Identification(3.3.1)

遵循如何符合成功准則3.3.1下的准則。

詳細資訊——錯誤識別(3.3.1)

• 瞭解成功標準3.3.1
• 如何符合成功標準3.3.1

標籤或說明(3.3.2)

• 成功標準3.3.2
• A級
• 標籤或指示：當內容需要使用者輸入時，會提供標籤或指示。

用途——標籤或說明(3.3.2)

提供說明以協助人們填寫表單是介面可用性的基本實務。 這樣做對於視覺或認知障礙的人特別有幫助，因為如果不是這樣，他們可能難以理解表單的佈局以及在特定表單域中提供的資料類型。

表單

在AEM WKND展示專案中，當您將表單元件（例如​文字欄位）新增至頁面時，會新增預設標籤。 此預設標題取決於元件類型。您可以在該欄位的編輯對話框的​標題和文本​頁籤中添加自己的標題。 請務必確保標籤有助於使用者瞭解與每個表單元件相關聯的資料。

此​Title​欄位必須用於欄位元素，因為它提供可用於輔助技術的標籤。 僅僅在欄位旁的文字中加上標籤是不夠的。

對於某些表單元件，您也可以使用「隱藏標題」核取方塊以視覺化方式 隱藏標籤 。以此方式隱藏的標籤仍適用於輔助技術，但無法顯示在螢幕上。雖然這在某些情況下是個好方法，但通常最好盡可能加入視覺標籤，因為有些使用者可能會看到畫面的一小部分 (一次看一個欄位)，並需要標籤來正確識別欄位。

影像按鈕

其中使用影像按鈕（例如，WKND專案的​Image Button​元件），編輯對話方塊的​Title和Text​標籤中的​Title​欄位實際上提供影像的替代文字，而非標籤。 因此，在以下範例中，包含文字的影像 Submit 的alt文字為 Submit，使用編輯對話方塊中的 Title 欄位新增。

表單欄位群組

在WKND項目中，如果存在一組相關控制項，例如​Radio Group，則可能需要該組的標題以及單個控制項。 在AEM中新增一組選項按鈕時，「標題 」欄位會提供此群組標題，而個別標題會指定為選項按鈕( Items ​)。

不過，群組標題和選項按鈕本身之間沒有程式化關聯。範本編輯人員必須將標題包住必要 fieldset 和 legend 標籤，才能建立此關聯，而這只能透過編輯頁面原始碼來完成。或者，系統管理員可以添加對這些元素的支援，使這些元素顯示在​欄位屬性​對話框中（請參閱添加對其他HTML元素和屬性的支援）。

表單的其他注意事項

如果要以特定格式輸入資料，請在標籤文本中明確說明這一點。 例如，如果必須以DD-MM-YYYY格式輸入日期，請特別指出這是標籤的一部分。 這表示當螢幕閱讀程式使用者遇到欄位時，標籤會自動宣佈，以及格式的其他資訊。

如果表單欄位的輸入是必填的，請使用標籤中的必要字詞來清楚說明。AEM在需要欄位時新增星號，但最好將字詞加入標 required簽本身(在編輯對話方塊的「 Title 」欄位中)。

標籤的定位也很重要，因為它可協助標籤找到適當的欄位。 當使用者面對複雜的表單時，這尤其重要。 遵守以下公約：

• 核取方塊或選項按鈕：
  標籤會立即置於欄位右側。
• 所有其他表單元件（例如文字方塊、組合方塊）:
  標籤會立即置於欄位的上方或左側。

在功能非常有限的簡單表單中，適當標籤Submit按鈕可當成相鄰欄位的標籤（例如Search）。 當尋找標籤文字的空間時，這項功能會很有用。

詳細資訊——標籤或指示(3.3.2)

• 瞭解成功標準3.3.2
• 如何符合成功標準3.3.2

錯誤建議(3.3.3)

• 成功標準3.3.3
• AA級
• 鍵盤：如果自動檢測到輸入錯誤並且已知要更正的建議，則向用戶提供建議，除非該建議會危及內容的安全性或目的。

目的——錯誤建議(3.3.3)

本「成功准則」的目的，在於確保使用者在可能的情況下收到適當的建議，以修正輸入錯誤。 input error的WCAG定義表示系統「未接受用戶提供的資訊」。 未被接受的資訊的一些示例包括用戶需要但省略的資訊以及用戶提供但不屬於所需資料格式或允許值的資訊。

成功准則3.3.1提供錯誤通知。 然而，認知有限的人可能很難理解如何糾正錯誤。 視覺殘障人士可能無法確切瞭解如何修正錯誤。 如果提交表單失敗，使用者可能會放棄表單，因為他們可能不確定如何更正錯誤，即使他們知道錯誤已發生。

內容作者可以提供錯誤的描述，或者用戶代理可以根據特定於技術的、以寫程式方式確定的資訊提供錯誤的描述。

如何滿足——錯誤建議(3.3.3)

遵循如何符合成功准則3.3.3下的准則。

詳細資訊——錯誤建議(3.3.3)

• 瞭解成功標準3.3.3
• 如何符合成功標準3.3.3

錯誤預防（法律、財務、資料）(3.3.4)

• 成功標準3.3.4

• AA級

• 錯誤預防（法律、財務、資料）:對於導致用戶發生法律承諾或財務交易、修改或刪除資料儲存系統中用戶可控制資料或提交用戶測試響應的網頁，至少以下情況之一是正確的：

  • 可逆
    提交內容是可逆的。
  • 已勾選
    用戶輸入的資料被檢查是否有輸入錯誤，並且用戶有機會更正這些錯誤。
  • 已確認
    在提交定稿之前，可使用一種機制來審查、確認和更正資訊。

目的——錯誤預防（法律、財務、資料）(3.3.4)

本「成功准則」的目的是協助殘障人士避免在執行無法反轉的動作時，因為發生錯誤而造成嚴重後果。 例如，購買不可退還的機票或提交訂單以在經紀帳戶中購買股票，是具有嚴重後果的財務交易。 如果使用者在航空旅行日期犯了錯誤，他／她最終可能會得到一張無法交換的錯日機票。 如果使用者在要購買的股票數量上發生錯誤，他或她最終可能會購買比預期更多的股票。 這兩種錯誤都涉及立即發生且事後無法更改的事務，而且代價非常高昂。 同樣地，如果用戶無意中修改或刪除了儲存在資料庫中的資料（如旅行服務網站中的整個旅行配置檔案），則可能是一個不可恢復的錯誤。 當提及修改或刪除「用戶可控」資料時，其目的是防止大量丟失資料，如刪除檔案或記錄。 不是為了要求確認每個保存命令，或是建立或編輯文檔、記錄或其他資料。

殘障人士更可能犯錯。 閱讀障礙者可以轉寄數字和信件，而機動障礙者可以誤按鍵。 提供反向動作的功能可讓使用者修正可能導致嚴重後果的錯誤。 提供檢閱和修正資訊的能力，讓使用者有機會在採取具有嚴重後果的動作之前，先偵測錯誤。

用戶可控資料是用戶可觀察的資料，用戶可以通過故意操作來更改和／或刪除。 控制此類資料的用戶的例子包括更新用戶帳戶的電話號碼和地址，或從網站上刪除過去發票的記錄。 它不指使用者無法直接檢視或互動的網際網路記錄檔和搜尋引擎監控資料。

How to Meet - Error Prevention(Legal, Financial, Data)(3.3.4)

遵循如何符合成功准則3.3.4下的准則。

詳細資訊——錯誤預防（法律、財務、資料）(3.3.4)

• 瞭解成功標準3.3.4
• 如何符合成功標準3.3.4

原則4:強穩

原則4:強穩——內容必須足夠強穩，以供各種使用者代理程式（包括輔助技術）解讀。

相容(4.1)

准則4.1相容：將與目前和未來使用者代理程式的相容性提升到最大，包括輔助技術。

將與目前和未來使用者代理程式的相容性提升到最大，包括輔助技術。

解析(4.1.1)

• 成功標準4.1.1
• A級
• 剖析：在使用標籤語言實施的內容中，元素具有完整的開始和結束標籤，元素根據其規範進行巢狀化，元素不包含重複屬性，而且除了規範允許這些功能外，所有ID都是唯一的。

用途——剖析(4.1.1)

本「成功准則」的目的在於確保使用者代理（包括輔助技術）能夠正確解譯和剖析內容。 如果無法將內容解析為資料結構，則不同的用戶代理可能以不同的方式呈現內容，或完全無法解析內容。 有些使用者代理會使用「修復技術」來產生編碼不良的內容。

由於修復技術在各用戶代理之間各不相同，因此作者不能假設內容將被精確解析為資料結構，或者內容將被包括輔助技術在內的專業用戶代理正確呈現，除非內容是根據該技術的正式語法中定義的規則建立的。 在標籤語言中，元素和屬性語法中的錯誤以及未能提供正確巢狀的開始／結束標籤會導致錯誤，使用者代理無法可靠地剖析內容。 因此，成功准則要求僅使用形式語法的規則來剖析內容。

How to Meet - Parsing(4.1.1)

遵循如何符合成功標準4.1.1下的准則。

詳細資訊——剖析(4.1.1)

• 瞭解成功標準4.1.1
• 如何符合成功標準4.1.1

名稱、角色、值(4.1.2)

• 成功標準4.1.2
• A級
• 名稱、角色、值：對於所有用戶介面元件(包括但不限於：表單元素、連結和指令碼生成的元件)，可以通過寫程式方式確定名稱和角色；用戶可以設定的狀態、屬性和值可以通過寫程式方式設定；使用者代理可取得這些項目變更的通知，包括輔助技術。

用途——名稱、角色、值(4.1.2)

本「成功准則」的目的是確保「輔助技術」(AT)可收集、啟用（或設定）內容中使用者介面控制項的狀態，並隨時掌握最新資訊。

當使用可存取技術的標準控制時，此程式就十分簡單。 如果用戶介面元素根據規格使用，則滿足此設定的條件。 （請參閱下方的成功准則4.1.2範例）

但是，如果建立了自定義控制項，或者將介面元素寫程式（在代碼或指令碼中）以具有與通常不同的角色和／或功能，則需要採取額外措施，以確保控制項向輔助技術提供重要資訊並允許輔助技術控制它們。

用戶介面控制項的一個特別重要的狀態是是否具有焦點。 可以寫程式地確定控制的焦點狀態，並且將關於焦點改變的通知發送給用戶代理和輔助技術。 用戶介面控制狀態的其他示例包括是否選中了複選框或單選按鈕，或是展開或折疊可折疊的樹或清單節點。

How to Meet - Name, Role, Value(4.1.2)

遵循如何符合成功標準4.1.2下的准則。

詳細資訊——名稱、角色、值(4.1.2)

• 瞭解成功標準4.1.2
• 如何符合成功標準4.1.2