由於AEM 6.4已棄用傳統UI,因此本頁面的內容並未針對WCAG 2.1更新。
如需AEM和WCAG 2.1的相關詳細資訊,請參閱下列頁面:
WCAG 2.0 包含一系列無需仰賴技術的指引和成功標準,有助身心障礙人士存取與使用網路內容。
另請參閱:
這些指南會根據三個一致性層級進行分級:A級(最低)、AA級和AAA級(最高)。 簡而言之,層級的定義如下:
建立網站時,您必須決定要讓網站遵循的整體等級。
下節會顯示 WCAG 2.0指引 具有A級和AA級的相關成功標準 一致性層級.
由於某些型別的內容無法滿足所有AAA級成功標準,因此不建議將此符合程度作為一般原則來要求。
本檔案使用下列專案:
准則1:可感知 — 資訊和使用者介面元件必須以使用者可感知的方式呈現給使用者。
指引1.1替代文字:為任何非文字內容提供替代文字,以便可以變更為人們需要的其他形式,例如大字型、盲文、語音、符號或更簡單的語言。
網頁上的資訊可以用許多不同的非文字格式提供,例如圖片、影片、動畫、圖表和圖形。 失明或嚴重視力障礙的人無法看到非文字內容,但他們可以透過熒幕閱讀器閱讀文字內容,或透過盲文顯示裝置以觸覺形式呈現文字內容。 因此,透過以圖形格式提供替代內容的文字內容,看不到圖形內容的人可以存取內容所提供的資訊的同等版本。
另一個有用的優點是,替代文字可讓搜尋引擎技術為非文字內容編制索引。
對於靜態圖形,基本要求是為圖形提供對等文字替代文字。 此方法的完成位置為 替代文字 欄位:
有些現成可用的元件(例如 Carousel 和 Slideshow )不提供將替代文字說明新增至影像的方式。當針對您的AEM例項實作這些元件的版本時,您的開發團隊應設定這些元件以支援 alt
屬性。 這麼做可確保作者將其新增至內容(請參閱 新增對其他HTML元素和屬性的支援)。
此 替代文字 欄位位於 進階 的影像屬性標籤 影像 元件對話方塊:
AEM新增 替代文字 預設為影像。 對於傳統UI,建立預設屬性的方式有兩種不同的情況,不過預設值可能不足以作為替代值,並且可能必須在中編輯 進階 影像屬性標籤:
影像會從使用者的硬碟上傳。 如果您將影像元件新增至頁面,然後從硬碟或其他來源選擇影像,預設值為 替代文字 是 file
. 此值必須在 進階 影像屬性索引標籤。 再次重申,此值不會顯示在 替代文字 欄位,但值變更時,新值會顯示在「 」欄位中。
從數位資產存放庫新增影像。 如果您將影像從數位資產存放庫拖曳至網頁,則 標題 和 替代文字 該影像的值取自該影像的中繼資料。
在上述兩種情況下,預設值 替代文字 值在中不可見 進階影像屬性 標籤。 若要變更預設值,只需在 替代文字 欄位。
如果您的影像純粹是裝飾性質(請參閱 建立良好的替代文字),則可在 替代文字 使用空格鍵的欄位。 這麼做會建立一個空白 alt
屬性,會提示熒幕助讀程式忽略影像。
有多種形式的非文字內容,因此替代文字的值取決於圖形在網頁中所扮演的角色。 一些經驗法則包含下列內容:
替代文字應簡潔明瞭,但能清楚擷取非文字內容所提供的基本資訊。
應避免過長的說明(超過100個字元)。 如果替代文字需要更多細節:
替代文字不應復寫相同頁面上附近文字表單中提供的內容。 請記住,許多影像都是已涵蓋在頁面文字中的點插圖,因此可能已經存在詳細的替代文字。
如果非文字內容是另一個頁面或檔案的連結,且沒有其他文字構成相同連結的一部分,則影像的替代文字必須指出連結的目的地。 它不能描述影像。
如果非文字內容包含在按鈕元素中,且沒有文字構成相同按鈕的一部分,則影像的替代文字必須指出按鈕的功能,而非說明影像。
您可以為影像指定空白(null)的替代文字,但前提是影像沒有替代文字。 例如,它是純粹的裝飾圖形。 或者,如果頁面文字中已存在對等文字。
此 W3C草稿:用於提供實用替代文字的HTML5技術 提供更多詳細資訊,以及針對不同型別影像提供適當替代文字的範例。
需要替代文字的特定非文字內容型別可能包括:
這些是人物、物件或地點的影像。 請思考像片在頁面中的角色;適當的對等文字可能是 像片 [物件],但可能取決於周圍的文字。
傳送特定資訊的小型象形圖(圖形)。 每個頁面和網站都必須使用一致的量度。 圖示在頁面或網站上的所有例項都應使用相同的簡短替代文字,除非這樣做會造成相鄰文字不必要的重複。
這些通常代表數值資料。 因此,提供替代文字的一個選項可能是包含圖表或圖形中顯示的主要趨勢的簡短摘要。 如有需要,也可在文字中使用 說明 中的欄位 進階 影像屬性索引標籤。 此外,您也可以在頁面或網站的其他位置,以表格形式提供來源資料。
若要提供此範例圖表的替代選項,請新增簡明的 alt
文字移至影像本身,然後以全文字替代文字跟隨影像。
<p><img src="figure1.gif" alt="Figure 1" ></p>
<p> Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</p>
上述程式碼片段僅用於說明順序。 使用 影像 元件,而非 img src
以上使用的參考。
在AEM中,您可以使用 替代文字 和 說明 影像設定對話方塊中的欄位 — 如所示 如何達到標準 — 非文字內容(1.1.1).
對於提供空間資料的圖形(例如。 若要支援描述物件或程式之間的關係),請確定關鍵訊息是以文字格式提供。對於地圖,提供等同全文的地圖可能不切實際,但如果提供地圖以幫助人們找到特定位置的方式,則地圖影像的替代文字可以簡短地指出 X的地圖,接著在頁面其他位置的文字中或透過 說明 中的欄位 進階 的標籤 影像 元件。
驗證碼是 完全自動化的公用圖靈測試,將電腦和人類區分開來. 這是用於網頁的安全性檢查,可區分人類與惡意軟體,但可能會造成協助工具障礙。 這些影像會要求使用者描述他們所看到的內容,以便通過安全性測試。 無法提供影像的替代文字,因此您必須考慮替代非圖形解決方案。
W3C提供數種建議,例如: 這些方法各有其優缺點。
*邏輯謎題
*使用聲音輸出而非影像
*限制使用帳戶和垃圾郵件篩選器。
這些影像是使用階層式樣式表(CSS)而非HTML來達成。 無法指定替代文字值。 因此,背景影像不應提供重要的文字資訊,即使提供,頁面文字中也必須提供此資訊。
不過,當影像無法顯示時,請務必顯示替代背景。
背景和前景文字之間應有適當的對比等級。 此對比將在中更詳細地討論 對比(最小) (1.4.3).
此資訊會處理以下內容的網頁內容: 基於時間. 這涵蓋使用者可播放的內容(例如視訊、音訊和動畫內容),且可以是預先錄製或即時資料流。
成功標準1.2.1
A級
純音訊和純視訊(預先錄製):對於預先錄製的純音訊和預先錄製的純視訊媒體,除非音訊或視訊是文字的替代媒體,且標示清楚如下,否則情況如下:
下列使用者可能會遇到視訊與音訊的無障礙問題:
使用不支援以特定媒體格式(例如AdobeFlash)播放內容之瀏覽器或裝置的使用者,也可能無法播放視訊或音訊。
以不同的格式提供這項資訊,例如文字(或沒有音訊的視訊),可以讓無法存取原始內容的人存取這些資訊。
如果內容是預先錄製不含視訊的音訊(例如播客):
成績單應為HTML頁面,其中包含所有口語和重要非口語內容的同等文字。 它應該也會指出說話者、設定說明、聲音表情,以及其他重要音訊的說明。
如果內容是無音訊的動畫或預先錄製的視訊:
如果音訊或視訊內容是作為網頁上其他格式內容的替代提供,則不需要遵循上述要求。 例如,如果影片說明文字指示的清單,則此影片不需要替代文字,因為文字指示已經是影片的替代文字。
在AEM網頁中插入多媒體(尤其是Flash內容)與插入影像類似。 不過,由於多媒體內容遠不止是靜態影像,因此對於控制多媒體的播放方式,有各種不同的設定和選項。
將多媒體與資訊性內容搭配使用時,您也必須建立替代內容的連結。 例如,若要包含文字記錄,請建立HTML頁面以顯示記錄,然後在音訊內容旁邊或下方新增連結。
耳聾或聽力缺佳的人無法或很難存取音訊內容。 註解是口語和非口語音訊的對等文字,會在視訊期間的適當時間顯示在熒幕上。 它們可讓無法聽到音訊的人瞭解正在發生的事情。
如果視訊或動畫的相同頁面上有適當的文字或非文字等同專案(直接提供等同資訊),則不需要註解。
註解可以是:
儘可能使用隱藏式字幕。 它讓使用者可以選擇是否檢視註解。
對於隱藏式字幕,請建立並提供適當格式的同步字幕檔案,例如 SMIL,以及視訊檔案。
請參閱中的教學課程 更多資訊 — 字幕(預先錄製)(1.2.2). 請務必提供附註,讓使用者知道有字幕可觀看影片。
如果您必須使用開啟的註解,請將文字內嵌到視訊曲目中。 這個方法是使用視訊編輯應用程式來達成,該應用程式允許將標題重疊在視訊上。
如果影片或動畫中的資訊僅以視覺效果顯示,失明或視障人士會遇到協助工具障礙。 或者,如果音軌提供的資訊不足,無法透過視覺效果瞭解正在發生的事情。
您可採取兩種方法來達到此成功標準。 任一專案皆可接受:
為視訊內容加入其他音訊說明。 您可以透過下列三種方式之一達成此方法:
在現有對話方塊中暫停期間,提供未顯示在現有音軌中的場景變更資訊;
提供包含原始音軌的全新、額外和選購音軌,但也包含有關場景變更的額外音訊資訊。
建立視訊內容的第二個版本,以允許擴充音訊說明。 這樣做會減少在現有對話方塊之間提供詳細音訊說明的困難,方法是在適當的時間暫時暫停音訊和視訊。 因此,在動作再次開始之前,可以輸入更長的音訊說明。 如同上一個範例,最好將此作為選用的額外音訊曲目提供,以防止對不需要額外說明的使用者造成中斷。
提供文字稿,其為視訊或動畫的音訊與視覺元素的適當對等文字。 在適當的情況下,應包括說話者的指示、語調的描述、語音表情。 視其長度而定,您可以將文字記錄放在與視訊或動畫相同的頁面上,或放在另一個頁面上;如果您選擇後一個選項,請在視訊或動畫旁提供文字記錄的連結。
本指南不涵蓋如何建立音訊描述視訊的確切細節。 建立視訊和音訊說明可能相當耗時,但其他Adobe產品可協助您完成這些工作。 如果您在Adobe Flash Professional中建立內容,您也應該建立指令碼,提示使用者下載合適的外掛程式,並透過 <noscript>
元素。
此成功標準與 註解(預先錄製) 因為除了此成功標準需要處理網路直播等即時簡報之外,此標準還能解決耳聾或聽力缺佳使用者遇到的協助工具問題。
遵循提供的指引 註解(預先錄製) 以上。 然而,由於媒體的即時性質,提供註解必須儘快建立,並對正在發生的事情做出回應。 因此,您應該考慮使用即時字幕或語音轉文字工具。
詳細指示不在本檔案的涵蓋範圍內,但下列資源提供有用的資訊:
此成功標準與 音訊描述或替代媒體(預先錄製)但作者必須提供更詳細的音訊說明才能符合AA級標準。
遵循提供的指引 音訊描述或替代媒體(預先錄製).
指南1.3可調整:建立能以不同方式呈現的內容(例如更簡單的版面),而不會遺失資訊或結構。
本指引涵蓋支援以下人員所需的需求:
可能無法存取作者在中呈現的資訊 標準 二維、多欄、彩色網頁配置
可能使用純音訊或替代視覺顯示,例如大型文字或高對比度。
殘障人士使用的許多輔助技術都仰賴結構性資訊來有效顯示或輸出內容。 此結構資訊可以採用頁面標題、表格列與欄標題,以及清單型別的形式。 例如,熒幕助讀程式可讓使用者在頁面中從標題導覽至標題。 但是,當頁面內容似乎只有透過視覺樣式而非基礎HTML的結構時,則沒有可用於輔助技術的結構資訊,限制其支援更輕鬆瀏覽的能力。
此成功標準旨在確保透過HTML提供這類結構資訊,以便瀏覽器和輔助技術可存取並利用這些資訊。
AEM可讓您使用適當的HTML元素輕鬆建構網頁。 在RTE (文字元件)中開啟頁面內容,並使用 格式 功能表以指定適當的結構元素(例如段落和標題)。
下圖顯示已設定為段落文字樣式的文字;使用的原始程式碼檢視顯示它有正確的開啟和關閉 <p> 和 </p> 標籤之間。
請確定您的網頁已透過以下步驟指定了適當的結構:
只要您已啟用RTE的協助工具功能(請參閱 AEM與協助工具),AEM提供三個層級的頁面標題。 您可以使用這些項目來識別內容的區段和子區段。標題1是標題的最高級別,標題3是最低級別。系統管理員可以配置系統以允許使用更多標題級別。
下圖示範不同標題型別的範例。
使用或元素來指示強調。 請勿使用標題來反白標示段落中的文字。
*反白標示您要強調的文字;
*按一下「**屬性**」面板中顯示的​**B**​圖示(&lt;strong&gt;)或​**I**​圖示(&lt;em&gt;)(請確定已選取HTML)。
標準AEM安裝中的RTE設定為使用:
雖然兩種形式效果相同,但偏好使用和,因為從語義上來講,它們才是正確的HTML標籤。 您的開發團隊可以在開發專案執行個體時將RTE設定為使用和(而非和)。
使用清單:您可以使用HTML來指定三種不同的清單類型:
<ul>
元素用於 未排序 清單(專案符號)清單。 識別個別清單專案時會使用 <li>
元素。在RTE中,使用 專案符號清單 圖示。
<ol>
元素用於 編號 清單。 識別個別清單專案時會使用 <li>
元素。在RTE中,使用 編號清單 圖示。
如果要將現有內容變更為特定清單型別,請反白適當的文字並選取適當的清單型別。 如前一個顯示段落文字輸入方式的範例一樣,適當的清單元素會自動新增至您的HTML,但您可以在來源編輯檢視中檢視它。
此 <dl>
RTE不支援元素。
資料表格必須使用HTML表格元素加以識別:
*一個'<table>'元素
* a `<tr>'表格中每一列的元素
* a `<th>'每個列和欄標題的元素
* a `<td>'每個資料儲存格的元素
表格應透過 表格 元件。 雖然可以在文字元件中建立表格,但不建議這樣做。
此外,可存取的表格會使用下列元素和屬性:
* 「<caption>'元素用於提供表格的可見標題。 字幕預設會顯示在表格上方,但可以使用CSS適當地放置字幕。 註解會以程式設計方式與表格相關聯,因此是一種提供內容簡介的實用方法。
* 「<h3 class="summary">'元素透過提供視力正常使用者可看到的摘要資訊,協助失明使用者更輕鬆地瞭解表格中呈現的資訊。 這在使用了複雜或非常規表格佈局時特別有用(此屬性不會顯示在瀏覽器中,只會由輔助型技術讀取)。
*的'scope'屬性<th>'元素是用來指出儲存格是否代表特定列的標題,或代表特定欄的標題。 在複雜的表格中使用標題和id屬性也是類似的方法,其中資料儲存格可能會與一個或多個標題相關聯。
依預設,這些元素和屬性不直接可用,但系統管理員可以在以下位置新增對這些值的支援: 表格屬性 對話方塊(請參閱 新增對其他HTML元素和屬性的支援)。
新增 表格,您可以設定 表格屬性 使用對話方塊。
*適當的​**標題**。
*理想情況下,請移除​**Width**、**Height**、**Border**、**Cell邊框間距**、**Cell間距**​的任何預設值。 因為這些屬性可以在全局樣式表中設定。
然後,您可以使用 儲存格屬性 若要選擇儲存格是資料儲存格或標題儲存格,以及如果是標題儲存格,要與列或欄相關,還是與兩者相關,請執行下列動作:
有時候,如果有具有兩個或多個標題層級的複雜表格,則基本的「表格屬性」可能不足以提供所有必要的結構資訊。 對於這些型別的複雜表格,必須使用標題與其相關儲存格建立直接關係 頁首 和 id 屬性。 例如,在下表的標題和ID中,會對輔助技術使用者進行程式化關聯。
ID屬性無法在現成安裝中使用。 可透過在RTE中設定HTML規則和序列化程式來啟用它。
表格應透過 表格 元件。 雖然可以在文字元件中建立表格,但不建議這樣做。
<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.4可區分:讓使用者更容易檢視和聆聽內容,包括將前景與背景分開。
此成功標準特別針對色彩感知。 其他形式的認知包含在 可調整(1.3);包括程式化存取色彩和其他視覺簡報編碼。
色彩是增強網頁審美吸引力的有效方式,在傳達資訊方面也很有用。 然而,視覺障礙有很多種,從失明到色覺缺陷,這表示有些人無法分辨某些顏色。 這個問題使得色彩編碼成為提供資訊的不可靠方式。
例如,有紅 — 綠色覺缺陷的人無法區分綠色陰影和紅色陰影。 他們可能會將這兩種顏色視為第三種顏色(例如,棕色),在這種情況下,他們無法區分紅色、綠色和棕色。
此外,使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白列印成品的人無法察覺顏色。
無論在何處使用顏色來傳達資訊,請務必提供資訊,而不需要看到顏色。
例如,請確定色彩提供的資訊也明確地以文字提供。 下圖顯示色彩和文字如何表示座位的效能可用性:
效能 |
可用性 |
星期二3月16日th |
可用名額 |
星期三3月17日th |
可用名額 |
星期四3月18日th |
已售出 |
如果使用顏色作為提供資訊的提示,您應該提供額外的視覺提示,例如變更樣式(例如粗體、斜體)或字型。 這有助於視力缺佳或色覺辨認障礙的人識別資訊。 然而,這並不能完全依賴,因為這對於完全看不到頁面的使用者而言並無助益。
成功標準1.4.3
AA級
對比度(最小):文字的視覺呈現和影像的對比度至少為4.5:1,以下除外:
某些視力障礙的人可能無法分辨某些低對比顏色配對。 如果發生下列任一情況,這些人員可能會發生協助工具問題:
純粹用於裝飾目的的文字會從此成功標準中排除。
請確定文字與其背景的對比度已足夠。 對比率視相關文字的大小和樣式而定:
若要檢查對比率,請使用色彩對比工具,例如 Paciello Group色彩對比分析器 或 WebAIM色彩對比檢查程式. 這些工具可讓您檢查顏色配對,並報告任何對比問題。
或者,如果您不太在意頁面外觀的指定,則可以選擇不指定背景和前景文字顏色。 不需要檢查對比,因為使用者的瀏覽器會決定文字和背景的顏色。
如果無法滿足建議的對比等級,請提供替代對等頁面版本的連結(沒有色彩對比問題)。 或者,讓使用者根據自己的需求調整頁面色彩配置的對比。
成功標準1.4.5
AA級
文字的影像:如果使用的技術可以達到視覺呈現效果,文字會用來傳遞資訊,而非文字的影像,但下列專案除外:
標誌型別(屬於標誌或品牌名稱一部分的文字)被認為是必要的。
當偏好文字的特定樣式時,通常會使用文字的影像;例如,商標標誌或從其他來源產生的文字(例如,紙質檔案的掃描)。 然而,與使用CSS以HTML呈現和樣式化的文字相比,文字影像在變更大小或外觀方面缺乏靈活性,而這對於有視覺障礙或閱讀困難的人可能是必要的。
如果必須使用文字的影像,請使用CSS將文字的影像取代為HTML的對等文字,以便可自訂文字使用。 如需範例,請參閱 C30:使用CSS將文字取代為文字的影像,並提供使用者介面控制項以進行切換.
成功標準2.2.2
A級
暫停、停止、隱藏:對於移動、閃爍、捲動或自動更新的資訊,符合下列情況:
需要注意的要點包括:
某些使用者可能會發現移動的內容會讓人分心,而且難以將注意力集中在頁面的其他部分。 此外,對於無法跟上移動文字進度的人來說,這類內容可能很難閱讀。
根據內容的性質,您可以在建立包含移動、閃爍或閃爍內容的網頁時,套用下列一或多個建議:
由於任何不符合此成功標準的內容都可能干擾使用者使用整個頁面的能力,因此網頁上的所有內容(無論是否用於符合其他成功標準)都必須符合此成功標準。 另請參閱 一致性需求5:不干擾.
在某些情況下,閃爍的內容會導致光敏性癲癇發作。 此成功標準可讓這類使用者存取及體驗所有內容,而不需擔心內容閃爍問題。
採取步驟以確保套用下列技術:
此成功標準可協助每個人(無論是否有任何損傷)快速識別網頁內容,而不需完整閱讀頁面。 在瀏覽器標籤中開啟數個網頁時,此設計相當實用,因為頁面標題會顯示在標籤中,因此可快速找到。
在AEM中建立新HTML頁面時,您可以指定頁面標題。 請確定標題足以說明頁面內容,讓訪客可快速確定內容是否符合其需求。
編輯頁面時,您也可以編輯頁面標題,存取方式為 Sidekick - 頁面 標籤 — 頁面屬性……
不論使用狀況為何,透過適當的連結文字清楚指出連結的方向至關重要。 此設計可協助使用者決定是否實際想要追蹤連結。 對於視力正常的使用者,當頁面上有多個連結時(尤其是頁面含有大量文字時),有意義的連結文字會很有用,因為有意義的連結文字可更清楚指出目標頁面的功能。 雖然輔助技術(可在單一頁面上產生所有連結的清單)的使用者可以更輕鬆地脫離上下文理解連結文字。
首先,請確定連結的文字中已清楚說明連結的用途。
錯誤範例:
好範例:
連結的用語在各個頁面中應保持一致,尤其是導覽列。 例如,如果特定頁面的連結已命名為 出版物 請在一個頁面上使用其他頁面上的文字,以確保一致性。
然而,在撰寫時,圍繞標題的使用有一些問題:
因此,雖然title屬性可用於為連結提供額外內容,請注意其限制,且請勿將其用作適當連結文字的替代方案。
如果連結是由影像所組成,請確定影像的替代文字描述了連結的目的地。 例如,如果書架影像設定為個人出版物的連結,則替代文字應該寫成 約翰·史密斯的出版物 而非 書架.
或者,如果連結錨點包含描述連結用途以及影像元素的文字(因此文字會出現在影像旁),請為影像使用空的alt屬性:
<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith's publications
</a>
以上程式碼片段僅供說明之用,建議您使用 影像 元件。
雖然提供不需要額外內容即可識別連結目的的連結文字是一種可取的方法,但該方法並不認為始終可行。 與內容無關的連結可用於下列情況,其HTML範例可在下列位置找到: 如何達到成功標準2.4.4.
有時候,當一個頁面上有數個連結(每個連結都會提供複雜但必要的詳細資訊中的連結方向)時,最好提供其他版本的網頁,此網頁會顯示完全相同的內容,但連結文字的詳細資訊並不多。
另外,也可以使用指令碼,以便在連結本身中提供最少的文字。 但是,在啟動指向頁面頂端的適當控制項時,連結文字會 已展開 以取得更詳細的資料。 類似的方法是使用CSS來 隱藏 視力正常的使用者提供的完整連結,但還是會以全熒幕方式輸出給熒幕助讀程式使用者。 這不屬於本檔案的範圍,但如需如何達成此目標的詳細資訊,請參閱 更多資訊 — 連結目的(在內容中) (2.4.4) 區段。
此成功標準旨在確保文字和其他語言內容正確呈現。 對於熒幕助讀程式使用者,這可確保內容正確發音,而視覺瀏覽器則更有可能正確顯示特定字元集。
為達到此成功標準,可使用以下識別網頁的預設語言 lang
中的屬性 <html>
頁面頂端的元素。 例如:
<html>
元素應為:<html lang = "en-gb">
<html lang = "en-us">
在AEM中,您的頁面預設語言是在建立頁面時設定,但在編輯頁面時也可以變更,頁面可由 Sidekick - Page 標籤- Page Properties…存取- Advanced 頁籤。
此成功標準的用途與成功標準類似 頁面語言,但適用於單一頁面上包含多種語言內容的網頁(例如,由於引號或不常見的借出文字)。
套用此成功標準的頁面允許:
此 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</span>.</p>
包含不同語言的人名或城市,或使用預設語言中常見的外來詞或短語時(例如 幸災樂禍 (英文版)。
若要使用適當的語言新增span元素,您可以在RTE的來源編輯模式中手動編輯HTML標示,使其顯示如上。 或者 lang
屬性可由系統管理員包含在RTE中(請參閱 新增對其他HTML元素和屬性的支援)。
提供指示以幫助人們完成表單是介面可用性良好實務的基本部分。 對於有視覺或認知障礙的人士,這項資訊很有幫助,否則他們可能難以瞭解表單的版面以及在特定表單欄位中要提供的資料型別。
在AEM中,當您新增表單元件時,會新增預設標籤,例如 文字欄位,移至頁面。 此預設標題取決於元件型別。 您可在下列欄位新增自己的標題: 標題與文字 該欄位之「編輯」對話方塊的「 」索引標籤。 請務必確保標籤可協助使用者瞭解與每個表單元件相關聯的資料。
這個 標題 欄位必須用於欄位元素,因為它提供了可用於輔助技術的標籤。 僅在該欄位旁的文字中寫入標籤是不夠的。
對於某些表單元件,您也可以使用「隱藏標題」核取方塊以視覺化方式 隱藏標籤 。以此方式隱藏的標籤仍適用於輔助技術,但無法顯示在螢幕上。雖然這在某些情況下是個好方法,但最好儘可能加入視覺標籤。 有些使用者可能會看到畫面的一小部分(一次看一個欄位),並需要標籤才能正確識別欄位。
其中使用影像按鈕(例如 Image Button 元件)時,編輯對話方塊的「標題」和「文字」索引標籤中的「標題 」欄位實際上會提供影像的替代文字,而非標籤。因此,在以下範例中,包含文字的影像 Submit
的alt文字為 Submit
,使用編輯對話方塊中的 Title 欄位新增。
如果有一組相關控制項,例如 選項按鈕群組,群組和個別控制項可能需要標題。 在AEM中新增一組選項按鈕時,「標題 」欄位會提供此群組標題,而個別標題會指定為選項按鈕( Items )。
不過,群組標題和選項按鈕本身之間沒有程式化關聯。範本編輯器必須將標題包住必要 fieldset
和 legend
標籤來建立此關聯,而這只能透過編輯頁面原始碼來完成。 或者,系統管理員可以新增對這些元素的支援,使這些元素顯示在 欄位屬性 對話方塊(請參閱 新增對其他HTML元素和屬性的支援)。
如果要以特定格式輸入資料,請在標籤文字中清楚說明。 例如,如果日期必須輸入在 DD-MM-YYYY
格式,請在標籤中特別指明這一點。 這表示當熒幕助讀程式的使用者遇到該欄位時,會自動公告標籤,以及關於格式的其他資訊。
如果表單欄位的輸入是必填的,請使用標籤中的必要字詞來清楚說明。AEM在需要欄位時新增星號,但最好將字詞加入標 required
簽本身(在編輯對話方塊的「 Title 」欄位中)。
標籤的位置也很重要,因為它有助於他們找到適當的欄位。 當使用者面對複雜表單時,這尤其重要。 遵循以下慣例:
標籤會放在緊鄰欄位右側的位置。
標籤會放置在欄位正上方或左側。
在功能有限的簡單表單中,適當地標示 Submit
按鈕可作為相鄰欄位的標籤(例如 Search
)。 當尋找標籤文字的空間可能困難時,這個用法很有用。