由萬維網聯盟工作組起草的《網頁內容無障礙准則》(WCAG)2.1由一套技術獨立准則和成功准則組成,幫助殘疾人能夠訪問和使用網頁內容。
作為介紹,該聯合組織提供了一系列章節和支援檔案:
此外,請參閱:
該准則按三個一致性級別分級:A級(最低)、AA級和AAA級(最高)。 簡單地說,這些級別的定義如下:
建立網站時,您必須決定要讓網站遵循的整體等級。
以下部分介紹了WCAG 2.1准則的層以及A級和A級符合性級別的相關成功標準。](https://www.w3.org/TR/WCAG/#wcag-2-layers-of-guidance)[
在本檔案中,我們使用:
原則1:可感知——資訊和使用者介面元件必須以使用者可感知的方式呈現給使用者。
准則1.1備選案文:為任何非文字內容提供替代文字,以便將其變更為人們需要的其他形式,例如大型印刷、盲文、語音、符號或更簡單的語言。
網頁上的資訊可以提供許多不同的非文字格式,例如圖片、視訊、動畫、圖表和圖形。 盲人或視力嚴重受損的人無法看到非文本內容,但他們可以通過螢幕閱讀器讀取文本內容或通過盲文顯示設備以觸覺形式顯示文本內容。 因此,提供圖形格式的內容替代文字,讓無法看見圖形內容的使用者可以存取內容所提供的相同版本資訊。
另一個有用的好處是,替代文字可讓非文字內容依搜尋引擎技術建立索引。
對於靜態圖形,基本要求是為圖形提供等效的文本替代。 這可在替代文字欄位中完成;例如,請參閱核心元件Image。
有些現成可用的核心元件,例如**Carousel不提供用於為個別影像新增替代文字說明的替代文字**欄位,但有Label欄位(Accessibility標籤)對整個元件。
當為您的AEM例項實作這些版本時,您的開發團隊將需要設定這些元件以支援alt
屬性,讓作者可以將它新增至內容(請參閱新增支援其他HTML元素和屬性)。
AEM要求預設填入替代文字欄位。 如果影像純粹是裝飾性的,而且不需要替代文字,則可以檢查Image is decortional選項。
非文字內容有多種形式,因此文字替代項目的價值取決於圖形在網頁中所扮演的角色。 以下是一些一般經驗法則:
需要替代文字的特定非文字內容類型可能包括:
graphic
或image
);它可提高替代文字說明中使用screenshot
或illustration
的清晰度,但這取決於內容。 一致性是一個重要因素,因此應針對整個製作團隊做出決策,並套用至使用者體驗。背景文字和前景文字之間應有適當的對比度;這在Contrapts(Minimum)(1.4.3)中會有更詳細的討論。
這涉及時間型的網頁內容。 這涵蓋使用者可播放的內容(例如視訊、音訊和動畫內容),並可預先錄制或即時串流。
視訊和音訊的協助功能問題可能會透過下列方式發生:
使用不支援以特定媒體格式(例如Adobe Flash)播放內容的瀏覽器或裝置的使用者,也可能無法使用視訊或音訊。
以不同格式提供此資訊,例如文字(或無音訊的視訊音訊),可讓無法存取原始內容的使用者存取。
如果音訊或視訊內容是提供給已存在於相同網頁上其他格式之內容的替代內容,則可能不需要其他替代內容。
准則瞭解WCAG 1.2.1提供了詳細資訊。
將多媒體插入AEM網頁類似於插入影像。 然而,由於多媒體內容遠非靜態影像,因此有多種不同的設定和選項來控制多媒體的播放方式。
當您將多媒體與資訊性內容搭配使用時,您也必須建立替代內容的連結。 例如,若要包含文字成績單,請建立HTML頁面以顯示成績單,然後在音訊內容旁或下方新增連結。
聾人或聽障者將無法或很難存取音訊內容。 標題是語音和非語音音訊的文字等效,在視訊中的適當時間在螢幕上顯示。 它們讓聽不到音效的人,瞭解現在的情況。
標題可以是:
盡可能使用隱藏字幕,因為這可讓使用者選擇是否檢視字幕。
對於隱藏字幕,您需要在視訊檔案旁建立並提供適當格式(例如SMIL)的同步化字幕檔案(如如何做到的詳細資訊不在本指南的範圍之內,但我們提供了更多資訊——標題(預錄)(1.2.2)下的教學課程連結。 請確定您提供附註或啟用視訊播放器中的標題功能,讓使用者知道標題可用於視訊。
如果您必須使用開放標題,請將文字內嵌至視訊軌。 這可以使用影片編輯應用程式來實現,讓標題可以覆蓋在影片上。
如果視障或視障人士僅以視覺化方式提供視訊或動畫中的資訊,或者配樂無法提供足夠的資訊,以視覺化方式瞭解發生的情況,將會遇到無障礙環境支援。
為滿足此成功標準,可採用兩種方法。 兩者皆可接受:
如何建立音訊描述視訊的確切詳細資訊,不在本指南中。 建立視訊和音訊描述可能很耗時,但其他Adobe產品可協助您完成這些工作。
此成功標準與標題(預錄)相同,因為它可解決聾人或聽障人士所經歷的無障礙環境障礙,但此成功標準涉及即時簡報,例如網路廣播。
請遵循上述標題(預先錄制)的指引。 但是,由於媒體的即時性質,必須盡快建立字幕布建,以因應目前的情況。 因此,您應考慮使用即時字幕或語音轉文字工具。
詳細說明超出本檔案的範圍,但下列資源可提供有用資訊:
此成功標準與音訊描述或媒體替代項目(預錄)相同,但作者必須提供更詳細的音訊描述,以符合等級AA。
遵循音訊說明或媒體替代項目(預錄)的指引。
准則1.3適應性:建立可以以不同方式呈現的內容(例如更簡單的版面),而不會遺失資訊或結構。
本准則涵蓋支援以下人員的必要要求:
可能無法存取作者在預設內容呈現中所呈現的資訊(例如,多欄版面或大量使用色彩和/或影像的頁面)。
可能會使用純音效,或是其他視覺顯示,例如大型文字或高對比度。
許多殘障人士使用的輔助技術都依賴結構資訊,以有效顯示或瞭解內容。此結構資訊可以採用頁標題、表行和列標題以及清單類型的形式。 例如,螢幕閱讀程式可讓使用者從標題到標題瀏覽頁面。 但是,當頁面內容只看起來是透過視覺樣式而非基礎HTML來呈現結構時,輔助技術就無法使用結構資訊,限制了其支援更輕鬆瀏覽的能力。
此成功標準的存在是為了確保此類結構資訊是透過HTML或其他編碼技術以程式設計方式提供,讓瀏覽器和輔助技術可存取並運用這些資訊。
AEM可讓您使用適當的HTML元素,輕鬆建構具有語義意義的網頁內容。 在RTE(文本元件)中開啟頁面內容,然後使用Paraformat菜單(段落符號)指定適當的結構元素(例如段落、標題等)。
您可以使用下列適用的元素,確保您的網頁已獲得適當的結構:
標題: 只要您已啟用RTE的協助功能,AEM就會提供3個頁面標題層級。您可以使用這些項目來識別內容的區段和子區段。標題1是標題的最高級別,標題3是最低級別。系統管理員可以配置系統以允許使用更多標題級別。
清單:您可以使用HTML來指定三種不同的清單類型:
<ul>
用於無序 列 (項目符號) 清單。使用元素來識別個別清 <li>
單項目。在RTE中,使用「項目符號列 表」表徵圖 。<ol>
元素用於編號清單。 使用<li>
元素來識別個別清單項目。 在RTE中,使用Numbered List表徵圖。如果要將現有內容變更為特定的清單類型,請反白標示適當的文字並選取適當的清單類型。 如先前顯示如何輸入段落文字的範例,適當的清單元素會自動新增至您的HTML。
在全螢幕模式中,會顯示個別 的「項目符號清單 」和「 編號清單」圖示。當未處於全螢幕模式時,單一「清單」圖示後面會提供這兩個 選項 。
表格:必須使用HTML表格元素來識別資料表格:
<table>
元素<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.2下的准則。
設計人員通常會專注在視覺設計功能上,例如顏色、形狀、文字樣式,或內容在呈現資訊時的絕對或相對位置。 這些設計技術在傳遞資訊方面非常強大(並且可以改善有認知無障礙需求的有視力的用戶的整體無障礙環境),但是盲人或視覺障礙的人可能無法訪問需要視覺識別屬性(如位置、顏色或形狀)的資訊。
同樣地,如果需要區分不同聲音(例如男性或女性口語內容)的資訊沒有反映在音頻內容的任何文本替代內容中,則對聽力有障礙的人會造成無障礙。
有關顏色替代項的要求,請參閱使用顏色。
請確定任何依賴頁面內容視覺特性的資訊,也會以替代格式顯示。
如果明白描述性詞語在非視覺化內容中有意義,則可接受使用。 例如,使用above和below通常是可接受的,因為它們分別表示特定內容項目之前和之後的內容;當內容被大聲朗讀時,這仍然有意義。
准則1.4可區分:讓使用者更輕鬆地檢視和聽取內容,包括將前景與背景分開。
此成功標準可特別處理色彩感知。 其他形式的感知涵蓋在適應性(1.3)中;包括程式化存取色彩和其他視覺化簡報編碼。
顏色是增強網頁美感的一種明顯有效的方式,在資訊傳遞方面也有很大的幫助。 但是,從失明到彩色視覺缺陷,都存在著一系列的視覺缺陷,這意味著有些人無法區分某些顏色。 這使得色彩編碼成為提供資訊的不可靠方式。
例如,有紅綠色視覺缺陷的人,將無法區分綠色和紅色。 他們可能會將這兩種顏色視為第三種顏色(例如,棕色),在這種情況下,他們將無法區分紅色、綠色和棕色。
此外,使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白列印成品的使用者無法察覺色彩。
進一步考慮的是介面元素的選擇的狀態(例如,制表符、切換按鈕等),它需要以除僅用顏色和超出視覺表現之外的其他方式傳達。 對於這些元素,額外使用圖樣、形狀和程式化資訊對於建立完全包容且不依賴特定意義的使用者體驗非常有用。
無論使用何種顏色來傳達資訊,請確定這些資訊是可用的,而不需要查看顏色。
例如,請確定文字中也明確提供由顏色提供的資訊。
如果使用顏色做為提供資訊的提示,您應提供額外的視覺提示,例如變更樣式(例如粗體、斜體)或字型。 這可協助視力低下或色彩視覺缺乏者識別資訊。 但是,它不能完全依賴,因為它不會幫助根本看不到頁面的人。 因此,(有時)提供隱藏文字或使用程式化解決方案(例如 Accessible Rich Internet Applications(ARIA)Web標準套件),將此資訊傳達給無視覺的使用者是很有用的。
使用螢幕閱讀軟體的使用者若同時播放其他音訊,就很難聽到語音輸出。 當螢幕閱讀器的語音輸出是以軟體為基礎(如今大多數),並透過與音效相同的音量控制來控制時,這一困難就會加劇。 此外,一些認知障礙者和神經發散者可能具有聽覺敏感性。 這些人會發現,無法變更音訊內容的音量等級會造成相當的中斷。
因此,使用者必須能夠關閉背景音效。
對音量的控制包括能夠將音量減小到零。
遵循如何符合成功准則1.4.2下的准則。
成功標準1.4.3
AA級
對比度(最小值):文字和影像的視覺呈現至少有4.5:1的對比率,但下列除外:
如需詳細資訊,請參閱瞭解非文字對比,協助確保內容作者瞭解非文字元素(包括圖示、介面元素等)的其他需求。
某些視覺障礙的人可能無法區分某些低對比色彩對。 如果以下情況,這些人可能會遇到無障礙環境支援問題:
純用於裝飾目的的文字會排除在此成功標準之外。
請確定文字與其背景對比充分。 對比率取決於相關文本的大小和樣式:
請記住,字型在轉換等同PT/PX/EM大小時可能會有所不同。
建議您在選擇適當的字型和網頁內容調整大小時,在可讀性和可用性方面運用良好的判斷力和錯誤。
要檢查對比度,請使用顏色對比工具,如Paciello Group Color Contrast Analyser或WebAIM顏色對比檢查器。 這些工具可讓您檢查顏色對,並報告任何對比問題。
或者,如果您不太在意指定頁面的外觀,可以選擇不指定背景和前景文字顏色。 不需要進行對比檢查,因為使用者的瀏覽器會決定文字和背景的顏色。
如果無法達到建議的對比度等級,您將需要提供頁面的替代等同版本(沒有顏色對比問題)的連結,或讓使用者根據自己的需求調整頁面色彩配置的對比度。
本成功准則的目的是確保以視覺化方式呈現文字,包括以文字為基礎的控制項(已顯示的文字字元,以便在與仍以ASCII↑[a1/]等資料格式顯示的文字字元可成功縮放,讓視覺障礙輕微的人直接讀取,而不需使用輔助技術(例如螢幕放大鏡)。 []使用者可從縮放網頁上所有內容中獲益,但文字最重要。
除了遵循如何符合成功准則1.4.4下的准則,您還可鼓勵內容作者在其頁面設計和字型大小(例如,互動式網頁設計)中使用流暢、有彈性的寬度和高度,讓讀者能夠調整文字大小。
Logotypes(屬於標誌或品牌名稱的文字)被視為必要項目。
當偏好特定文字樣式時,通常會使用文字影像;例如,logotype或如果文字是從其他來源產生(例如,掃描紙張檔案)。 但是,與使用HTML呈現的文字和使用CSS建立樣式的文字相比,文字的影像缺乏彈性來變更尺寸或外觀,這對於有視覺障礙或閱讀困難的人而言可能是必要的。
如果必須使用文字影像,請使用CSS將文字影像取代為HTML中的等同文字,讓文字以可自訂的方式使用。 有關如何實現此目的的示例,請參閱C30:使用CSS將文字取代為文字影像,並提供使用者介面控制項來切換。
這就是為了確保使用者可以使用鍵盤存取所有功能。
本「成功准則」的目的在於確保內容可透過鍵盤或鍵盤介面(以便使用替代鍵盤)運作。 當內容可透過鍵盤或替代鍵盤操作時,無視力的人(無法使用例如需要眼睛協調的老鼠等裝置),以及必須使用替代鍵盤或輸入裝置作為鍵盤模擬器的人,都可進行操作。 鍵盤模擬器包括語音輸入軟體、吹吸式軟體、螢幕上鍵盤、掃描軟體以及各種輔助技術和替代鍵盤。 視力低的個人也可能無法追蹤指標,如果能夠從鍵盤控制,就會發現軟體的使用更輕鬆(或僅限可能)。
遵循如何符合成功准則2.1.1下的准則。
本「成功准則」的目的是確保內容不會在網頁內容的子區段中以trap鍵盤焦點。 當頁面內結合多種格式並使用外掛程式或內嵌應用程式來轉換時,這是常見的問題。
有時網頁的功能會將焦點限制在內容的子部分(例如,模式對話)。 在這種情況下,您應提供一種方法,讓使用者能夠退出該內容的子部分(例如,ESC鍵關閉模態對話框,或「關閉」按鈕關閉模態對話框)。
遵循如何符合成功准則2.1.2下的准則。
這就是為了確保使用者有足夠的時間閱讀並採取行動。
本「成功准則」的目的在於確保為殘障人士提供適當的時間,讓他們盡可能與網頁內容互動。 失明、低視力、靈活度障礙和認知限制等殘障人士可能需要更多時間閱讀內容或執行功能,例如填寫線上表格。 如果Web函式與時間相關,某些用戶將難以在時間限制出現之前執行所需的操作。 這可能會使他們無法存取服務。 設計不依賴時間的功能將幫助殘障人士成功完成這些功能。 提供選項來停用時限、自訂時限長度或在時間限制發生之前請求更多時間,可協助那些需要超過預期時間的使用者順利完成工作。 這些選項會依對使用者最有幫助的順序列出。 停用時間限制比自訂時間限制長度好,這比在時間限制出現之前請求更多時間好。
遵循如何符合成功准則2.2.1下的准則。
注意事項有:
某些使用者可能會發現移動的內容會分散注意力,甚至是讓身體很痛苦,因此很難將注意力集中在頁面的其他部分。 此外,對於無法跟上動態文字腳步的人而言,這些內容可能很難閱讀。
根據內容的性質,在建立包含移動、閃爍或閃爍內容的網頁時,您可以套用下列一或多個建議:
准則2.3緝獲:切勿以已知會導致癲癇或身體反應的方式設計內容。
由於任何不符合此成功標準的內容都可能干擾使用者使用整個頁面的能力,因此網頁上的所有內容(無論是否用於符合其他成功標準)都必須符合此成功標準。 請參閱符合性要求5:非干擾。
在某些情況下,閃爍的內容可能導致感光性癲癇。 此成功標準可讓這些使用者存取並體驗所有內容,而不需擔心內容閃爍。
您應採取步驟,以確保套用下列技術:
准則2.4可導航:提供協助使用者導覽、尋找內容及判斷其所在位置的方式。
這可確保內容簡單易用,讓使用者輕鬆導覽。
本「成功准則」的目的,在於讓依序導覽內容的使用者更直接存取網頁的主要內容。 網頁和應用程式通常會有內容出現在其他頁面或螢幕上。 重複的內容區塊範例包括但不限於導覽連結、頁首圖形、選單和廣告影格。 就本規定而言,個別字詞、片語或單一連結等重複的小段不視為區塊。
遵循如何符合成功准則2.4.1下的准則。
此成功標準可協助每個人(不論是否有任何特定的損害)快速識別網頁內容,而不需完整閱讀網頁。 當在瀏覽器標籤中開啟多個網頁時,這特別有用,因為頁面標題會顯示在標籤中,因此可快速找到。
在AEM中建立新的HTML頁面時,您可以指定頁面標題。 請確定標題已充分說明頁面的內容和用途,尤其是任何獨特的方面,讓訪客可以快速識別內容是否與其需求實際相關。
編輯頁面時,您也可以編輯頁面標題,頁面資訊——屬 性可存取。
本「成功准則」的目的是確保當使用者依序瀏覽內容時,會以符合內容含義的順序遇到資訊,並可從鍵盤操作。 這可讓使用者對內容建立一致的心理模型,以減少混淆。 內容中可能會有不同順序反映邏輯關係。 例如,在由多個欄位和/或步驟組成的線上表單中移動元件,會反映內容中的邏輯關係。
遵循如何符合成功標準2.4.3下的准則。
對所有使用者而言,無論是否受到損害,透過適當的連結文字清楚指出連結的方向至關重要。 這可協助使用者決定是否實際要追蹤連結。 對有目光的使用者而言,當頁面上有數個連結時(尤其是頁面文字較多時),有意義的連結文字非常有用,因為有意義的連結文字可更清楚地指出目標頁面的功能。 某些輔助技術的使用者可以在單一頁面上產生所有連結的清單,如果連結文字既獨特又具資訊性,就可以更輕鬆地瞭解不符合上下文的連結文字。 然而,如果連結無法提供足夠的資訊,以準確描述連結將帶往何處,則有認知障礙的有視者可能會感到困惑。
首先,請確定連結的目的在連結的文字中已清楚說明。
連結應在各頁面上使用一致的措辭,尤其是導覽列。 例如,如果某個頁面上的特定頁面的連結名為Publications,請在其他頁面上使用該文字以確保一致性。
在編寫時,使用標題屬性會有一些問題,以確保頁面上顯示的類似連結提供有關目的地的唯一資訊(例如,「閱讀更多」通常會指一系列不同的目的地):
因此,雖然title屬性可用來提供連結的額外內容,但請注意其限制,請勿將它當做適當連結文字的替代項目。
當連結由影像組成時,請確定影像的替代文字說明連結的目的地。 例如,如果書架的影像設定為連結至某人的出版品,則替代文字應為John Smith』的出版物,而非Bookshelf。
或者,如果連結錨點除了影像元素以外還包含說明連結用途的文字(因此文字會出現在影像旁邊),請為影像使用空白alt屬性:
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>
上述程式碼片段為圖示,建議使用Image元件。
雖然建議提供識別連結目的的連結文字,而不需要額外的內容,但是可以認識到,這並非總是可能。 無上下文連結可用於下列情況,其HTML範例可在如何符合成功准則2.4.4中找到。
在某些情況下,如果頁面上有數個連結(其中每個連結以複雜但必要的詳細資訊提供連結的方向),則可以提供網頁的替代版本,以顯示完全相同的內容,但連結文字未如此詳細。
或者,可以使用指令碼,使得在連結本身內提供最少數量的文本,但在激活定位在頁面頂部的適當控制項時,連結文本被擴展進一步詳細。 類似的方法是使用CSS來隱藏完整連結,以免有目光的使用者看到,但仍會將它完整輸出給螢幕閱讀程式使用者。 **這不在本檔案範圍內,但有關如何實現此目標的更多資訊,請參閱更多資訊——連結用途(在內容中)(2.4.4)一節。
本「成功准則」的目的,在於讓使用者能以最符合其需求的方式來尋找內容。 使用者會發現,一種技術比另一種技術更容易使用或更容易理解。
即使是小型網站,也應該為使用者提供一些方向。 對於三、四個頁面網站(所有頁面皆從首頁連結),僅提供來自首頁和來自首頁的連結(首頁上的連結也可當成網站地圖)就足夠了。
遵循如何符合成功准則2.4.5下的准則。
本「成功准則」旨在協助使用者瞭解網頁中包含哪些資訊以及該資訊的組織方式。 當標題清晰且描述性強時,使用者可以更輕鬆地找到他們所尋找的資訊,並更輕鬆地瞭解內容不同部分之間的關係。 描述性標籤可協助使用者識別內容中的特定元件。
遵循如何符合成功標準2.4.6下的准則。
此成功標準的目的是協助使用者瞭解哪個元素具有鍵盤焦點。
人必須能夠知道多個元素中哪個元素具有鍵盤焦點。 如果螢幕上只有一個鍵盤可操作的控制項,則會符合成功標準,因為視覺設計只顯示一個鍵盤可操作的項目。
當成功標準顯示「操作模式」時,這是為了說明不一定總是顯示焦點指標的平台。 在大多數情況下,只有一種操作模式,因此會套用此成功准則。
遵循如何符合成功標準2.4.7下的准則。
此成功標準的目的是確保文字和其他語言內容正確呈現。 對於螢幕閱讀器使用者,這可確保內容正確發音,而視覺瀏覽器更可能正確顯示特定字元集。
為符合此成功標準,可使用頁面頂端的<html>
元素中的lang
屬性來識別網頁的預設語言。 例如:
如果頁面以英文寫入,<html>
元素應為:
<html lang = “en”>
而以西班牙文轉譯的頁面,則應採用下列標準:
<html lang = “es”>
在AEM中,建立頁面時會設定頁面的預設語言,但編輯頁面屬性時也可以變更。
AEM可進一步微調根語言的變化;例如,美國英語- en-us、英語- en-gb和加拿大英語- en-ca。 對於輔助技術而言,這種詳細程度通常是多餘的,不過可用於頁面內容的區域變化。
此成功准則的目的類似於「頁面語言」的「成功准則」,但適用於單一頁面上包含多種語言內容的網頁(例如,由於引文或不常見的借記字詞)。
套用此成功准則的頁面允許:
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>
在包含不同語言的名稱或城市,或使用預設語言中已司空見慣的借詞或片語(例如英文中的schadenfreude)時,您不必遵循此成功標準。
要使用適當的語言添加span元素,可以在RTE的源編輯模式中手動編輯HTML標籤,以便其讀取如上。 或者,系統管理員可將lang
屬性包含在RTE中(請參閱添加對其他HTML元素和屬性的支援)。
這就是要確保網頁的外觀和運作方式一致。
此成功標準的目的是確保在訪客瀏覽檔案時,功能可預測。 任何在接收焦點時能夠觸發事件的元件,都不得變更內容。 元件接收焦點時更改上下文的示例包括,但不限於:
焦點可以通過鍵盤(例如與控制項對開)或滑鼠(例如在文本欄位上按一下)移動到控制項。 將滑鼠移至控制項上時,除非指令碼實作此行為,否則不會移動焦點。 請注意,對於某些類型的控制項,按一下控制項也可能會啟動控制項(例如按鈕),而此控制項可能會啟動內容變更。
遵循如何符合成功准則3.2.1下的准則。
本「成功准則」的目的是確保輸入資料或選取表單控制項具有可預測的效果。 變更任何使用者介面元件的設定,會變更控制項中在使用者不再與其互動時會持續存在的某些方面。 因此,勾選核取方塊、在文字欄位中輸入文字或變更清單控制項中選取的選項會變更其設定,但啟動連結或按鈕則不會變更。 情境的變更會迷惑不解的使用者,讓他們不容易察覺變更,或容易被變更分心。 只有當使用者的動作顯然會發生這類變更時,才適合變更內容。
遵循如何符合成功准則3.2.2下的准則。
本「成功准則」旨在鼓勵使用者在一組網頁內與重複內容互動且需要多次找出特定資訊或功能的情況下,使用一致的簡報和版面。 低視覺的個人使用螢幕放大率,一次顯示螢幕的一小部分時,通常會使用視覺提示和頁面邊界來快速找出重複的內容。 對於視覺使用者而言,以相同順序呈現重複內容也很重要,因為視覺使用者在設計中使用空間記憶體或視覺提示來定位重複內容。
請務必注意,本節中使用「相同順序」一詞並非暗示無法使用子導覽功能表,或無法使用次導覽或頁面結構區塊。 相反地,此成功准則旨在協助使用者透過網頁與重複內容互動,以預測所尋找內容的位置,並在再次遇到時更快速找到。
用戶可以通過使用自適應用戶代理或通過設定首選項來根據順序發起更改,以便以對他們最有用的方式呈現資訊。
遵循如何符合成功准則3.2.3下的准則。
本「成功准則」的目的,在於確保一致識別在一組網頁中重複出現的功能元件。 使用螢幕閱讀程式的使用者在操作網站時採用的策略,是高度依賴使用者熟悉可能出現在不同網頁的功能。 如果相同的功能在不同的網頁上有不同的標籤(或更一般地說,是不同的可存取名稱),則網站的使用難度會大大增加。 這也可能令人困惑,並增加了對認知有限的人的認知負荷。 因此,一致的標籤將有所幫助。
這種一致性延伸到了文本替代項。 如果圖示或其他非文字項目具有相同的功能,則其文字替代項目也應保持一致。
如果網頁上有兩個元件,其功能都與一組網頁中其他頁面上的元件相同,則這3個元件必須保持一致。 因此,同一頁上的兩者將保持一致。
雖然在單一網頁內始終保持一致是最理想且最佳的作法,但3.2.4隻解決一組網頁內的一致性問題,而該組網頁中的多個網頁會重複某些內容。
遵循如何符合成功准則3.2.4下的准則。
本成功准則的目的是確保使用者知道發生錯誤,並可判斷錯誤的內容。 錯誤訊息應盡可能具體。 如果表單提交失敗,重新顯示表單並指出有錯誤的欄位不足以讓部分使用者察覺到發生錯誤。 例如,螢幕閱讀程式使用者在遇到其中一個指示器之前,不會知道有錯誤。 他們可能會在遇到錯誤指示器之前完全放棄表單,認為頁面無法運作。 根據WCAG中的定義,輸入錯誤是用戶提供的不被接受的資訊。 這包括:
網頁要求但使用者省略的資訊,或使用者提供但不符合要求資料格式或允許值的資訊。
例如:
遵循如何符合成功准則3.3.1下的准則。
提供說明以協助人們填寫表單是介面可用性的基本實務。 這樣做對於視覺或認知障礙的人特別有幫助,因為如果不是這樣,他們可能難以理解表單的佈局以及在特定表單域中提供的資料類型。
在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
)。 當尋找標籤文字的空間時,這項功能會很有用。
本「成功准則」的目的,在於確保使用者在可能的情況下收到適當的建議,以修正輸入錯誤。 input error的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下的准則。