跳到主要內容區塊

網站內容辨識元素的無障礙設計

在網站上提供辨識的元素可透過色彩、聲音與文字,然而,不同的使用者或不同的使用情境下,在這些元素的辨識程度仍有明顯的差異性存在,甚至有明顯的使用障礙,例如色盲無法分辨顏色、視力不佳的人難以辨識顏色對比不足的文字區塊、網站提供的影音可能對使用螢幕報讀器產生干擾、影音的背景音雜訊干擾等,因此,在網站無障礙規範2.0的可辨識指引之中,即提供對於這些元素善加以考量設計,以提供任何情境下的使用皆能掃除障礙,而讓使用者能獲得最佳的網站瀏覽體驗。

一、不用色彩做為傳遞訊息唯一方式,例如在網站文章段落中,表明用紅色標示重點字詞、連結及路線圖僅用顏色表示等,將造成視覺障礙者或黑白列印時無法辨識。(A)

用顏色表示選項之設計示意圖

二、網頁上有播放超過2秒以上的影音時,提供使用者可關閉功能。最近,Facebook對於影片除了原先就有的自動播放功能外,同時會播放出聲音,所以增加關閉聲音的功能。(A)

三、製作純音訊內容時(驗證\機制語音檔、口語音樂表達等除外),盡量不要有背景聲音,避免不必要的干擾發生;若有背景聲音,須能提供使用者可以自行關掉,並且在播放過程,背景音應低於主音20分貝。(AA)

四、文字與影像文字視覺(Logo除外)呈現時,AA等級至少4.5:1、AAA等級至少7:1(測試工具清單連結),並且文字放大2倍,不會失去內容或功能性。網頁內容需製作影像文字時,使用CSS讓文字取代成影像文字,如此仍保留文字屬性內容而非圖片,更具可及性。(AA、AAA)

五、文字區塊的視覺呈現需提供使用者可選擇前景及背景色彩、寬度不可多於80個字元或字符、文字不可全齊、段落行距及間距至少1.5倍行距,文字要能夠放大2倍閱讀時,使用者不需水平捲動視窗。(AAA)

表1:網站內容辨識元素與等級對照表

網頁元素與等級

A

AA

AAA

色彩

不用色彩做為傳遞訊息唯一方式

--

--

聲音

提供關閉、暫停、調整音量等控制措施

--

純音訊內容,以下至少符合一項條件:

  • 不含任何背景聲音
  • 背景聲音可以關掉
  • 背景音要低於前景音20分貝

文字

--

文字與影像文字視覺呈現至少4.5:1

文字區塊的視覺呈現需做到:

  • 使用者可選擇前景及背景色彩
  • 寬度不可多於80個字元或字符
  • 文字不可全齊
  • 段落行距、間距至少1.5倍行距
  • 文字要能夠放大至百分之兩百,並且在全螢幕視窗中閱讀時,使用者毋須水平捲動視窗即可讀

除字幕與影像文字外,文字可放大至200%,不會失去內容或功能性

文字與影像文字視覺呈現至少7:1

使用CSS將文字取代成影像文字,並提供使用者介面控制元件來加以切換

除非有必要,否則影像文字僅用於純裝飾

備註:「--」表示無該等級的要求。

 

參考來源:

  1. 無障礙網路空間服務網,https://www.handicap-free.nat.gov.tw/Home/Info
  2. Web Content Accessibility Guidelines (WCAG) 2.0,https://www.w3.org/TR/WCAG20/。