無障礙網頁宣告
指引一(替代文字):為任何非文字的內容提供相等意義的替代文字,使這些內容能依人們的需求,轉變成大字版、點字、語音、符號或簡化過的語言等不同型態
指引三(可調適):建立能以不同方式(例如簡化的版面)呈現,而仍不會喪失資訊或結構的內容
指引四(可辨識):讓使用者能更容易地看見及聽到內容、區分前景和背景
指引八(可導覽):提供協助使用者導覽、尋找內容及判斷所在的方法
指引十二(相容性)針對目前及未來的使用者代理與輔助科技,最大化其相容性
本指引為了讓網頁開發者能夠對網頁開發在可及性設計的考慮上有明確的指引條文,特參考WAI(Web Accessibility Initiative)組織在相關無障礙網頁標準的設計,以十二條指引來引導網頁開發者設計可以讓所有人士都可以使用的無障礙網頁。
指引一(替代文字):為任何非文字的內容提供相等意義的替代文字,使這些內容能依人們的需求,轉變成大字版、點字、語音、符號或簡化過的語言等不同型態
說明:此指引的目的是要確保所有非文字的內容也都有文字的版本。這裡的「文字」指的是電子文字,而非影像文字。電子文字有著呈現方式中立的獨特優勢,也就是說,可以以視覺化、聽覺化、觸覺化等不同方式加以表達,也可同時合用多種表達方式來呈現。因此以電子文字描繪的資訊就可以用任何最適合使用者的方式來呈現。這樣的內容可以很容易地放大、報讀出來讓有閱讀障礙的使用者也能便於理解,或者以任何觸覺的方式呈現來滿足使用者的需求。
1.1如果非文字的內容是個控制元件或接受使用者輸入的元件,那麼它就會有個用來描述其目的的名稱(這種情況請參考指引12)。
1.2如果非文字的內容是個時序媒體,那麼替代文字至少要為此非文字內容提供描述性的識別資訊(這種情況請參考指引2。)
1.3如果非文字的內容改以文字呈現即會導致測驗或習題無效,那麼替代文字至少要為此非文字內容提供描述性的識別資訊。
1.4如果非文字的內容主要是為了創造特定的知覺體驗,那麼替代文字至少要為此非文字內容提供描述性的識別資訊。
1.5如果非文字的內容,是為了要確認取用內容的是人而非電腦,那麼首先要以替代文字來指出及描述此非文字內容的目的,接著還要提供替代的CAPTCHA驗證,採不同感官感知類型的輸出模式,以顧及不同的障礙。
1.6如果非文字的內容完全只有裝飾作用、僅用於視覺格式排版、或根本不會呈現在使用者面前,那麼就要用輔助科技能加以忽略的方式來實踐。
指引二(時序媒體):針對時序媒體提供替代內容
說明:此指引的目的是要提供取用時序媒體及同步媒體的能力。這項指引所囊括的媒體包括了:
- 純音訊
- 純視訊
- 視訊及音訊
- 結合互動的視訊和音訊
此處所謂「結合互動的視訊和音訊」包含了伴隨互動的音訊,以及帶有互動的純視訊,例如隨著使用者操控而產生劇情分歧的互動式電影。這些媒體仰賴在特定的時間點發生互動事件,例如播放到某個關鍵劇情處時,使用者是否按下按鍵會導致不同的事件發展;對於這種媒體,僅提供文字轉譯稿無法重現時序性的互動機制,所以必須要提供同步的字幕,讓使用者能在特定的字幕內容出現時做出相對的操作,藉此參與媒體內容的時序互動。
有時候,對白會多到使得音訊描述無法塞進對白間的既有暫停。等級A的選項是不要提供同步媒體的音訊描述,而改提供替代的時序媒體,讓使用者能取用同步媒體中所有的資訊。這樣的選項也讓音訊描述因某些緣故無法提供的時候,能夠以非視覺的格式讓使用者取用所有的視覺資訊。
對於包含互動的同步媒體來說,互動元件(例如鏈結)也可以嵌入時序媒體的替代內容之中。
此指引亦包含了同步媒體的手語翻譯以及一種稱作延伸音訊描述的方法。在延伸音訊描述當中,視訊會凍結一段時間,讓比對白間既有暫停更長的音訊描述能放進去。
2.1(檢測等級A)除非音訊及視訊是文字內容的替代媒體,並且有明確地標示出來,否則就應該做到下列事項:
- 預先錄製的純音訊:提供時序媒體的替代內容來表達純音訊內容的等義資訊。
- 預先錄製的純視訊:提供時序媒體的替代內容或替代音軌來表達純視訊內容的等義資訊。
2.2(檢測等級A)除非在同步媒體中,預先錄製的音訊內容是文字內容的替代媒體,並且有明確地標示出來,否則就應該為所有的音訊內容提供字幕。
2.3(檢測等級A)除非同步媒體是文字內容的替代媒體,並且有明確地標示出來,否則就應該為這些同步媒體提供替代時序媒體,或預先錄製的視訊內容的音訊描述。
2.4(檢測等級AA)為同步媒體中所有的現場音訊內容提供字幕。
2.5(檢測等級AA)為同步媒體中所有預先錄製的視訊內容提供音訊描述。
2.6(檢測等級AAA)為所有在同步媒體中預先錄製的音訊內容提供手語翻譯。
2.7(檢測等級AAA)當前景音訊暫停仍不足以讓音訊描述轉達視訊意義,則為所有同步媒體中預先錄製的視訊內容提供延伸音訊描述。
2.8(檢測等級AAA)為所有預先錄製的同步媒體及所有預先錄製的純視訊媒體,提供時序媒體替代內容。
2.9(檢測等級AAA)為現場純音訊內容提供能表達等義資訊的時序媒體替代內容。
指引三(可調適):建立能以不同方式(例如簡化的版面)呈現,而仍不會喪失資訊或結構的內容
說明:此指引的目的在確保所有的資訊都有所有使用者可感知的形式,像是報讀出來或以較簡單的視覺布局呈現。如果所有的資訊都有軟體可判別的形式,那麼就可以用不同的方式(視覺性、聽覺性、觸覺性等)呈現給使用者。如果資訊嵌入在特定的呈現方式中,而其結構與資訊無法由輔助科技以程式化的方式來判讀,那麼就無法以使用者所需的其他形式來描繪。
此指引下的所有成功準則都是要確保通常編碼在呈現中的資訊也有不同的資訊類型,而能以不同的型態來表達。
3.1(檢測等級A)由呈現方式所傳達的資訊、結構與關連性要能以程式化的方式判讀,或者有對應的文字。
3.2((檢測等級A)當內容中的呈現順序會影響其意義時,應該要能以程式化的方式,判讀正確的閱讀序列。
3.3(檢測等級A)用來理解及操作內容的指示,不可單獨依賴元件的形狀、尺寸、視覺位置、導向、聲音等知覺特徵。
指引四(可辨識):讓使用者能更容易地看見及聽到內容、區分前景和背景
說明:有些指引著重在使資訊能有可以替代格式來呈現的格式,此指引則是想讓預設的呈現方式能讓有障礙的使用者也能容易感知。使這件事容易的主要焦點在於讓使用者能容易地將前景資訊從背景當中分出來。就視覺呈現來說,這牽涉到確保背景上的前景資訊能有充足的對比;就聽覺呈現來說,這牽涉到確保背景聲音中的前景資訊能有夠大的音量。網頁設計者應留意到:視力障礙者和聽力障礙者要從背景中分離出前景資訊時,會比其他人更為困難。
4.1(檢測等級A)色彩不可當做唯一能傳達資訊、提出動作、提請回應或區別視覺元件的視覺手段來使用。
4.2(檢測等級A)如果網頁上有任何音訊會自動播放達3秒鐘以上,那麼就該提供一套機制來暫停或中止音訊播放,或者要能在整體系統音量設定外,另外提供控制音量的機制。
4.3(檢測等級AA)除非是下列各款中的例外情形,否則文字及影像文字的視覺呈現,至少要有4.5:1的對比值:
- 大尺寸的文字及大尺寸的影像文字至少要有3:1的對比值。
- 停用中的使用介面元件上的、純裝飾用的、任何人都看不到的文字或影像文字,或者只是另一張圖片的局部且該圖片顯然還有其他視覺內容,都毋須要求對比值。
- 標識或商標名稱上的字樣沒有最小對比值的要求
4.4(檢測等級AA)除了字幕及影像文字外,文字在沒有額外輔助科技的情況下,要能夠放大至百分之兩百,而不會失去內容或功能性。
4.5(檢測等級AA)如果所運用的科技能夠達成所需的視覺呈現,那麼就該以文字來傳遞資訊,而不要用影像文字,除非是下列各款中的例外情形:
- 影像文字在視覺上能根據使用者的需求而自訂
- 以此獨特的方式來呈現文字對傳達資訊來說是必要的
4.6(檢測等級AAA)除非是下列各款中的例外情況,否則文字及影像文字的視覺呈現至少要有7:1的對比值:
- 大尺寸的文字及大尺寸的影像文字至少要有4.5:1的對比值。
- 停用中的使用介面元件上的、純裝飾用的、任何人都看不到的文字或影像文字,或者只是另1張圖片的局部且該圖片顯然還有其他視覺內容,都毋須要求對比值。
- 標識或商標名稱上的字樣沒有最小對比值的要求。
4.7(檢測等級AAA)如果預先錄製的純音訊內容,前景主要為語音;不是音訊CAPTCHA驗證或識別音訊;而且不是歌唱或rap這類用於音樂表達的發音,則下列各款中至少得做到其中一項:
- 音訊不含任何背景聲音。
- 背景聲音可以關掉。
- 除了偶爾出現且僅持續1到兩秒的音效之外,背景聲音至少要比前景的語音內容低20分貝。根據「分貝」的定義,符合此要求的背景聲音大約會比前景語音內容安靜4倍左右。
4.8(檢測等級AAA)對於文字區塊的視覺呈現,提供機制來達成下列事項:
- 使用者可選擇前景及背景色彩。
- 寬度不可多於80個字元或字符(中日韓語系則是40)。
- 文字不可全齊(左右邊界均對齊)。
- 段落內的行距至少要是1.5倍行高,而段落間距則至少要是1.5倍行距。
- 在沒有額外輔助科技的情況下,文字要能夠放大至百分之兩百,並且在全螢幕視窗中閱讀時,使用者毋須水平捲動視窗即可讀。
4.9(檢測等級AAA)影像文字僅用於純裝飾,或者是對於傳達資訊來說以此特定方式呈現文字是必要的情況。
指引五(鍵盤可操作):讓所有的功能都能透過鍵盤使用
說明:如果所有的功能都能經使用鍵盤來達成,那麼不論是鍵盤使用者、用語音輸入(來建立鍵盤輸入)、用滑鼠(來操作螢幕小鍵盤)、用各式各樣能夠建立模擬按鍵輸出的輔助科技,也就都可以達成。沒有任何其他輸入形式具有這樣的彈性,或廣為支援且能被有障礙的使用者所操作,唯一的前提是鍵盤輸入並非與時間相關。
請注意,提供通用的鍵盤輸入並不意味著其他輸入類型就不該支援。最佳化的語音輸入、最佳化的滑鼠/指標輸入等,都是很好的。關鍵在於也要提供鍵盤輸入與控制。
有些裝置沒有原生鍵盤──像是PDA或行動電話。如果這些裝置具有瀏覽網頁的能力,那麼,它們也就會有某種產生文字或「按鍵」的方式。這條指引用「鍵盤介面」這樣的詞彙來告知網頁內容應由按鍵控制,不論按鍵是來自鍵盤、鍵盤模擬器、或其他能產生鍵盤或文字輸入的軟硬體。
5.1(檢測等級A)內容的所有功能都能透過鍵盤介面來操作,而且不能額外要求在限定時間內完成按鍵操作。特殊目的的網頁(例如遊戲網頁要求在特定時間內完成指定操作)不在此限。
5.2(檢測等級A)如果可以使用鍵盤介面,將鍵盤焦點移至頁面中的某個元件,則也要能僅用鍵盤介面就把焦點移開;如果移開焦點需要用到普通的方向鍵、跳位鍵以外的按鍵,或其他標準的離開方法,則需告知使用者如何操作。
5.3(檢測等級AAA)內容的所有功能都能透過鍵盤介面來操作,而且沒有額外的特定按鍵計時需求。
指引六(充足時間):提供使用者充分的時間來閱讀及使用內容
說明:許多有障礙的使用者需要比多數使用者更多的時間來完成任務:他們可能要花更多時間在肢體反應上,他們花更多時間在閱讀東西上,他們可能有弱視所以要花更多時間來找到東西或加以閱讀,或者他們可能使用得花更多時間的輔助科技來取用內容。這條指引專注於確保使用者能夠在其各自的反應時間內完成內容所需的任務。主要的方法是在處理時間限制的消除,或提供使用者額外的充足時間,讓他們能完成任務。另外也提供了無法實現的情況下的特殊考量。
6.1(檢測等級A)對於每一個由內容所設定的時間限制來說,下列各款至少得做到其中一項:
- 使用者遇上時間限制之前就能把它關掉。
- 使用者遇上時間限制之前就能加以調整,而且可調整的範圍要很大,至少是預設設定的10倍以上。
- 計時截止之前先警告使用者,並保留至少20秒的時間,讓使用者用簡單的動作(例如「按空白鍵」)來延長時限,且使用者至少能延長時限10次以上。
- 當時間限制為即時事件(例如拍賣)中所需要的部份,而且不可能有任何替代的時限時,可不允許計時調整。
- 當時限為必要,且延長時限會使得活動無效時,可不允許計時調整。
- 當時限比20小時還長時,可不允許計時調整。
6.2(檢測等級A對於會移動、閃動、捲動或自動更新的資訊來說,下列各款全部都要做到:
- 對於任何會移動、閃動或捲動,且為(1)會自動開始、(2)維持超過5秒鐘、(3)與其他內容平行呈現的資訊來說,除非這種移動、閃動或捲動乃是活動的1部分且不可或缺,否則就要有個機制來讓使用者可以暫停、中止或加以隱藏。
- 對於任何會自動更新,且為(1)會自動開始、(2)與其他內容平行呈現的資訊來說,除非這種自動更新是內容的1部分且不可或缺,否則就要有個機制來讓使用者可以暫停、中止或加以隱藏,或能控制更新的頻率。
6.3(檢測等級AAA)內容播放時不設時間限制,除非是在非互動的同步媒體或即時事件中,否則計時並非事件或內容所呈現的活動中,具有必要性的部份。
6.4(檢測等級AAA)內容播放時使用者要能延遲或抑制中斷,除非中斷關乎緊急狀況。
6.5(檢測等級AAA)若經認證的階段逾期了,則使用者在重新認證之後,應能繼續原先的活動而不會喪失任何資料。
指引七(防痙攣):不要用任何已知會引發痙攣的方式來設計內容
說明:有些有痙攣疾病的人可能會因為閃爍的視覺內容而引發痙攣。多數人一直到發作前都不知道自己有這樣的疾病。根據美國癲癇基金會指出,日本電視台於1997年因播放卡通造成超過700名兒童就醫,其中約有500名痙攣。在電視畫面上加註警語的成效不彰,因為這些警告通常會被錯過,尤其許多兒童無法真的閱讀這些警語。
此指引的目的是要確保那些標示已通過檢測的網頁內容不會有這些看個一、兩秒就很有可能造成痙攣的閃爍類型。
7.1(檢測等級A)網頁上不可含有任何一個元件,其在任何1秒鐘之內,會閃爍超過3次且超出一般閃爍及紅閃爍閾值。
7.2(檢測等級AAA)網頁上不可含有任何一個元件,其在任何1秒鐘之內,會閃爍超過3次。
指引八(可導覽):提供協助使用者導覽、尋找內容及判斷所在的方法
說明:此指引的意圖在於協助使用者找到他們所需的資訊,並讓他們能追蹤其位置。這項任務對於有障礙的使用者來說,往往更為困難,但經由合適的設計考量將有助於引導其讀取內容。對於尋找、導覽、導向來說,使用者能夠找出目前焦點所在的位置為何,是相當重要的。以導覽來說,要有關於可能目的地的資訊。螢幕報讀軟體可將內容轉換成合成語音,因為這是音訊,所以轉換結果會以線性順序呈現。此指引中有些成功準則解釋了要有哪些預備需求,才能確保螢幕報讀軟體的使用者能成功地導覽內容。另外一些成功準則則讓使用者能更容易地理解導覽列及網頁標題,並略過重複的內容。不尋常的使用者介面功能或行為可能會讓有認知障礙的人們更為困惑。
導覽有兩個主要的功能:
- 告訴使用者他們身處何處
- 讓使用者能到其他地方
此指引與指引三緊密合作,後者確保內容中的任何結構都要能被感知,而這也是導覽的關鍵之一。對於協助使用者在內容中的導向及在內容間的導覽來說,標題是格外重要的機制。許多輔助科技的使用者仰賴恰當的標題來略讀資訊並輕易定位出內容的不同段落。
8.1(檢測等級A)有機制得以跳過在多頁中重複出現的內容區塊。
8.2(檢測等級A)網頁有用標題來描述主旨或目的。
8.3(檢測等級A)如果網頁能依序導覽,且導覽順序將會影響到意義或操作,則可取得焦點的元件要以能保留意義與操作性的順序,來取得焦點。
8.4(檢測等級A)每一個鏈結的目的可以透過鏈結本身的文字或以鏈結文字加上能以程式化判定的鏈結脈絡予以確認,除非鏈接的目的對整體使用者來說均不明確。
8.5(檢測等級A)除非網頁是1段程序的結果或某個提供多種方法指出某一網頁在一組網頁之中的位置,除非此網頁是某個流程或步驟的結果。
8.6(檢測等級AA)用標頭及標籤來描述主旨或目的。
8.7(檢測等級AA)任何可由鍵盤操作的使用者介面都要有個操作模式,使鍵盤焦點指示可見。
8.8(檢測等級AAA)有提供使用者位於一組網頁中的位置的資訊。
8.9(檢測等級AAA)每一個鏈結的目的應僅由鏈接文字本身即可辨識,除非鏈接的目的對整體使用者來說均不明確。
8.10(檢測等級AAA)用區段標頭來組織內容。
指引九(可讀性):讓文字內容可讀並可理解
此指引的意圖在於讓文字內容能被使用者及輔助科技讀取,並確保有可理解的資訊。
有障礙的人體驗文字的方式有許多不同之處。有些人的體驗是視覺性的,有些是聽覺性的,有些是觸覺性的,有些是同時有視覺性及聽覺性的。有些使用者在理解書寫文字時會體驗到莫大的困難,然而若以念出聲、將關鍵程序及概念繪製成視覺圖案、翻譯成手語等方式時,卻能理解極度複雜且繁瑣的文件。對某些使用者來說,要從上下文脈絡中推論一個字詞或片語的意義很困難,尤其當這個字詞或片語用在不尋常之處或有獨特意義之時更是如此;對於這些使用者來說,閱讀及理解的能力可能要倚賴是否有特定的解釋,或者是否有將縮寫字或頭文字展開成完整的形式。包括具有語音功能及圖型應用程式在內的使用者代理,若沒有指明語言及文字走向的話,就可能無法正確地呈現文字;這對許多使用者來說可能是微不足道的小問題,對有障礙的使用者卻可能產生許多困擾。在某些若無字詞或發音資訊則無法判斷意義的情況下(例如同音異字或破音字),則也要有字詞解釋或發音的相關資訊。
9.1(檢測等級A)每1個網頁所使用的預設人類語言,都可以程式化的方式判讀。
9.2(檢測等級AA)除非是專有名詞、科技術語、不知名語言的字詞、接鄰文字的方言部分等情況,否則每一個段落或片語中所使用的人類語言,都可以程式化的方式判讀。
9.3(檢測等級AAA)對於不常見或限定用法的字詞或片語,包括俗語或諺語及行話,均有機制可指明其定義。
9.4(檢測等級AAA)要有機制來指明縮寫字展開後的全文或意義。
9.5(檢測等級AAA)當移除專有名詞及標題後,若文字需要超過國中程度的閱讀能力才可被理解,就要有輔助內容,或提供不需此閱讀能力即可理解的版本。
9.6(檢測等級AAA)某個字詞若不知其發音,就算依據前後文脈絡來判讀而仍會造成混淆時,就要有個機制來指明其發音。
指引十(可預期性):讓網頁以可預期的方式來呈現及運作
此成功準則的意圖是要協助有障礙的使用者,辦法是在網頁間以可預期的順序來呈現內容,並使各項功能的行為以及互動元件可預期。對某些使用者來說,要形成網頁的整體概觀很困難:螢幕報讀軟體以單維合成語音串流來呈現內容,使得要理解空間關連性變得較不易。如果元件在不同網頁中會出現在不同位置,則對認知能力受限的使用者來說就可能造成困惑。
舉例來說,螢幕放大鏡的使用者同時間只能看到局部畫面;若網頁的設計保持一致的版面布局能讓使用者更容易找到導覽列及其他的元件。在一組網頁中把重複的元件放置成相同的相對順序,能讓有閱讀障礙的使用者專注在螢幕的某個區域,而不用花費額外的時間解讀每一個鏈結的文字,手部受限的使用者也能更容易地知道要如何用最少的按鍵來完成任務;螢幕報讀軟體的使用者通常是以線性方式聽讀內容,維持重複元件有相同的相對報讀順序,也能讓聽讀內容的使用者更有效率地掌握網頁內容。
10.1(檢測等級A)當任何元件獲得焦點時,並不會使前後脈絡產生改變。
10.2(檢測等級A)除非使用者在使用元件前已被告知過相關的程式行為,否則變更任何使用者介面元件的設定時,都不會自動變更脈絡。
10.3(檢測等級AA)除非使用者做出了變更,否則在一組網頁中,反覆出現的導覽機制每次都要有相同的相對順序。
10.4(檢測等級AA)在一組網頁中,具有相同功能性的元件,就要有一致的識別。
10.5(檢測等級AAA)只有當使用者提出請求時,才開始變更脈絡,否則就要有個機制來關掉這類變更。
指引十一(輸入協助):幫助使用者避開及更正錯誤
人人都會犯錯,然而有點障礙的人要輸入完全沒錯的內容會更為困難。除此之外,這些人要發現自己犯了錯也更不容易。典型的錯誤指認方法對他們來說可能還不夠明顯,因為他們可能視野受限、色彩感知能力受限、或正使用輔助科技。此指引想要減少犯下的嚴重錯誤或無法逆轉的錯誤,增進所有錯誤被使用者注意到的可能性,並幫助使用者瞭解他們應該要如何更正錯誤。
11.1(檢測等級A)如果會自動偵測輸入的錯誤,則指明出錯的項目並以文字向使用者描述。
11.2(檢測等級A)當內容需要使用者輸入時,提供標籤或指引。
11.3(檢測等級AA)如果輸入的錯誤能夠自動地偵測出來,而且已知更正的建議,除非會危及安全性或內容的目的,否則就向使用者提供建議。
11.4(檢測等級AA)對於會造成法律義務或讓使用者發生財務交易的網頁來說,如果要從資料存放系統修改或刪除使用者可控制的資料、或要送出使用者測試回應時,下列各款需做到一項:
- 送出的結果可反悔。
- 由使用者所輸入的資料會先檢查有無輸入錯誤,並提供使用者更正的機會。
- 完成資料送出前,有個機制來讓使用者回顧、確認及更正資訊。
11.5(檢測等級AAA)有針對脈絡而作的協助說明。
11.6(檢測等級AAA)對於需要使用者送出資訊的網頁來說,下列各款至少須做到一項:
- 送出的結果可反悔。
- 由使用者所輸入的資料會先檢查有無輸入錯誤,並提供使用者更正的機會。
- 完成資料送出前,有個機制來讓使用者回顧、確認及更正資訊。
指引十二(相容性):針對目前及未來的使用者代理與輔助科技,最大化其相容性
此指引的目的是要支援現在及未來的使用者代理的相容性,尤其是輔助科技的部份。辦法是:
因為科技演變迅速,輔助科技的開發者要一直跟上迅速變更的科技會有難處,所以內容以遵循慣例及相容於應用程式介面的方式來表達會相當重要,如此輔助科技在新科技演進時才能更容易地與之搭配。
12.1(檢測等級A)對於用標記語言來實作的內容來說,除非經規格所容許,否則組件要有完整的開始與結束標籤、按規格巢狀編排、不得有重複的屬性,且任何ID都要獨一無二。
12.2(檢測等級A)對於所有的使用者介面元件(包括但不限於表單組件、鏈結及由腳本所產生的組件)來說,其名稱及角色要能用程式化的方法判定;其能由使用者所設定的狀態、屬性、值,則要能用程式化的方式設定;而使用者代理,包括輔助科技,則要有這些項目變更的通知。