此 網頁內容可及性指引(WCAG) 2.1 繪製者: 全球資訊網協會工作組. 它包含一系列技術獨立指引和成功標準,協助身心障礙人士存取及使用網路內容。
作為介紹,聯盟提供了一系列章節和支援檔案:
此外,另請參閱:
指引會根據三個一致性等級進行分級:A級(最低)、AA級和AAA級(最高)。 簡言之,層級的定義如下:
建立網站時,您必須決定要讓網站遵循的整體等級。
以下小節將介紹 WCAG 2.1指引各層 具有A級和AA級的相關成功標準 一致性層級.
本檔案會使用下列內容:
准則1:可感知 — 資訊和使用者介面元件必須以使用者可感知的方式呈現給使用者。
指南1.1替代文字:為任何非文字內容提供替代文字,以便可以變更為人們需要的其他形式,例如大字型、盲文、語音、符號或更簡單的語言。
網頁上的資訊可以用許多不同的非文字格式提供,例如圖片、影片、動畫、圖表和圖形。 失明或嚴重視力障礙的人無法看到非文字內容。 但是,他們可以透過熒幕閱讀器讀取文字內容,或透過盲文顯示裝置以觸覺形式呈現文字內容,以存取文字內容。 因此,透過以圖形格式提供替代內容的文字內容,看不到該內容的人可以存取內容所提供的對等版本資訊。
另一個實用的優點是,替代文字功能可讓搜尋引擎技術為非文字內容編制索引。
對於靜態圖形,基本要求是為圖形提供對應的替代文字。 此方法可以在以下位置完成: 替代文字 欄位。 例如,請參閱核心元件 影像.
部分現成可用的核心元件 — 例如 輪播 — 不提供 替代文字 用於新增替代文字說明至個別影像的欄位,不過 標籤 欄位(協助工具 標籤)。
當針對您的AEM執行個體實作這些版本時,您的開發團隊必須設定這些元件以支援 alt
屬性。 這麼做可確保作者將其新增至內容(請參閱 新增對其他HTML元素和屬性的支援)。
AEM需要 替代文字 預設要填寫的欄位。 如果影像是純粹的裝飾且不需要替代文字,則 裝飾性影像 選項時可核取。
非文字內容有多種形式,因此替代文字的值取決於圖形在網頁中所扮演的角色。 您可能會覺得有幫助的一些一般規則包括:
需要替代文字的特定非文字內容型別可能包括:
說明性像片:指人物、物件或地點的影像。 請務必思考像片在頁面中的角色,以及建議對影像內容的說明,因為輔助技術會朗讀元素型別(例如 graphic
或 image
)。 這樣可提高使用的清晰度 screenshot
或 illustration
替代文字說明,但這取決於上下文。 一致性是一個重要因素,應該針對整個撰寫團隊做出決定,並套用至整個使用者體驗。
圖示:這些是傳達特定資訊的小圖形符號(圖形)。 必須在頁面和網站上一致地使用它們。 頁面上或網站上的所有圖示例項都應使用相同的簡短替代文字,除非這樣做會造成相鄰文字不必要的重複。
圖表和圖形:這些通常代表數值資料。 因此,提供替代文字的一個選項可能是包含圖表或圖形中顯示的主要趨勢的簡短摘要。 如有需要,也可在文字中使用 說明 中的欄位 進階 影像屬性索引標籤。 此外,您也可以在頁面或網站的其他位置,以表格形式提供來源資料。
地圖、圖表、流程圖:對於提供空間資料的圖形(例如,支援描述物件或程式之間的關係),請確保以文字格式提供關鍵訊息,並且此文字資訊位於每個關聯資料點附近。 對於地圖,提供等同全文的地圖可能不切實際,但如果提供地圖以幫助人們找到特定位置的方式,則地圖影像的替代文字可以簡短地指出 X的地圖,然後在頁面其他位置的文字中或透過提供該位置的指示 說明 中的欄位 進階 的標籤 影像 元件。
驗證碼:驗證碼是 完全自動化的公用圖靈測試,區分電腦和人類. 這是用於網頁的安全性檢查,可區分人類與惡意軟體,但可能會導致存取障礙。 這些影像需要使用者描述他們所看到的內容,以便通過安全性測試。 無法提供影像的替代文字,因此您必須考慮替代非圖形解決方案。 W3C提供幾個建議。 這些方法各有其優缺點。
背景影像:這些影像是使用階層式樣式表(CSS)而不是HTML取得。 這表示無法指定替代文字值。 因此,背景影像不應提供重要的文字資訊,即便提供,頁面文字中也必須提供此資訊。 不過,當影像無法顯示時,請務必顯示替代背景。
背景和前景文字之間應該要有適當等級的對比,詳情請參閱 對比(最小) (1.4.3).
准則1.2以時間為基礎的媒體:提供以時間為基礎的媒體替代方案。
此准則所處理的網頁內容為 基於時間. 這涵蓋使用者可播放的內容(例如視訊、音訊和動畫內容),並且可以是預先錄製或即時資料流。
可能遇到視訊與音訊的無障礙問題,例如:
使用不支援以特定媒體格式(例如AdobeFlash)播放內容的瀏覽器或裝置的人也可能無法播放視訊或音訊。
以不同格式提供此資訊,例如文字(或沒有音訊的視訊)可讓無法存取原始內容的人存取這些資訊。
如果音訊或視訊內容是作為相同網頁上其他格式內容的替代內容提供,則可能不需要額外的替代內容。
准則, 瞭解WCAG 1.2.1,提供進一步資訊。
在AEM網頁中插入多媒體內容與插入影像類似。 不過,由於多媒體內容遠不止是靜態影像,因此有各種不同的設定和選項來控制多媒體的播放方式。
當您使用包含資訊內容的多媒體時,也必須建立替代內容的連結。 例如,若要包含文字記錄,請建立HTML頁面以顯示記錄,然後在音訊內容旁邊或下方新增連結。
耳聾或聽力缺佳的人無法或很難存取音訊內容。 註解是口語和非口語音訊的對等文字,會在視訊期間的適當時間顯示在畫面上。 它們可讓無法聽到音訊的人瞭解正在發生的事情。
註解可以是:
儘可能使用隱藏式字幕,因為使用者可以選擇是否檢視字幕。
對於隱藏式字幕,您必須建立並提供適當格式的同步字幕檔案(例如 SMIL)和影片檔案(如何執行此動作的詳細資訊不在本指南的涵蓋範圍內,但提供一些教學課程的連結於 更多資訊 — 字幕(預先錄製)(1.2.2). 請務必提供註解或在視訊播放器中啟用註解功能,讓使用者知道視訊有註解可用。
如果您必須使用開啟的註解,請將文字內嵌到視訊曲目中。 這可以使用視訊編輯應用程式來完成,該應用程式允許將標題覆蓋在視訊上。
c
如果影片或動畫中的資訊僅以視覺效果顯示,或是音軌提供的資訊不足以讓使用者瞭解正在發生的事情,失明或視障的使用者就會遇到協助工具障礙。
有兩種方法可達成此成功標準。 兩者皆可接受:
本指南不涵蓋如何建立音訊描述視訊的確切細節。 建立視訊和音訊說明可能相當耗時,但其他Adobe產品可協助您完成這些工作。
此成功標準與 字幕(預先錄製) 因為除了此成功標準處理網路直播等即時簡報之外,此標準還能解決耳聾或聽力缺佳的使用者遇到的無障礙問題。
遵循下列專案所提供的指引: 字幕(預先錄製) 以上。 然而,由於媒體的即時性質,必須儘快建立註解布建,並對正在發生的情況做出回應。 因此,您應該考慮使用即時字幕工具或語音轉文字工具。
詳細指示不在本檔案的範圍,但下列資源提供有用的資訊:
此成功標準與 音訊說明或替代媒體(預先錄製)但作者必須提供更詳細的音訊說明才能符合AA級標準。
遵循下列專案所提供的指引: 音訊說明或替代媒體(預先錄製).
指引1.3改寫:建立可以不同方式呈現的內容(例如更簡單的版面),而不會遺失資訊或結構。
本指引涵蓋支援以下人員所需的需求:
可能無法存取作者以預設內容呈現方式呈現的資訊(例如,多欄版面或大量使用顏色和/或影像的頁面)。
可能使用純音訊或替代視覺顯示,例如大文字或高對比。
殘障人士使用的許多輔助技術都仰賴結構資訊才能有效顯示或 瞭解 內容。 此結構資訊可以採用頁面標題、表格列和欄標題以及清單型別的形式。 例如,熒幕助讀程式可讓使用者在標題之間導覽頁面。 但是,當頁面內容似乎只有透過視覺樣式而非基礎HTML的結構時,則沒有可用於輔助技術的結構資訊,限制其支援更輕鬆瀏覽的能力。
此成功標準旨在確保透過HTML或其他編碼技術以程式設計方式提供此類結構資訊,以便瀏覽器和輔助技術可存取並利用這些資訊。
AEM可讓您使用適當的HTML元素,輕鬆建構語義上有意義的網頁內容。 在RTE (文字元件)中開啟頁面內容,並使用 引數格式 選單(段落符號)以指定適當的結構元素(例如段落、標題等)。
在適用的情況下,您可以使用下列元素,確保您的網頁具有適當的結構:
標題: 只要您已啟用RTE的協助工具功能,AEM就會提供三個層級的頁面標題。 您可以使用這些項目來識別內容的區段和子區段。標題1是標題的最高級別,標題3是最低級別。系統管理員可以配置系統以允許使用更多標題級別。
清單:您可以使用HTML來指定三種不同型別的清單:
<ul>
用於無序 列 (項目符號) 清單。識別個別清單專案時,會使用 <li>
元素。 在RTE中,使用 專案符號清單 圖示。<ol>
元素用於 編號 清單。 識別個別清單專案時,會使用 <li>
元素。 在RTE中,使用 編號清單 圖示。如果您想要將現有內容變更為特定清單型別,請反白適當的文字並選取適當的清單型別。 如同先前顯示如何輸入段落文字的範例一樣,適當的清單元素會自動新增至您的HTML。
在全螢幕模式中,會顯示個別 的「項目符號清單 」和「 編號清單」圖示。當未處於全螢幕模式時,單一「清單」圖示後面會提供這兩個 選項 。
表格:資料表格必須使用HTML表格元素來識別:
<table>
元素<tr>
表格每一列的元素<th>
每個列和欄標題的元素<td>
每個資料儲存格的元素此外,可存取的表格會使用下列元素和屬性:
<caption>
元素用於為表格提供可見的標題。 字幕預設會顯示在表格上方的中央,但可以使用CSS適當地放置字幕。 註解以程式設計方式與表格相關聯,因此是一種提供內容簡介的有用方法。<summary>
元素透過提供視力正常使用者可看到的內容的摘要,協助失明使用者更輕鬆地瞭解表格中顯示的資訊。 此工作流程在使用複雜或非常規表格佈局時相當實用(此屬性不會顯示在瀏覽器中,只會由輔助技術讀取)。scope
的屬性 <th>
element用於指示儲存格是代表特定列的標題,還是代表特定欄的標題。 在複雜的表格中使用標題和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.2.
設計者通常專注於視覺設計特徵,例如顏色、形狀、文字樣式,或內容在展示資訊時的絕對或相對位置。 這些可能是傳達資訊的強大設計技術(並且可改善具有認知協助工具需求的視力正常使用者的整體協助工具),但盲人或視力受損者可能無法存取需要視覺識別屬性(例如位置、顏色或形狀)的資訊。
同樣地,如果音訊內容沒有反映在任何替代文字中,需要區分不同聲音(例如,男性或女性講話的內容)的資訊會讓有聽覺障礙的人遇到協助工具障礙。
有關替代顏色的需求,請參閱 使用顏色.
請確定任何依賴頁面內容視覺特性的資訊也會以替代格式呈現。
如果在非視覺內容中理解描述性辭彙的含義,則可以使用描述性詞語。 例如,使用 以上 和 以下 通常可以接受,因為它們分別表示特定內容專案之前和之後的內容;當朗讀內容時,這仍然有意義。
准則1.4可區分:讓使用者更容易檢視和聆聽內容,包括將前景與背景分開。
此成功標準特別針對色彩感知。 其他形式的認知包含在 可調整(1.3);包括程式化存取顏色和其他視覺化簡報編碼。
色彩是增強網頁審美吸引力的有效方式,在傳達資訊時也很實用。 然而,視覺障礙也有其範圍,從失明到色覺缺陷,這表示有些人無法分辨某些顏色。 這使得色彩編碼成為提供資訊的不可靠方式。
例如,有紅 — 綠色覺缺陷的人無法區分綠色陰影和紅色陰影。 他們可能會將這兩種顏色視為第三種顏色(例如棕色),在這種情況下,他們無法區分紅色、綠色和棕色。
此外,使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白列印輸出的人無法察覺顏色。
進一步考量是 已選取 介面元素的狀態(例如,標籤、切換按鈕等),這些元素的傳送方式必須不僅僅是以顏色呈現,也不僅僅是以視覺呈現。 對於這類元素,在建立不依賴特定感官的全包容使用者體驗時,額外使用圖樣、形狀和程式化資訊會很有幫助。
無論在何處使用顏色來傳達資訊,請務必提供資訊而不需要看到顏色。
例如,請確定彩色提供的資訊也明確地以文字提供。
如果顏色是用來作為提供資訊的提示,您應該提供額外的視覺提示,例如變更樣式(例如,粗體、斜體)或字型。 這有助於視力缺佳或色覺缺佳的人識別資訊。 不過,不能完全依賴此功能,因為這對於完全看不到頁面的使用者沒有幫助。 因此,提供隱藏文字或使用程式化解決方案(例如 可存取的網頁標準多樣化網際網路應用程式(ARIA)套件,將此資訊傳達給失明的使用者。
如果同時有其他音訊在播放,使用熒幕閱讀軟體的個人會發現難以聽到語音輸出。 如果熒幕助讀程式的語音輸出是以軟體為基礎的(現今大多數都是如此),而且是透過與音效相同的音量控制來控制,這種困難就會加劇。 此外,有些認知障礙人士和神經系統障礙人士可能對聲音敏感。 這些人認為無法變更音訊內容的音量會造成干擾。
因此,使用者必須關閉背景音效。
控制音量包括能夠將音量減少到零。
請遵循以下准則: 如何達到成功標準1.4.2.
成功標準1.4.3
AA級
對比(最小):文字的視覺化呈現和影像的對比率至少為4.5:1,以下除外:
另請參閱 瞭解非文字對比 如需進一步資訊,有助於確保內容作者瞭解非文字元素(包括圖示、介面元素等)的其他需求。
有某些視覺障礙的人可能無法分辨某些低對比的顏色配對。 如果發生下列任一情況,這些人員就可能會發生協助工具問題:
純粹用於裝飾目的的文字會從此成功標準中排除。
請確定文字與其背景的對比度已足夠。 對比率視相關文字的大小和樣式而定:
請記住,字型在呈現等同的PT/PX/EM大小的方式上可能有所不同。
為網頁內容選擇適當的字型和大小時,請在可讀性和可用性方面做出良好的判斷和錯誤。
對下列短語執行網路搜尋,以尋找可協助您轉換為其他單位的工具:
若要檢查對比率,請使用顏色對比工具,例如 Paciello Group色彩對比分析器 或 WebAIM色彩對比檢查程式. 這些工具可讓您檢查顏色配對,並報告任何對比問題。
或者,如果您不太在意頁面外觀的指定,則可以選擇不指定背景和前景文字顏色。 不需要檢查對比,因為使用者的瀏覽器會決定文字和背景的顏色。
如果無法滿足建議的對比等級,您必須提供替代對等版頁面的連結(沒有色彩對比問題),或讓使用者根據自己的需求調整頁面色彩配置的對比。
此成功標準旨在確保視覺化呈現的文字,包括文字型控制項(已顯示文字字元以便顯示) [與仍在資料表單中的文字字元(例如ASCII)的比較])可成功縮放,以供輕度視覺障礙人士直接閱讀,而不需要使用熒幕放大鏡等輔助技術。 縮放網頁上的所有內容可能會讓使用者受益,但文字是最關鍵的。
除了遵循以下指南之外 如何達到成功標準1.4.4,您可以鼓勵內容作者在其頁面設計和字型大小(例如Responsive Web Design)中使用不固定、彈性的寬度和高度,讓讀者能夠調整文字大小。
標誌型別(屬於標誌或品牌名稱的文字)被認為是必要的。
當偏好文字的特定樣式時,通常會使用文字的影像;例如,商標標誌或從其他來源產生文字(例如,紙質檔案的掃描)。 然而,與以HTML呈現並使用CSS設定樣式的文字相比,文字的影像在變更大小或外觀方面缺乏彈性,而這對於視覺障礙或閱讀困難的人可能是必要的。
如果必須使用文字的影像,請使用CSS將文字的影像取代為HTML的對等文字,以便文字可自訂使用。 如需如何達到此目的的範例,請參閱 C30:使用CSS以文字的影像取代文字,並提供使用者介面控制項以進行切換.
Guideline 2.1無障礙鍵盤:使用鍵盤即可使用所有功能。
此准則涉及的是,確保使用者可以使用鍵盤存取所有功能。
此成功標準旨在確保只要有可能,內容都可透過鍵盤或鍵盤介面操作(以便使用替代鍵盤)。 如果內容可以透過鍵盤或替代鍵盤操作,則無法視力的人(無法使用需要手眼協調的裝置,例如滑鼠)和必須使用替代鍵盤或作為鍵盤模擬器的輸入裝置的人均可操作。 鍵盤模擬器包括語音輸入軟體、呼吸軟體、熒幕鍵盤、掃描軟體,以及各種輔助技術和備用鍵盤。 視力缺佳的人也可能難以追蹤指標,而且如果能透過鍵盤控制指標,就會發現使用軟體更容易(或只有可能)。
請遵循以下准則: 如何達到成功標準2.1.1.
此成功標準旨在確保內容不會 補漏白 鍵盤焦點位於網頁內容的子區段中。 當一個頁面中結合多種格式並使用外掛程式或內嵌應用程式呈現時,這是一個常見問題。
有時,網頁的功能會將焦點限制在內容的子區段(例如,強制回應對話方塊)。 在這種情況下,您應該提供讓使用者能夠退出該內容子區段的方法(例如,ESC鍵會關閉強制回應對話方塊,或是「關閉」按鈕會關閉強制回應對話方塊)。
請遵循以下准則: 如何達到成功標準2.1.2.
指引2.2充足時間:為使用者提供充足的時間來閱讀及使用內容。
此准則涉及的是,確保使用者有足夠的時間來閱讀內容並採取行動。
此成功標準旨在確保身心障礙使用者有充裕的時間儘可能與網路內容互動。 失明、視力缺佳、行動不便以及認知困難等殘障人士,可能需要更多的時間來閱讀內容或執行線上表單填寫等功能。 如果Web功能與時間有關,則某些使用者很難在時間限制發生之前執行所需的動作。 這可能會導致他們無法存取服務。 設計非時間相關功能可協助身心障礙人士成功完成這些功能。 提供停用時間限制、自訂時間限制長度或在時間限制發生前要求更多時間的選項,有助於需要超過預期時間的使用者成功完成工作。 這些選項會依照對使用者最有幫助的順序列出。 停用時間限制比自訂時間限制的長度好,這比在時間限制發生之前請求更多時間好。
遵循以下准則: 如何達到成功標準2.2.1.
需要注意的要點包括:
某些使用者可能會發現移動的內容會讓人分心,甚至讓人覺得難受,使得他們難以專注於頁面的其他部分。 此外,對於無法跟上移動文字進度的人來說,這類內容可能很難閱讀。
根據內容的性質,您可以在建立包含移動、閃爍或閃爍內容的網頁時,套用下列一或多個建議:
指南2.3癲癇發作:請勿設計會導致癲癇發作或生理反應的內容。
由於任何不符合此成功標準的內容都會干擾使用者使用整個頁面的能力,因此網頁上的所有內容(無論是否用於滿足其他成功標準)都必須符合此成功標準。 另請參閱 一致性需求5:不干涉.
在某些情況下,閃爍的內容可能會導致光敏性癲癇發作。 此成功標準可讓這類使用者存取及體驗所有內容,而不需擔心內容閃爍問題。
採取步驟以確保套用下列技術:
指引2.4可導覽:提供協助使用者導覽、尋找內容及判斷其所在位置的方法。
此准則涉及的是,確保內容簡單明瞭,可供使用者導覽。
此成功標準旨在讓依序瀏覽內容的人更直接地存取網頁的主要內容。 網頁和應用程式通常會有出現在其他頁面或熒幕上的內容。 重複出現的內容區塊範例包括但不限於導覽連結、頁首圖形、功能表及廣告框架。 就本規定而言,個別字詞、短語或單一連結等小型重複區段不會被視為區塊。
遵循以下准則: 如何達到成功標準2.4.1.
此成功標準可協助每個人(無論是否有任何特定問題)快速識別網頁內容,而不需完整閱讀頁面。 這在瀏覽器標籤中開啟數個網頁時非常有用,因為頁面標題會顯示在標籤中,因此可以快速找到。
在AEM中建立新HTML頁面時,您可以指定頁面標題。 請確定標題足以描述頁面內容和用途,尤其是任何不重複方面,讓訪客可快速識別內容是否符合其需求。
編輯頁面時,您也可以編輯頁面標題,頁面資訊——屬 性可存取。
此成功標準旨在確保使用者依序導覽內容時,會依照與內容含義一致的順序遇到資訊,且資訊可從鍵盤操作。 這可讓使用者建立內容的一致心智模型,以減少混淆。 可反映內容中邏輯關係的順序可能不同。 例如,在由多個欄位和/或步驟組成的線上表單中移動元件,會反映內容中的邏輯關係。
請遵循以下准則: 如何達到成功標準2.4.3.
對於所有使用者而言,無論是否有損毀,透過適當的連結文字清楚指出連結的方向是至關重要的。 這可協助使用者決定他們是否實際想要追蹤連結。 對於視力正常的使用者,有意義的連結文字在頁面上有多個連結時非常有用(尤其是頁面含有大量文字時),因為有意義的連結文字可更清楚指示目標頁面的功能。 某些輔助型技術的使用者可以產生單一頁面上所有連結的清單,如果連結文字不重複且資訊豐富,則使用者可以更輕鬆地脫離上下文理解連結文字。 但是,如果連結未提供足夠資訊來準確描述連結前往何處,則患有認知障礙的視力正常人士可能會感到困惑。
首先,請確定連結文字中清楚說明連結的用途。
連結的用詞在各個頁面中應保持一致,尤其是導覽列。 例如,如果特定頁面的連結已命名為 出版物 在一個頁面上,請使用該文字在其他頁面上,以確保一致性。
在撰寫時,在使用標題屬性以確保頁面上呈現的類似連結提供有關目的地的獨特資訊方面存在一些問題(例如,「閱讀更多」通常是指一系列不同的目的地):
因此,雖然title屬性可用於為連結提供額外內容,請注意其限制,且請勿將其用作適當連結文字的替代方式。
如果連結是由影像所組成,請確定影像的替代文字描述了連結的目的地。 例如,如果書架影像設定為某人出版物的連結,則替代文字應為 約翰·史密斯的出版物 而非 書架.
或者,如果連結錨點包含描述連結用途以及影像元素的文字(因此文字會出現在影像旁邊),請對影像使用空的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.5.
此成功標準旨在協助使用者瞭解網頁中包含哪些資訊以及這些資訊的組織方式。 當標題清晰且具有描述性時,使用者可以更輕鬆地找到他們尋找的資訊,並且可以更輕鬆地瞭解內容不同部分之間的關係。 描述性標籤可協助使用者識別內容中的特定元件。
遵循以下准則: 如何達到成功標準2.4.6.
此成功標準旨在協助人員知道鍵盤焦點在哪個元素。
個人必須可能知道多個元素中的哪個元素具有鍵盤焦點。 如果熒幕上只有一個鍵盤可操作的控制項,則會符合成功標準,因為視覺設計只會呈現一個鍵盤可操作專案。
成功標準中說的「操作模式」,則是考慮平台不一定會顯示焦點指標的原因。 通常只有一種作業模式,因此此成功標準適用。
請遵循以下准則: 如何達到成功標準2.4.7.
Guidelinate 3.1可讀取:讓文字內容可讀取且可理解。
此成功標準旨在確保文字和其他語言內容正確呈現。 對於熒幕助讀程式使用者,這可確保內容的發音正確,而視覺瀏覽器更有可能正確顯示特定字元集。
為達到此成功標準,可使用以下識別網頁的預設語言 lang
內的屬性 <html>
元素。 例如:
如果頁面是以英文撰寫, <html>
元素應為:
<html lang = "en">
而要以西班牙文轉譯的頁面應採用下列標準:
<html lang = "es">
在AEM中,您的頁面預設語言是在建立頁面時設定,但在編輯時也可以變更 頁面屬性.
AEM針對根語言的變體提供進一步微調;例如,美式英文 — en-us、英式英文 — en-gb和加拿大英文 — en-ca。 這種詳細程度對於輔助型技術來說通常是多餘的,不過可用於頁面內容中的區域變異。
此成功標準的用途與成功標準類似 頁面語言,但適用於單一頁面上包含多種語言內容的網頁(例如,由於引號或不常見的外來字)。
套用此成功標準的頁面允許:
此 lang
attribute可用來識別內容語言的變更。 例如,德文引號(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元素和屬性的支援)。
此准則涉及的是,確保網頁的外觀和操作方式一致。
此成功標準旨在確保當訪客在檔案中導覽時,功能是可預測的。 任何能夠在收到焦點時觸發事件的元件,均不得變更內容。 元件收到焦點時變更上下文的範例包括但不限於:
焦點可以透過鍵盤(例如,按Tab鍵移至控制項)或滑鼠(例如,選取文字欄位)移至控制項。 將滑鼠移到控制項上不會移動焦點,除非指令碼會實作此行為。 對於某些型別的控制項,選取控制項也可以啟動控制項(例如按鈕),這反過來又可以在前後關聯中啟動變更。
遵循以下准則: 如何達到成功標準3.2.1.
此成功標準旨在確保輸入資料或選取表單控制項具有可預見的效果。 變更任何使用者介面元件的設定將會變更控制項中的某些面向,當使用者不再與控制項互動時,這些面向會持續存在。 因此,核取核取方塊、在文字欄位中輸入文字,或變更清單控制項中的選取選項會變更其設定,但啟用連結或按鈕則不會變更。 上下文變更可能會讓不容易感知變更或容易被變更分散注意力的使用者感到困惑。 只有當明確指出這類變更是因應使用者的動作而發生時,上下文變更才是適當的。
遵循以下准則: 如何達到成功標準3.2.2.
此成功標準旨在鼓勵使用者使用一致的呈現和版面配置,讓使用者與一組網頁內的重複內容互動,並需要找到特定資訊或功能多次。 視力缺佳的人若使用熒幕放大功能一次顯示熒幕的一小部分,通常會使用視覺提示和頁面邊界來快速找到重複內容。 對於使用空間記憶體或設計中的視覺提示來尋找重複內容的視覺使用者,以相同順序呈現重複內容也很重要。
請務必注意,本節中使用片語「相同順序」並非表示無法使用子導覽功能表,或無法使用次要導覽區塊或頁面結構。 反之,此成功標準旨在協助使用者與整個網頁的重複內容互動,以便預測他們尋找的內容位置,並在再次遇到內容時更快地找到內容。
使用者可以使用最適化使用者代理程式或設定偏好設定,以對他們最有用的方式呈現資訊,從而啟動順序變更。
請遵循以下准則: 如何達到成功標準3.2.3.
此成功標準旨在確保重複出現在一組網頁中的功能元件可一致地識別。 使用熒幕助讀程式的人在操作網站時所使用的策略,主要是依賴他們對可能出現在不同網頁上的功能的熟悉度。 如果相同的功能在不同網頁上有不同的標籤(或更一般而言,具有不同的存取名稱),則網站的使用難度會大幅提高。 這也可能會令人困惑,並增加認知困難人士的認知負擔。 因此,一致的標籤會有所幫助。
此一致性延伸至替代文字。 如果圖示或其他非文字專案具有相同的功能,則其替代文字也應保持一致。
如果網頁上有兩個元件的功能與一組網頁中另一個頁面上的元件功能相同,則所有這3個元件都必須一致。 因此,相同頁面上的兩個專案是一致的。
雖然在單一網頁內總是保持一致是理想的做法,但3.2.4僅解決一組網頁內的一致性問題,這組網頁內的多個頁面上會重複某些內容。
請遵循以下准則: 如何達到成功標準3.2.4.
此成功標準旨在確保使用者知道已發生錯誤,並可判斷錯誤內容。 錯誤訊息應儘可能具體。 如果表單提交失敗,則重新顯示表單並指示錯誤的欄位不足以讓某些使用者感知已發生錯誤。 例如,熒幕助讀程式的使用者在遇到其中一個指標之前不知道有錯誤。 他們可能會在遇到錯誤指標之前完全放棄表單,認為頁面根本無法運作。 根據WCAG中的定義, 輸入錯誤 是使用者提供的不接受資訊。 其中包括:
網頁需要但使用者省略的資訊,或使用者提供但超出必要資料格式或允許值的資訊。
例如:
遵循以下准則: 如何達到成功標準3.3.1.
提供指示以幫助人們完成表單是介面可用性良好做法的基本部分。 這樣做有助於有視覺或認知障礙的人,否則他們可能難以瞭解表單的版面以及在特定表單欄位中要提供的資料型別。
在AEM WKND示範專案中,當您新增表單元件(例如 文字欄位,移至頁面。 此預設標題取決於元件型別。 您可以在下列位置新增專屬標題: 標題和文字 欄位之「編輯」對話方塊的「 」索引標籤。 請務必確保標籤可協助使用者瞭解與每個表單元件相關聯的資料。
此 標題 欄位必須用於欄位元素,因為它提供可用於輔助技術的標籤。 僅在該欄位旁的文字中寫入標籤是不夠的。
對於某些表單元件,也可以使用 隱藏標題 核取方塊。 以此方式隱藏的標籤仍適用於輔助技術,但無法顯示在螢幕上。雖然這在某些情況下可能是不錯的方法,但最好儘可能加入視覺標籤,因為有些使用者可能會看到畫面的一小部分(一次看一個欄位),並需要標籤才能正確識別欄位。
使用影像按鈕的位置(例如, 影像按鈕 元件) 標題 中的欄位 標題和文字 「編輯」對話方塊的tab實際上會提供影像的替代文字,而不是標籤。 因此,在以下範例中,包含文字的影像 Submit
的alt文字為 Submit
,使用編輯對話方塊中的 Title 欄位新增。
在WKND專案中,有一組相關控制項,例如 選項群組,群組和個別控制項可能需要標題。 在AEM中新增一組選項按鈕時,「標題 」欄位會提供此群組標題,而個別標題會指定為選項按鈕( Items )。
不過,群組標題和選項按鈕本身之間沒有程式化關聯。範本編輯人員必須將標題包住必要 fieldset
和 legend
標籤,才能建立此關聯,而這只能透過編輯頁面原始碼來完成。或者,系統管理員可以新增對這些元素的支援,以使它們出現在 欄位屬性 對話方塊(請參閱 新增對其他HTML元素和屬性的支援)。
如果要以特定格式輸入資料,請在標籤文字中清楚說明。 例如,如果日期必須輸入在 DD-MM-YYYY
格式,在標籤中特別指明這一點。 這表示當熒幕助讀程式的使用者遇到該欄位時,會自動公告標籤,以及關於格式的其他資訊。
如果表單欄位的輸入是必填的,請使用標籤中的必要字詞來清楚說明。AEM在需要欄位時新增星號,但最好將字詞加入標 required
簽本身(在編輯對話方塊的「 Title 」欄位中)。
標籤的位置也很重要,因為這有助於他們找到適當的欄位。 當使用者面對複雜表單時,這尤其重要。 請遵循下列慣例:
在功能有限的簡單表單中,適當地標示 Submit
按鈕可作為相鄰欄位的標籤(例如 Search
)。 在尋找標籤文字的空間可能困難的情況下,這個用法很有用。
此成功標準旨在確保使用者儘可能收到修正輸入錯誤的適當建議。 WCAG定義 輸入錯誤 指出這是「使用者提供的資訊,系統不接受」。 部分不被接受的資訊範例包括使用者需要但省略的資訊,以及使用者提供但超出所需資料格式或允許值的資訊。
成功標準3.3.1提供錯誤通知。 然而,有認知障礙的人可能很難理解如何更正錯誤。 有視覺障礙的人可能無法明白到底該如何更正錯誤。 如果表單提交失敗,使用者可能會放棄表單,因為他們可能不確定如何更正錯誤,即使他們知道錯誤已經發生。
內容作者可以提供錯誤描述,或者使用者代理可以根據特定於技術的程式化確定資訊提供錯誤描述。
請遵循以下准則: 如何達到成功標準3.3.3.
成功標準3.3.4
AA級
錯誤預防(法律、金融、資料):對於造成使用者發生法律承諾或財務交易的網頁、修改或刪除資料儲存系統中使用者可控資料的網頁,或提交使用者測試回應的網頁,至少符合下列其中一項:
此成功標準旨在協助身心障礙使用者在執行無法回覆的動作時,避免因錯誤而導致嚴重後果。 例如,購買不可退款的機票,或提交訂單在經紀帳戶中購買股票,都是可能產生嚴重後果的金融交易。 如果使用者在航空旅行日期上出錯,他們最終可能會收到一張無法交換的錯誤日期的機票。 如果使用者在要購買的股票數量上發生錯誤,他們最終可能會購買超出預期數量的股票。 這兩種錯誤都涉及立即發生且事後無法變更的交易,而且可能代價高昂。 同樣地,如果使用者無意中修改或刪除了儲存在資料庫中但日後需要存取的資料(例如旅行服務網站中自己的整個旅行設定檔),也可能是無法復原的錯誤。 當提及修改或刪除「使用者可控」資料時,目的是防止大量資料遺失,例如刪除檔案或記錄。 並非要求每個儲存命令都需確認,也不是為了簡單建立或編輯檔案、記錄或其他資料。
身心障礙使用者可能更容易出錯。 有閱讀障礙的人可能會顛倒數字和字母,而有運動障礙的人可能會誤按按鍵。 能夠反轉動作可讓使用者更正可能導致嚴重後果的錯誤。 檢閱和修正資訊的功能可讓使用者在採取會導致嚴重後果的行動之前偵測到錯誤。
使用者可控制的資料是使用者可檢視的資料,使用者可透過有意的動作變更和/或刪除這些資料。 使用者控制此類資料的範例是更新使用者帳戶的電話號碼和地址,或從網站刪除過去發票的記錄。 它不是指使用者無法直接檢視或互動的網際網路記錄和搜尋引擎監控資料。
請遵循以下准則: 如何達到成功標準3.3.4.
原則4:強健 — 內容必須足夠強健,以供包括輔助技術在內的各種使用者代理程式解讀。
准則4.1相容:儘可能與目前和未來的使用者代理程式相容,包括輔助技術。
儘可能與目前和未來的使用者代理程式相容,包括輔助技術。
此成功標準旨在確保使用者代理(包括輔助技術)可準確解讀和分析內容。 如果內容無法剖析為資料結構,則不同的使用者代理程式可能會以不同的方式呈現,或無法剖析內容。 有些使用者代理會使用「修復技術」來呈現編碼不佳的內容。
由於修復技術因使用者代理而異,作者無法假設內容已正確剖析為資料結構,或由專業的使用者代理(包括輔助技術)正確轉譯,除非內容是根據該技術的正式文法中定義的規則所建立。 在標籤語言中,元素和屬性語法中的錯誤,以及未能提供正確巢狀的開頭/結束標籤,會導致使用者代理程式無法可靠地剖析內容的錯誤。 因此,成功標準要求只能使用正式文法的規則來剖析內容。
遵循以下准則: 如何達到成功標準4.1.1.
此成功標準旨在確保輔助技術(AT)可以收集關於、啟用(或設定)內容中使用者介面控制項狀態的最新資訊。
使用來自無障礙技術的標準控制項時,此程式相當簡單明瞭。 如果根據規格使用使用者介面元素,則符合此布建的條件。 (請參閱下文的成功標準4.1.2範例)
但是,如果建立了自訂控制項,或介面元素被設定為(以程式碼或指令碼)具有不同於平常的角色和/或功能,則需要採取其他措施以確保控制項為輔助技術提供重要資訊,並允許輔助技術控制這些資訊。
使用者介面控制項的重要狀態是其是否具有焦點。 控制項的焦點狀態能以程式設計方式決定,且會傳送有關焦點變更的通知給使用者代理程式和輔助技術。 使用者介面控制項狀態的其他範例包括是否已選取核取方塊或選項按鈕,或是可摺疊的樹狀結構或清單節點是否已展開或摺疊。
請遵循以下准則: 如何達到成功標準4.1.2.