Accessibilities

無障礙網站一從開始到放棄

檢測等級 A:基本的需求。

 

檢測等級 AA:可移除網站內容的顯著障礙。

 

檢測等級 AAA:可進一步改善網站內容的可及性。

檢測軟體:

(檢測時記得開啟「啟用 javascript」)

(如果全站檢測結果出來,只有顯示「一個網站」結果,那就是失敗)

滿滿的 rules

四原則

  • 可感知
  • 可操作
  • 可理解
  • 穩健性

十二指引

  • 替代文字
  • 時序媒體
  • 可調適
  • 可辨識
  • 鍵盤可操作
  • 充足時間
  • 防痙攣
  • 可導覽
  • 可讀性
  • 可預期性
  • 輸入協助
  • 相容性

Rule1: 替代文字

<img alt="必須要有意義的描述" src={src} />
軟體檢測 人工檢測
<img> alt 有 alt 就過 需有意義
連續圖片 X 只需有一個描述
CAPTCHA 驗證 圖片 alt 為"驗證碼" 需有語音播放
<img alt="必須要有意義的描述" src={src} />
<img alt="" src={src2} />
<img alt="" src={src3} />

(只整理常用的)

A

A

A

Rule2: 時序媒體

軟體檢測 人工檢測
純視訊 X 要有描述
純音訊 X 要有字幕
即時串流 X 要有字幕
即時串流 X 需有手語翻譯

(只整理常用的)

A

A

AA

<video>
  <source src="video.mp4" type="video/mp4" />
</video>
<p>
  內容描述:<br />
  描述描述述描述述描述
</p>

AAA

Rule3: 可調適

軟體檢測 人工檢測
 <p>+<h1,2,3..> 若有 <p>,要有 <h> X
DOM 順序 = 視覺 X V
使用 <table> 呈現表格 X 不能用 div 唷 ^_^

(只整理常用的)

A

A

<h2>段落標題</h2>
<p>段落1</p>
<p>段落2</p>

A

Rule4: 可辨識

軟體檢測 人工檢測
 物件 onFocus 時 X 物件需有明顯 css 變化
px => em V X
網頁可放大 200% X 需能操作正常

(只整理常用的)

A

AA

.input {
  ':focus': {
    
  }
}
.text {
  font-size: 1em;
}

AA

Rule5: 鍵盤可操作

軟體檢測 人工檢測
 只使用 tab, enter... X 能操作整個網站

(只整理常用的)

A

必須確保整個網站能不使用滑鼠而操作正常

Rule6: 充足時間

軟體檢測 人工檢測
 有時限內容,需能暫停、延長 X V
閃動必須 < 5 秒 X V

(只整理常用的)

A

A

除非為「必要事件」如:即時拍賣

否則計時皆需提供延長、暫停、關閉...等等手段

Rule7: 防痙攣

軟體檢測 人工檢測
 1秒鐘之內,會閃爍超過 3 次 X V

(只整理常用的)

A

Rule8: 可導覽

軟體檢測 人工檢測
 使用 nav 將連結分群 V X
<a> 存在 title V 需有意義
導覽/搜尋功能、網站地圖、定位點 X V
描述性標頭&標籤 X V
使用標頭來組織網頁(h1..h6) V V

(只整理常用的)

A

<nav>
  <a href=".../page1.html" title="前往頁面1"></a>
  <a href=".../page2.html" title="前往頁面2"></a>
</nav>

A

A

<label htmlFor="myName">名字:</label>
<input id="myName" type="text" />

AA

AAA

Rule8: 可導覽

(只整理常用的)

關於描述性標頭...

Rule9: 可讀性

軟體檢測 人工檢測
 root 有指定語言屬性 (lang) V V

(只整理常用的)

A

<html lang="zh-TW">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Rule10: 可預期性

軟體檢測 人工檢測
 下載檔案格式規定 ODF, PDF, HTML
(不可為 doc?x, ppt?x)
同左
變更網頁脈絡 X focus 時,不可觸發脈絡變更

(只整理常用的)

A

A

Rule11: 輸入協助

軟體檢測 人工檢測
 提供欄位錯誤說明 X V
送出成功後,提供成功的回饋 X V
有法律義務/財務交易時,
提供確認、修改、反悔機制
X V

(只整理常用的)

A

A

AA

Rule12: 相容性

(只整理常用的)

<!DOCTYPE html>

符合 W3C 標準規格

Rule....13 ?

網頁要能在 IE 上執行

網頁要能在 IE 上執行

網頁要能在 IE 上執行

雖然沒有明定,但各種人工檢測會利用 IE 當瀏覽器做測試

單一頁面最多只能設置 5 個定位點

Alt+U:右上方功能區塊
Alt+C:中央內容區塊,為本頁主要內容區。
Alt+S:網站搜尋。
Alt+Z:下方功能區塊。

定位點(導盲磚)

(mac 的 Alt = control+option)

Tips

將 h1 設置在網站的主 logo 上,能確保所有頁面都有 h1

Tips

將定位點用與背景色相同之顏色,使其溶於背景中

(不可用 opacity: 0 / display: none)

Summary

美觀

Designer

開發

Developer

無障礙

Accessible

美觀

Designer

開發

Developer

無障礙

Accessible

...還有 IE 唷 ^_^

參考資料

Accessibilities

By Travor Lee

Accessibilities

  • 176