此 網頁內容可及性指引(WCAG)2.1,由 萬維網聯盟的一個工作組,包含一套與技術無關的指引和成功標準,可協助身心障礙人士存取及使用網路內容。
作為介紹,該聯合會提供了一系列章節和支援檔案:
此外,請參閱:
指南分為三個符合級別:A級(最低)、AA級和AAA級(最高)。 簡要地說,這些級別的定義如下:
建立網站時,您必須決定要讓網站遵循的整體等級。
以下部分介紹 WCAG 2.1指引的層 與A級和AA級的相關成功標準 合格級別.
在本檔案中,我們使用下列項目:
原則1:可感知(Perceivable) — 資訊和用戶介面元件必須以用戶能夠感知的方式顯示給用戶。
准則1.1文本替代:為任何非文字內容提供替代文字的內容,以便將其變更為人們需要的其他形式,例如大型印刷品、盲文、語音、符號或更簡單的語言。
網頁上的資訊可以以許多不同的非文本格式提供,如圖片、視頻、動畫、圖表和圖形。 盲人或視力嚴重受損的人無法看到非文本內容,但他們可以通過螢幕閱讀器讀取文本內容或通過盲文顯示設備以觸覺形式顯示文本內容來訪問文本內容。 因此,通過以圖形格式提供內容的文本替代項,看不到圖形內容的人可以訪問內容提供的資訊的同等版本。
另一個有用的好處是,文本替代項使得非文本內容能夠根據搜索引擎技術編製索引。
對於靜態圖形,基本要求是為圖形提供等效文本替代。 您可以在 替代文字 欄位;如需核心元件的相關資訊,請參閱 影像.
部分現成可用的核心元件,例如 輪播 不提供 替代文字 欄位,將替代文字說明新增至個別影像,但有 標籤 欄位()協助工具 標籤),以取得Advertising Cloud的說明。
當您為AEM例項實作這些版本時,您的開發團隊必須設定這些元件以支援 alt
屬性,讓作者可將其新增至內容(請參閱新增支援其他HTML元素和屬性)。
部分現成可用的核心元件,例如 輪播 不提供 替代文字 欄位,將替代文字說明新增至個別影像,但有 標籤 欄位()協助工具 標籤),以取得Advertising Cloud的說明。
當您為AEM例項實作這些版本時,您的開發團隊必須設定這些元件以支援 alt
屬性,讓作者可將其新增至內容(請參閱 新增對其他HTML元素和屬性的支援)。
AEM需要 替代文字 欄位以預設填入。 如果影像純粹是裝飾性的,而替代文字是不必要的, 影像是裝飾 選項。
非文字內容有多種形式,因此替代文字的值取決於圖形在網頁中扮演的角色。 您可能會發現一些實用的一般規則包括:
需要替代文字的特定非文字內容類型可能包括:
graphic
或 image
);可提高使用的清晰度 screenshot
或 illustration
在替代文字說明中,但這取決於內容。 一致性是重要因素,應為整個製作團隊做出決策,並套用至整個使用者體驗。背景文字與前景文字之間應有適當的對比度;詳細討論 對比度(最低)(1.4.3).
准則1.2以時間為基礎的媒體:提供以時間為基礎的媒體的替代方案。
這涉及 時間型. 這涵蓋使用者可播放的內容(例如視訊、音訊和動畫內容),且可以預先錄制或即時資料流。
視訊和音訊的協助工具問題可能會發生:
使用不支援以特定媒體格式播放內容(例如AdobeFlash)的瀏覽器或裝置的使用者,也可能無法使用視訊或音訊。
以不同格式提供此資訊,例如文字(或無音訊的視訊音訊),可讓無法存取原始內容的使用者存取。
如果提供音頻或視頻內容作為已存在於相同網頁上的另一種格式內容的替代內容,則可能不需要另外的替代內容。
准則, 了解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中,使用 編號清單 表徵圖。如果要將現有內容更改為特定清單類型,請突出顯示相應的文本並選擇相應的清單類型。 如先前顯示如何輸入段落文字的範例所示,適當的清單元素會自動新增至您的HTML。
在全螢幕模式中,會顯示個別 的「項目符號清單 」和「 編號清單」圖示。當未處於全螢幕模式時,單一「清單」圖示後面會提供這兩個 選項 。
表格:必須使用HTML表元素來標識資料表:
<table>
元素<tr>
表格每一列的元素<th>
元素<td>
元素此外,可訪問的表還使用以下元素和屬性:
<caption>
元素可用來提供表格的可見標題。 字幕預設會出現在表格的正中,但可使用CSS適當定位。 註解以寫程式方式與表格相關聯,因此它是提供內容介紹的有用方法。<summary>
元素可協助無視的使用者提供視力不佳的使用者看得到的概要,以更輕鬆地了解表格中顯示的資訊。 若使用複雜或非常規的表格配置,此屬性特別實用(此屬性不會顯示在瀏覽器中,而只會讀出至輔助技術)。scope
屬性 <th>
元素用於指示儲存格代表特定列或特定欄的標題。 類似的方法是在複雜表格中使用標題和id屬性,其中資料儲存格可與一或多個標題相關聯。預設情況下,這些元素和屬性不直接可用,但系統管理員可以在 表屬性 對話框(請參見 新增對其他HTML元素和屬性的支援)。
若要開啟 表格 對話方塊中選取 表屬性 標籤:
然後,您就可以使用 儲存格屬性 若要選擇儲存格是資料儲存格還是標題儲存格:
強調:使用 <strong>
或 <em>
指示強調的元素。 請勿使用標題來反白標示段落中的文字。
突出顯示要強調的文本;
按一下「屬性」面板中顯示的 B 表徵圖( <strong>
for)或「屬性」面板中顯示 的「I 」表徵圖(for <em>
)(請確定已選 中HTML)。
標準AEM安裝中的RTE已設定為使用:
<b>
代表 <strong>
<i>
代表 <em>
實際上是一樣的,但 <strong>
和 <em>
較好,因為它們在語義上正確。 您的開發團隊可以設定RTE以使用 <strong>
和 <em>
(而非 <b>
和 <i>
),以開發您的專案例項。
複雜的資料表:在某些情況下,如果有具有兩個或多個標題級別的複雜表,則基本表屬性可能不足以提供所有必要的結構資訊。對於這些類型的複雜表格,需要使用header和 id屬性在標題及其相關儲存格之間建 立直 接 關係。
id屬性在現成可用的安裝中無法使用。 可透過在RTE中設定HTML規則和序列化程式來啟用。
例如,在下表的標題和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.
設計人員在展示資訊時,往往關注視覺設計特徵,如顏色、形狀、文本樣式或內容的絕對或相對位置。 這些設計技術在傳達資訊方面可能非常強大(而且可以改善視力障礙使用者對認知障礙需求的整體無障礙性),但盲人或視力障礙者可能無法存取需要視覺識別位置、顏色或形狀等屬性的資訊。
同樣,需要區分不同聲音(例如,男性或女性口語內容)的資訊,如果沒有反映在音頻內容的任何替代文本中,則會對聽力受損的人造成無障礙障礙。
有關顏色替代品的相關需求,請參閱 顏色的使用.
請確定任何仰賴頁面內容視覺特性的資訊也會以替代格式顯示。
如果明白描述性詞語在非視覺內容中有意義,則可接受使用。 例如,使用 abos 和 low 通常是可接受的值,因為它們分別暗示特定內容之前和之後的內容;當內容被朗讀時,這仍然有意義。
准則1.4可區分:讓使用者更輕鬆查看和聽取內容,包括將前景與背景分開。
此成功標準專門處理色彩感知。 其他形式的感知涵蓋於 適應性(1.3);包括對顏色的可寫程式訪問和其他可視演示編碼。
顏色是增強網頁審美吸引力的一種明顯有效的方法,也是資訊傳遞的有用手段。 然而,從失明到彩色視覺缺乏,都存在著一系列視覺缺陷,這意味著有些人無法區分某些顏色。 這使得顏色編碼成為提供資訊的不可靠方式。
例如,有紅綠色視覺缺陷的人將無法區分綠色的陰影和紅色的陰影。 他們可能會將這兩種顏色視為第三種顏色(例如棕色),在這種情況下,他們將無法區分紅色、綠色和棕色。
此外,使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白打印輸出的使用者無法察覺顏色。
進一步的考量是 已選取 介面元素的狀態(例如,制表符、切換按鈕等),除了僅以顏色傳達外,還需要以其他方式傳達,而不只是以視覺呈現。 對於這些元素,額外使用模式、形狀和程式化資訊對於建立不依賴特定意義的完全包容性用戶體驗很有幫助。
無論使用何種顏色來傳達資訊,都要確保資訊可用,而無需查看顏色。
例如,請確定文字中也明確提供顏色提供的資訊。
如果使用顏色作為提示來提供資訊,則應提供其他視覺提示,如更改樣式(如粗體、斜體字)或字型。 這有助於視力不足或彩色視力不足的人識別資訊。 不過,這無法完全依賴,因為這對根本看不到頁面的人沒有幫助。 因此,提供隱藏文字或使用程式化解決方案(例如 無障礙的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等資料形式顯示的文字字元])可成功縮放,讓視力有輕度障礙的人直接閱讀,而不需使用輔助技術,例如螢幕放大鏡。 使用者可從調整網頁上所有內容的比例中獲益,但文字是最重要的。
並遵循以下准則: 如何符合成功標準1.4.4 您可以鼓勵內容作者在其頁面設計和字型大小(例如,回應式網頁設計)中使用流暢、彈性的寬度和高度,讓讀者能夠調整文字大小。
Logotype(屬於標誌或品牌名稱的文字)被視為必要項目。
當偏好特定文字樣式時,通常會使用文字影像;例如,logotype或如果已從其他源生成文本(例如,掃描紙面文檔)。 然而,與以HTML呈現和使用CSS設定樣式的文字相比,文字的影像缺乏變更大小或外觀的彈性,這對於視覺障礙或閱讀困難的人來說可能是必要的。
如果必須使用文字影像,請使用CSS將文字影像取代為HTML中的等同文字,讓文字能以可自訂的方式提供。 如需如何達成此目標的範例,請參閱 C30:使用CSS將文本替換為文本的影像,並提供用戶介面控制項以切換.
這涉及確保用戶可以使用鍵盤訪問所有功能。
此成功標準旨在確保內容可在可能的情況下透過鍵盤或鍵盤介面操作(以便使用替代鍵盤)。 當內容可以通過鍵盤或替代鍵盤操作時,它可由無視覺的人(無法使用需要眼睛協調的滑鼠等設備)以及必須使用替代鍵盤或輸入設備作為鍵盤模擬器的人操作。 鍵盤模擬器包括語音輸入軟體、SIP和Puff軟體、螢幕鍵盤、掃描軟體以及各種輔助技術和備用鍵盤。 視力不佳的個人也可能難以追蹤指標,如果能從鍵盤控制指標,就會發現使用軟體更容易(或者只可能)。
遵循 如何符合成功標準2.1.1.
此成功標準的目的是確保內容不會 陷阱 鍵盤焦點位於網頁上內容的子區段內。 在頁面中結合多種格式並使用外掛程式或內嵌應用程式轉譯時,這是常見的問題。
有時網頁的功能會將焦點限制在內容的子區段(例如,強制回應對話)。 在這種情況下,您應提供讓使用者能夠退出該內容區段的方法(例如,ESC鍵會關閉強制回應對話方塊,或是Close按鈕會關閉強制回應對話方塊)。
遵循 如何符合成功標準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.
此成功標準的目的在於確保文字和其他語言內容正確轉譯。 若是螢幕助讀程式使用者,這可確保內容正確發音,而視覺瀏覽器更可能正確顯示特定字元集。
為符合此成功標準,可使用 lang
屬性 <html>
元素。 例如:
若以英文撰寫, <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>
在包含不同語言的名稱或城市,或使用在預設語言中已司空見慣的借詞或片語時(例如 幸福 英文)。
若要新增跨度元素(使用適當的語言),您可以在RTE的來源編輯模式中手動編輯HTML標籤,使其如上所示。 或者, lang
屬性可由系統管理員包含在RTE中(請參閱 新增對其他HTML元素和屬性的支援)。
這涉及確保網頁的外觀和操作方式一致。
此成功標準的目的,是在訪客瀏覽檔案時,確保功能可預測。 任何元件若能在收到焦點時觸發事件,則不得變更內容。 元件收到焦點時變更內容的範例包括,但不限於:
焦點可以通過鍵盤(例如,對控制項進行Tab鍵操作)或滑鼠(例如,按一下文本欄位)移動到控制項。 將滑鼠移到控制項上不會移動焦點,除非指令碼實施此行為。 請注意,對於某些類型的控制項,按一下控制項也可以激活控制項(例如按鈕),這反過來又可以啟動上下文中的更改。
遵循 如何符合成功標準3.2.1.
此成功標準的目的是確保輸入資料或選取表單控制項具有可預測的效果。 變更任何使用者介面元件的設定,會變更控制項中某些方面,而這些方面會在使用者不再與其互動時持續存在。 因此,勾選核取方塊、在文字欄位中輸入文字,或變更清單控制項中選取的選項,都會變更其設定,但啟動連結或按鈕則否。 內容變更可能會混淆無法輕鬆感知變更或容易因變更而分心的使用者。 唯有當使用者的動作顯然會發生這類變更時,才適合變更內容。
遵循 如何符合成功標準3.2.2.
此成功標準旨在鼓勵使用者在一組網頁內與重複內容互動,且需要多次尋找特定資訊或功能時,使用一致的呈現和版面。 視覺低的個人若同時使用螢幕放大率來顯示一小部分螢幕,通常會使用視覺提示和頁面邊界來快速找出重複的內容。 對於在設計中使用空間記憶或視覺提示來定位重複內容的視覺使用者而言,以相同順序呈現重複內容也很重要。
請務必注意,本節中使用「相同順序」一詞並不代表無法使用子導覽功能表,或無法使用次導覽區塊或頁面結構。 相反地,此成功標準旨在協助使用者在網頁上與重複內容互動,以便預測所尋找內容的位置,並在再次遇到時更快速找到。
用戶可以通過使用自適應用戶代理或設定首選項來啟動順序的更改,以便以對他們最有用的方式顯示資訊。
遵循 如何符合成功標準3.2.3.
此成功標準旨在確保一致識別一組網頁中重複出現的功能元件。 操作網站時使用螢幕助讀程式的人採用的策略是,他們非常依賴於對可能出現在不同網頁的功能的熟悉。 如果相同的函式在不同的網頁上具有不同標籤(或更一般地說,不同的可存取名稱),則網站的使用難度會大得多。 這也可能令人困惑,並增加了認知局限性人群的認知負荷。 因此,一致的標籤將有所幫助。
這種一致性延伸到了文本替代項。 如果圖示或其他非文字項目具有相同的功能,則其替代文字也應一致。
如果網頁上有兩個元件,且兩者的功能與一組網頁中其他頁面上的元件相同,則這三個元件必須一致。 因此,同一頁上的兩者將保持一致。
雖然理想且最佳實務一律在單一網頁內保持一致,但3.2.4僅處理一組網頁內的一致性,該組網頁中的多個頁面上重複某項目。
遵循 如何符合成功標準3.2.4.
此成功標準旨在確保使用者知道發生錯誤,並可判斷錯誤。 錯誤訊息應盡可能具體。 在表單提交失敗的情況下,重新顯示表單並指出錯誤中的欄位,不足以讓部分使用者察覺發生錯誤。 例如,螢幕助讀程式的使用者在遇到其中一個指標前,將不會知道有錯誤。 他們可能會在遇到錯誤指標前完全放棄表單,認為頁面無法運作。 根據WCAG中的定義, 輸入錯誤 是使用者提供的未接受的資訊。 這包括:
網頁所需但用戶所省略的資訊,或用戶所提供但不符合所需資料格式或允許值的資訊。
例如:
遵循 如何符合成功標準3.3.1.
提供說明以協助使用者填寫表單是介面可用性良好實務的基本部分。 這麼做對於視覺或認知功能障礙的人特別有幫助,因為他們原本可能很難理解表單的版面配置,以及要在特定表單欄位中提供的資料類型。
在AEM WKND示範專案中,新增表單元件時(例如 文字欄位,前往頁面。 此預設標題取決於元件類型。您可以在 標題和文字 頁簽。 務必確保標籤可協助使用者了解與每個表單元件相關聯的資料。
此 標題 欄位必須用於欄位元素,因為它提供可用於輔助技術的標籤。 僅在欄位旁的文字中寫標籤是不夠的。
對於某些表單元件,您也可以使用「隱藏標題」核取方塊以視覺化方式 隱藏標籤 。以此方式隱藏的標籤仍適用於輔助技術,但無法顯示在螢幕上。雖然這在某些情況下是個好方法,但通常最好盡可能加入視覺標籤,因為有些使用者可能會看到畫面的一小部分 (一次看一個欄位),並需要標籤來正確識別欄位。
其中使用影像按鈕(例如 影像按鈕 WKND專案的元件) 標題 欄位 標題和文字 編輯對話方塊的索引標籤實際上會提供影像的替代文字,而非標籤。 因此,在以下範例中,包含文字的影像 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.