WCAG 2.0 包含一系列無需仰賴技術的指引和成功標準,有助身心障礙人士存取與使用網路內容。
另請參閱:
這些級別按三個一致性級別進行分級:A級(最低)、AA級和AAA級(最高)。 簡單地說,這些級別的定義如下:
建立網站時,您必須決定要讓網站遵循的整體等級。
以下部分介紹WCAG 2.0准則以及A級和A級符合性級別的相關成功標準。
由於無法滿足特定類型內容的所有級別AAA成功標準,因此不建議將此級別符合標準作為一般策略。
在本檔案中,我們使用:
原則1:可感知——資訊和使用者介面元件必須以使用者可感知的方式呈現給使用者。
准則1.1備選案文:為任何非文字內容提供替代文字,以便將其變更為人們需要的其他形式,例如大型印刷、盲文、語音、符號或更簡單的語言。
網頁上的資訊可以提供許多不同的非文字格式,例如圖片、視訊、動畫、圖表和圖形。 盲人或視力嚴重受損的人無法看到非文本內容,但他們可以通過螢幕閱讀器讀取文本內容或通過盲文顯示設備以觸覺形式顯示文本內容。 因此,提供圖形格式的內容替代文字,讓無法看見圖形內容的使用者可以存取內容所提供的相同版本資訊。
另一個有用的好處是,替代文字可讓非文字內容依搜尋引擎技術建立索引。
對於靜態圖形,基本要求是為圖形提供等效的文本替代。 這可在Alt Text欄位中完成:
有些現成可用的元件(例如 Carousel 和 Slideshow )不提供將替代文字說明新增至影像的方式。當為您的AEM例項實作這些版本時,您的開發團隊將需要設定這些元件以支援alt
屬性,讓作者可以將它新增至內容(請參閱新增支援其他HTML元素和屬性)。
在元資料頁籤的Image元件對話框中,備選文本欄位可用:
AEM要求預設填入替代文字欄位。 如果影像純粹是裝飾性的,而替代文字則是無意義的,則可以檢查Image is decortional選項。
非文字內容有多種形式,因此文字替代項目的價值取決於圖形在網頁中所扮演的角色。 以下是一些一般經驗法則:
文字替代項目應簡明扼要,但應清楚地擷取非文字內容所提供之基本資訊。
應避免過長的說明(超過100個字元)。 如果替代文字需要更詳細的資訊:
替代文字不應複製相同頁面附近文字表單中提供的內容。 請記住,許多影像是頁面文字中已涵蓋的點的插圖,因此可能已有詳細的文字替代項目。
如果非文字內容是指向其他頁面或檔案的連結,而沒有其他文字構成相同連結的一部分,則影像的替代文字必須指出連結的目的地,而非描述影像。
如果非文字內容包含在按鈕元素中,且沒有文字組成相同按鈕的一部分,則影像的替代文字必須指出按鈕的功能,而非描述影像。
如果影像是空白(null)的替代文字,但是只有在影像沒有替代文字(例如純裝飾性圖形)或頁面文字中已存在等同文字時,才能完全接受。
W3C草稿:HTML5提供有用文字替代品的技術提供了更多細節,並提供了針對不同類型影像的適當替代文字提供範例。
需要替代文字的特定非文字內容類型可能包括:
說明性像片:這些是人物、物件或地點的影像。 想想像片在頁面中的角色;適當的文字等同項目可能是[object]的像片,但可能取決於周圍的文字。
圖示:這些是傳達特定資訊的小型圖片(圖形)。 必須在頁面和網站上一致使用這些變數。 頁面或網站上的圖示所有例項都應有相同的簡短文字替代項目,除非這麼做會造成相鄰文字的不必要複製。
圖表和圖形:這些通常代表數值資料。 因此,提供文字替代選擇的一個選項可能是包含圖表或圖形中主要趨勢的簡短摘要。 如有必要,也可使用Advanced影像屬性標籤中的Description欄位,在文字中提供更詳細的說明。 此外,您也可以在頁面或網站的其他地方以表格形式提供來源資料。
若要提供此範例圖表的替代選項,請在影像本身加入簡明的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>
上述程式碼片段僅用於說明順序。 建議使用Image元件(而非上述的img src
參考)。
在AEM中,您可使用影像設定對話方塊中的Alt Text和Description欄位組合來完成此作業——如How to Meet - Non-text Content(1.1.1)。
地圖、圖表、流程圖:用於提供空間資料的圖形(例如。若要支援描述物件或程式之間的關係),請確定關鍵訊息是以文字格式提供。對於地圖,提供等同全文的地圖可能不切實際,但如果提供地圖以幫助人們找到特定位置的方式,則地圖影像的替代文字可以簡短地標示 X,然後在頁面其他地方的文字或透過 Image元件的「 Advanced 」 (進階) 索引標籤中的「 Description 」 (說明) 欄位,提供指向該位置的指示。
驗證碼:CAPTCHA是完全自動化的公共圖靈測試,可告訴電腦和人類Apart。 它是用於網頁上的安全檢查,用於區分人類和惡意軟體,但會造成無障礙環境支援。 這些影像需要使用者描述他們所看到的內容,才能通過安全性測試。 為影像提供替代文字顯然不可能,因此您需要考慮其他非圖形解決方案。
W3C提供了一些建議,如:
背景影像:這些功能是使用階層式樣式表(CSS)而非HTML來達成。 這表示無法指定替代文字值。 因此,背景影像不應提供重要的文字資訊——如果有的話,這項資訊也必須提供在頁面的文字中。
但是,當無法顯示影像時,必須顯示替代背景。
背景文字和前景文字之間應有適當的對比度;這在Contrapts(Minimum)(1.4.3)中會有更詳細的討論。
這涉及時間型的網頁內容。 這包括使用者可播放的內容(例如視訊、音訊和動畫內容),並可預先錄制或即時串流。
成功標準1.2.1
A級
僅限音訊和僅限視訊(預錄):對於預錄的純音訊和純視訊媒體,除非音訊或視訊是文字的替代媒體,並明確標示為:
視訊和音訊的協助功能問題可能會透過下列方式發生:
使用不支援以特定媒體格式(例如Adobe Flash)播放內容的瀏覽器或裝置的使用者,也可能無法使用視訊或音訊。
以不同格式提供此資訊,例如文字(或無音訊的視訊音訊),可讓無法存取原始內容的使用者存取。
如果內容是預先錄制的音訊,但沒有視訊(例如播客):
在內容之前或之後,提供連結至音訊內容的文字記錄。
成績單應是HTML頁面,其文字等同於所有口語和重要的非口語內容,另外還包括說話者的指示、設定的描述、聲音表達以及任何其他重要音效的描述。
如果內容是動畫或預先錄制的視訊,且沒有音效:
如果提供音訊或視訊內容作為網頁上已存在其他格式內容的替代內容,則無需遵循上述要求。 例如,如果視訊說明文字指示清單,則此視訊不需要替代項目,因為文字指示已可當成視訊的替代項目。
將多媒體(尤其是Flash內容)插入AEM網頁,就像插入影像一樣。 然而,由於多媒體內容遠非靜態影像,因此有多種不同的設定和選項來控制多媒體的播放方式。
當您將多媒體與資訊性內容搭配使用時,您也必須建立替代內容的連結。 例如,若要包含文字成績單,請建立HTML頁面以顯示成績單,然後在音訊內容旁或下方新增連結。
聽障或聽障者將無法或難以存取音訊內容。 標題是語音和非語音音訊的文字等效,在視訊中的適當時間在螢幕上顯示。 它們讓聽不到音效的人,瞭解現在的情況。
在視訊或動畫的相同頁面上提供適當的文字或非文字等同內容(提供直接等同的資訊)時,不需要標題。
標題可以是:
盡可能使用隱藏字幕,因為這可讓使用者選擇是否檢視字幕。
對於隱藏字幕,您需要在視訊檔案旁建立並提供適當格式(例如SMIL)的同步化字幕檔案(如如何做到的詳細資訊不在本指南的範圍內,但我們提供了更多資訊——標題(預先錄制)(1.2.2)下的教學課程連結)。 請確定您提供附註,讓使用者知道視訊有可用的標題。
如果您必須使用開放標題,請將文字內嵌至視訊軌。 這可以使用影片編輯應用程式來實現,讓標題可以覆蓋在影片上。
如果視障或視障人士僅以視覺化方式提供視訊或動畫中的資訊,或者配樂無法提供足夠的資訊,以視覺化方式瞭解發生的情況,將會遇到無障礙環境支援。
為滿足此成功標準,可採用兩種方法。 兩者皆可接受:
加入視訊內容的其他音訊描述。 這可以通過以下三種方式之一實現:
在現有對話方塊的暫停期間,提供場景中未呈現為現有音軌一部分的變更資訊;
提供新的、額外的可選音軌,其中包含原始音軌,但也包含場景變更的額外音訊資訊。
建立視訊內容的第二版本,以允許擴充音訊說明。 這可借由在適當的點暫停音訊和視訊,減少在現有對話方塊之間的間隙中提供詳細音訊描述的相關困難。 因此,在動作再次開始之前,可以提供更長的音訊描述。 如上例所示,這最好是選用的額外音軌,以防止不需要額外說明的使用者中斷。
提供與視訊或動畫的音訊和視覺元素相當的適當文字記錄。 這應當包括,在適當情況下,說話者的指示、設定的描述、聲音表達。 視其長度而定,您可以將成績單放在視訊或動畫的相同頁面,或放在個別頁面上;如果您選擇後一個選項,請提供視訊或動畫旁的轉錄本連結。
如何建立音訊描述視訊的確切詳細資訊,不在本指南中。 建立視訊和音訊描述可能很耗時,但其他Adobe產品可協助您完成這些工作。 如果您在Adobe Flash Professional中建立內容,您也應建立指令碼以提示使用者下載適當的外掛程式,並透過<noscript>
元素提供文字替代項目。
此成功標準與標題(預先錄制)相同,因為它可解決聾人或聽障人士所經歷的無障礙環境障礙,但此成功標準涉及即時簡報,例如網路廣播。
請遵循上述標題(預先錄制)的指引。 但是,由於媒體的即時性質,必須盡快建立字幕布建,以因應目前的情況。 因此,您應考慮使用即時字幕或語音轉文字工具。
詳細說明超出本檔案的範圍,但下列資源可提供有用資訊:
此成功標準與音訊描述或媒體替代項目(預先錄制)相同,但作者必須提供更詳細的音訊描述,以符合等級AA。
遵循音訊說明或媒體替代項目(預先錄制)的指引。
准則1.3適應性:建立可以以不同方式呈現的內容(例如更簡單的版面),而不會遺失資訊或結構。
本准則涵蓋支援以下人員的必要要求:
可能無法存取作者在standard二維、多欄、彩色網頁版面中所呈現的資訊
可能會使用純音效或替代的視覺顯示,例如大型文字或高對比度。
許多殘障人士使用的輔助技術都依賴結構資訊,以有效顯示或輸出內容。 此結構資訊可以採用頁標題、表行和列標題以及清單類型的形式。 例如,螢幕閱讀程式可讓使用者從標題到標題瀏覽頁面。 但是,當頁面內容只看起來是透過視覺樣式而非基礎HTML來呈現結構時,輔助技術就無法使用結構資訊,限制了其支援更輕鬆瀏覽的能力。
此成功標準的存在,是為了確保此類結構性資訊是透過HTML提供,讓瀏覽器和輔助技術能夠存取並運用這些資訊。
AEM可讓您輕鬆使用適當的HTML元素來建構網頁。 在RTE(文本元件)中開啟頁面內容,然後使用Paraformat菜單(段落符號)指定適當的結構元素(例如段落、標題等)。
下圖顯示已設定為段落文字樣式的文字。
您可以透過下列方式,確保您的網頁具有適當的結構:
使用標題:
只要您已啟用RTE的協助功能(請參閱AEM和協助功能),AEM就會提供3層頁面標題。 您可以使用這些項目來識別內容的區段和子區段。標題1是標題的最高級別,標題3是最低級別。系統管理員可以配置系統以允許使用更多標題級別。
下圖顯示不同標題類型的範例。
強調的文字:
使用<strong>或<em>元素指出強調。 請勿使用標題來反白標示段落中的文字。
標準AEM安裝中的RTE已設定為使用:
它們實際上是相同的,但<strong>和<em>較好,因為它們是語義正確的html。 您的開發團隊可以設定RTE,以便在開發專案例項時使用<strong>和<em>(而非<b>和<i>)。
使用清單:您可以使用HTML來指定三種不同的清單類型:
<ul>
元素用於無序清單(項目符號)。 使用<li>
元素來識別個別清單項目。
在RTE中,使用項目符號清單表徵圖。
<ol>
元素用於編號清單。 使用<li>
元素來識別個別清單項目。
在RTE中,使用Numbered List表徵圖。
如果要將現有內容變更為特定的清單類型,請反白標示適當的文字並選取適當的清單類型。 如先前顯示如何輸入段落文字的範例,適當的清單元素會自動新增至您的HTML。
在全螢幕模式中,會顯示個別 的「項目符號清單 」和「 編號清單」圖示。當未處於全螢幕模式時,單一「清單」圖示後面會提供這兩個 選項 。
<dl>
不受RTE支援。
使用表格:
必須使用HTML表格元素來識別資料表格:
<table>
元素<tr>
元素,用於表格的每一列<th>
元素<td>
元素在傳統UI中,表應使用Table元件實現。
此外,可存取的表格還使用下列元素和屬性:
<caption>
元素用於為表格提供可見標題。 字幕預設會出現在表格的正中,但可使用CSS適當定位。 標題以寫程式方式與表關聯,因此它是提供內容介紹的有用方法。<summary>
元素提供有視力的使用者可看到的摘要,協助無視力的使用者更輕鬆地瞭解表格中顯示的資訊。 在使用複雜或非常規表格版面時(此屬性不會顯示在瀏覽器中,只會讀出至輔助技術),此功能特別有用。<th>
元素的scope
屬性用於指示單元格是代表特定行的標題,還是代表特定列的標題。 類似的方法是在複雜表格中使用標題和id屬性,其中資料儲存格可與一或多個標題相關聯。預設情況下,這些元素和屬性不直接可用,但系統管理員可以在表屬性對話框中添加對這些值的支援(請參閱添加對其他HTML元素和屬性的支援)。
添加Table時,可使用對話框配置Table properties。
然後,您可以使用儲存格屬性來選擇儲存格是資料儲存格還是標題儲存格,如果標題儲存格,則選擇它與列或欄相關,或兩者皆有:
複雜的資料表:
在某些情況下,如果有具有兩個或多個標題級別的複雜表,則基本表屬性可能不足以提供所有必要的結構資訊。 對於這些類型的複雜表格,需要使用header和 id屬性在標題及其相關儲存格之間建 立直 接 關係。例如,在下表的標題和ID中,會對輔助技術使用者進行程式化關聯。
id屬性不適用於現成可用的安裝。 它可以通過配置HTML規則和RTE中的串列化函式來啟用。
在傳統UI中,表應使用Table元件實現。
<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規則和串列化器。
設計人員通常會專注在視覺設計功能上,例如顏色、形狀、文字樣式,或內容在呈現資訊時的絕對或相對位置。 這些設計技巧在傳達資訊時十分強大,但盲人或視障人士可能無法存取需要視覺識別位置、顏色或形狀等屬性的資訊。
同樣地,如果需要區分不同聲音(例如男性或女性口語內容)的資訊沒有反映在音頻內容的任何文本替代內容中,則對聽力有障礙的人會造成無障礙。
有關顏色替代項的要求,請參閱使用顏色。
請確定任何依賴頁面內容視覺特性的資訊,也會以替代格式顯示。
如果明白描述性詞語在非視覺化內容中有意義,則可接受使用。 例如,使用above和below通常是可接受的,因為它們分別表示特定內容項目之前和之後的內容;當內容被大聲朗讀時,這仍然有意義。
准則1.4可區分:讓使用者更輕鬆地檢視和聽取內容,包括將前景與背景分開。
此成功標準可特別處理色彩感知。 其他形式的感知涵蓋在適應性(1.3)中;包括程式化存取色彩和其他視覺化簡報編碼。
顏色是增強網頁美感的一種明顯有效的方式,在資訊傳遞方面也有很大的幫助。 但是,從失明到彩色視覺缺陷,都存在著一系列的視覺缺陷,這意味著有些人無法區分某些顏色。 這使得色彩編碼成為提供資訊的不可靠方式。
例如,有紅綠色視覺缺陷的人,將無法區分綠色和紅色。 他們可能會將這兩種顏色視為第三種顏色(例如,棕色),在這種情況下,他們將無法區分紅色、綠色和棕色。
此外,使用純文字瀏覽器、單色顯示裝置或檢視頁面黑白列印成品的使用者無法察覺色彩。
無論使用何種顏色來傳達資訊,請確定這些資訊是可用的,而不需要查看顏色。
例如,請確定文字中也明確提供由顏色提供的資訊。 下圖顯示顏色和文本如何指示效能的座位可用性:
效能 |
可用性 |
星期二3月16日th |
可用授權 |
星期三3月17日 |
可用授權 |
星期四3月18日th |
售完 |
如果使用顏色做為提供資訊的提示,您應提供額外的視覺提示,例如變更樣式(例如粗體、斜體)或字型。 這可協助視力低下或色彩視覺缺乏者識別資訊。 但是,它不能完全依賴,因為它不會幫助根本看不到頁面的人。
成功標準1.4.3
AA級
對比度(最小值):文字和影像的視覺呈現至少有4.5:1的對比率,但下列除外:
某些視覺障礙的人可能無法區分某些低對比色彩對。 如果以下情況,這些人可能會遇到無障礙環境支援問題:
純用於裝飾目的的文字會排除在此成功標準之外。
請確定文字與其背景對比充分。 對比率取決於相關文本的大小和樣式:
要檢查對比度,請使用顏色對比工具,如Paciello Group Color Contrast Analyser或WebAIM顏色對比檢查器。 這些工具可讓您檢查顏色對,並報告任何對比問題。
或者,如果您不太在意指定頁面的外觀,可以選擇不指定背景和前景文字顏色。 不需要進行對比檢查,因為使用者的瀏覽器會決定文字和背景的顏色。
如果無法達到建議的對比度等級,您將需要提供頁面的替代等同版本(沒有顏色對比問題)的連結,或讓使用者根據自己的需求調整頁面色彩配置的對比度。
成功標準1.4.5
AA級
文字影像:如果所使用的技術可以實現視覺呈現,則除了下列項目外,文字會用來傳達資訊,而非文字影像:
Logotypes(屬於標誌或品牌名稱的文字)被視為必要項目。
當偏好特定文字樣式時,通常會使用文字影像;例如,logotype或如果文字是從其他來源產生(例如,掃描紙張檔案)。 但是,與使用HTML呈現的文字和使用CSS建立樣式的文字相比,文字的影像缺乏彈性來變更尺寸或外觀,這對於有視覺障礙或閱讀困難的人而言可能是必要的。
如果必須使用文字影像,請使用CSS將文字影像取代為HTML中的等同文字,讓文字以可自訂的方式使用。 有關如何實現此目的的示例,請參閱C30:使用CSS將文字取代為文字影像,並提供使用者介面控制項來切換。
成功標準2.2.2
A級
暫停、停止、隱藏:對於移動、閃爍、捲動或自動更新資訊,以下是正確的:
注意事項有:
某些使用者可能會發現移動的內容會分散注意力,並且難以將注意力集中在頁面的其他部分。 此外,對於無法跟上動態文字腳步的人而言,這些內容可能很難閱讀。
根據內容的性質,在建立包含移動、閃爍或閃爍內容的網頁時,您可以套用下列一或多個建議:
由於任何不符合此成功標準的內容都可能干擾使用者使用整個頁面的能力,因此網頁上的所有內容(無論是否用於符合其他成功標準)都必須符合此成功標準。 請參閱符合性要求5:非干擾。
在某些情況下,閃爍的內容可能導致感光性癲癇。 此成功標準可讓這些使用者存取並體驗所有內容,而不需擔心內容閃爍。
您應採取步驟,以確保套用下列技術:
此成功標準可協助每個人(不論是否有任何特定的損害)快速識別網頁內容,而不需完整閱讀網頁。 當在瀏覽器標籤中開啟多個網頁時,這特別有用,因為頁面標題會顯示在標籤中,因此可快速找到。
在AEM中建立新的HTML頁面時,您可以指定頁面標題。 請確定標題已充分說明頁面內容,讓訪客可以快速識別內容是否與其需求有實際關係。
編輯頁面時,您也可以編輯頁面標題,頁面資訊——屬 性可存取。
對所有使用者而言,無論是否受到損害,透過適當的連結文字清楚指出連結的方向至關重要。 這可協助使用者決定是否實際要追蹤連結。 對有目光的使用者而言,當頁面上有數個連結時(尤其是頁面文字較多時),有意義的連結文字非常有用,因為有意義的連結文字可更清楚地指出目標頁面的功能。 雖然輔助技術的使用者可以在單一頁面上產生所有連結的清單,但更輕鬆地瞭解連結文字與內容無關。
首先,請確定連結的目的在連結的文字中已清楚說明。
錯誤示例:
好例子:
連結應在各頁面上使用一致的措辭,尤其是導覽列。 例如,如果某個頁面上的特定頁面的連結名為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)一節。
此成功標準的目的是確保文字和其他語言內容正確呈現。 對於螢幕閱讀器使用者,這可確保內容正確發音,而視覺瀏覽器更可能正確顯示特定字元集。
為符合此成功標準,可使用頁面頂端的<html>
元素中的lang
屬性來識別網頁的預設語言。 例如:
如果頁面以英文寫入,<html>
元素應為:<html lang = “en-gb”>
而要轉換為美文的頁面,則應採用下列標準:<html lang = “en-us”>
在AEM中,您的頁面預設語言是在建立頁面時設定,但在編輯頁面時也可以變更,頁面可由 Sidekick - Page 標籤- Page Properties…存取- Advanced 頁籤。
此成功准則的目的類似於「頁面語言」的「成功准則」,但適用於單一頁面上包含多種語言內容的網頁(例如,由於引文或不常見的借記字詞)。
套用此成功准則的頁面允許:
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</span>.</p>
在包含不同語言的名稱或城市,或使用預設語言中已司空見慣的借詞或片語(例如英文中的schadenfreude)時,您不必遵循此成功標準。
要使用適當的語言添加span元素,可以在RTE的源編輯模式中手動編輯HTML標籤,以便其讀取如上。 或者,系統管理員可將lang
屬性包含在RTE中(請參閱添加對其他HTML元素和屬性的支援)。
提供說明以協助人們填寫表單是介面可用性的基本實務。 這樣做對於視覺或認知障礙的人特別有幫助,因為如果不是這樣,他們可能難以理解表單的佈局以及在特定表單域中提供的資料類型。
在AEM中,當您將表單元件(例如文字欄位)新增至頁面時,會新增預設標籤。 此預設標題取決於元件類型。您可以在該欄位的編輯對話框的標題和文本頁籤中添加自己的標題。 請務必確保標籤有助於使用者瞭解與每個表單元件相關聯的資料。
此Title欄位必須用於欄位元素,因為它提供可用於輔助技術的標籤。 僅僅在欄位旁的文字中加上標籤是不夠的。
對於某些表單元件,您也可以使用「隱藏標題」核取方塊以視覺化方式 隱藏標籤 。以此方式隱藏的標籤仍適用於輔助技術,但無法顯示在螢幕上。雖然這在某些情況下是個好方法,但通常最好盡可能加入視覺標籤,因為有些使用者可能會看到畫面的一小部分 (一次看一個欄位),並需要標籤來正確識別欄位。
其中使用影像按鈕(例如 Image Button 元件)時,編輯對話方塊的「標題」和「文字」索引標籤中的「標題 」欄位實際上會提供影像的替代文字,而非標籤。因此,在以下範例中,包含文字的影像 Submit
的alt文字為 Submit
,使用編輯對話方塊中的 Title 欄位新增。
如果有一組相關控制項,例如 Radio Group,則可能需要該群組的標題以及個別控制項。在AEM中新增一組選項按鈕時,「標題 」欄位會提供此群組標題,而個別標題會指定為選項按鈕( Items )。
不過,群組標題和選項按鈕本身之間沒有程式化關聯。範本編輯人員必須將標題包住必要 fieldset
和 legend
標籤,才能建立此關聯,而這只能透過編輯頁面原始碼來完成。或者,系統管理員可以添加對這些元素的支援,使這些元素顯示在欄位屬性對話框中(請參閱添加對其他HTML元素和屬性的支援)。
如果要以特定格式輸入資料,請在標籤文本中明確說明這一點。 例如,如果必須以DD-MM-YYYY
格式輸入日期,請特別指出這是標籤的一部分。 這表示當螢幕閱讀程式使用者遇到欄位時,標籤會自動宣佈,以及格式的其他資訊。
如果表單欄位的輸入是必填的,請使用標籤中的必要字詞來清楚說明。AEM在需要欄位時新增星號,但最好將字詞加入標 required
簽本身(在編輯對話方塊的「 Title 」欄位中)。
標籤的定位也很重要,因為它可協助標籤找到適當的欄位。 當使用者面對複雜的表單時,這尤其重要。 遵守以下公約:
在功能非常有限的簡單表單中,適當標籤Submit
按鈕可當成相鄰欄位的標籤(例如Search
)。 當尋找標籤文字的空間時,這項功能會很有用。