無障礙網頁設計入門

選擇支援無障礙功能的內容管理系統

現今的網站大多會使用「內容管理系統」 ( Content Management Systems，簡稱 CMS ) 來協助網站的開發與建置，例如常見的 WordPress、Joomla、Drupal 等。不論您使用哪種 CMS，請先確定您所使用的 CMS 所產生出來的網頁內容支援無障礙網頁設計。

CMS 都會提供一個後台管理系統讓使用者編輯網頁內容，舉例來說：當使用者在網頁中以視覺化方式插入一張圖片時，CMS 就會在網頁中插入相關的 <img> 網頁標籤，並自動加上如 title、或 alt 等屬性，以符合無障礙網頁的設計要求。因此挑選支援無障礙功能的 CMS，會有助於無障礙網站的開發與建置。

不要使用表格創建網站的佈局

當 screen reader 遇到表格時，都會通知使用者有一個表格，其中包含 x 列和 y 行的內容，若使用 <table> 方式進行對網頁的排版工作，會對 screen reader 的使用者造成困擾，並且，網頁的內容也可能會與視覺順序不匹配的順序讀取。此外，用表格創建網站的佈局會讓網站的響應式功能造成一定程度的困難度，因此，不要使用表格創建網站的佈局，請利用 CSS 樣式表來創建您的網站佈局。

妥善的組織網頁內容

正常人在瀏覽網頁內容時，很容易依據字體的大小或顏色來判斷標題，以及瞭解網頁內容的架構，但 screen reader 的使用者就無法感受到這些變化，改變字體的大小或顏色對他們來說是沒有意義的，screen reader 只能靠 H1，H2，H3 … H6 這些標題標籤 ( Heading tags ) 來瞭解網頁內容的架構，因此正確的使用標題標籤來組織網頁內容，會有助於 screen reader 解讀。

使用 H1, H2,…H6 標示出標題，不要僅改變字體大小或顏色，例如：網頁標題用 H1，內容的主標題用 H2、副標題用 H3。
不要直接改變標題標籤的格式，可以使用 CSS 樣式表來指定字體顏色，字體大小，以及背景。例如使用下列的語法：
```
<h3 class="heading-h3">這是內容主標題</h3>
```
然後在 CSS 樣式表中設定 .heading-h3 的樣式。這種做法允許具有色覺或低視力的使用者，可以用他們喜歡的樣式表覆蓋有問題的樣式表。
不要跳過標題的級別，例如從 H1 直接跳到 H3，這會讓 screen reader 的使用者誤認是否有些資料不見了 ( 因為少了 H2 )。
利用段落標籤 P 區隔每個段落，不要使用換行的 BR 標籤，有些 screen reader 可以從 P 跳到 P，但不能從 BR 跳到 BR。

為圖片添加適當的替代文字

圖片在網頁中廣泛的被使用，有些圖片提供資訊 ( 如統計圖、組織圖 )，有些圖片當做連結，有些圖片當做背景，還有些圖片只是用來裝飾網頁。為了讓 screen reader 解讀圖片的內容，務必要為圖片提供替代文字 ( alt 屬性 )，這也是無障礙網頁的檢測重點。如何正確的為圖片添加替代文字，請參考圖片替代文字的基本規則。

為連結 ( link ) 提供有意義且具描述性的文字

當網頁內容中包含連結 ( link ) 時，要使用明確的描述性文字，例如「點擊這裏」就不是一個很好的描述性文字，並且對 screen reader 的使用者是完全沒有意義的。另外常看到的「更多」按鈕也不是很好的連結文字，使用「更多校園公告」、「更多活動花絮」這樣的文字敘述，會讓人比較容易理解。

小心的使用顏色

善用對比配色，不但可使頁面內容更豐富，更可以讓顏色缺陷的使用者也能順利瀏覽網頁內容，請務必謹慎使用色彩對比度，這也是無障礙網頁檢測的一個重點。WCAG 2.0 對於色彩的對比度要求如下：

AA 等級
一般字體： 3：1
大型字體： 4.5：1

AAA 等級
一般字體： 7：1
大型字體： 4.5：1

註：大型字體是指 14pt ( 通常為 18.66px ) 以上的粗體字，或 18pt ( 通常為 24px ) 以上的大型文字。

如要測試配色的對比度，可以到下列網站：
WebAIM ( Web Accessibility in Mind )

設計無障礙的表單

當表單欄位沒有正確的的標籤 ( label ) 時，screen reader 的使用者可能不知道這個欄位要輸入什麼類型的內容，因此每個表單欄位都必需要有一個定位良好的描述性標籤。一個無障礙的表單應注意下列事項：

每一個表單欄位都必需要有一個對應的 <label> 標籤，並且用 <label for=”…”> 標示出對應的表單欄位的 ID。
每一個表單欄位都必需要有 title 屬性。
當偵測到輸入錯誤的資料時，必需以文字方式將錯誤訊息提供給使用者。
如果表單是用來填寫一些重要的個資時，必需在送出表單前能讓使用者檢視或修改內容。

確保所有的內容都可以透過鍵盤以邏輯方式操作

行動裝置或 screen reader 都無法使用滑鼠操控網頁，screen reader 的使用者利用 tab 和鍵盤方向鍵瀏覽網頁內容。不像滑鼠可以在網頁中任意跳躍，screen reader 僅能順序性的讀取網頁內容，因此 tab 鍵的移動順序應該要和視覺順序相匹配。
至於內容比較複雜的網站，要在每個頁面的頂部提供「跳至主要內容」的按鈕，這樣，僅鍵盤的使用者就不必為了獲取主要內容而要逐一通過頁面的 Header 和功能表。
配合網頁的架構，應在各個區塊設置導盲磚 ( Accesskey )，以方便 screen reader 的使用者可以利用快捷鍵直接跳到該區塊。
網站中常看到的階層式功能表，對於滑鼠 hover 啟動子功能表的功能，也必需要讓鍵盤操作者能順利訪問到所有項目。
針對動態的內容，如 popup 視窗、頁籤式 (Tabs) 的內容、收合式 ( Accordion ) 的內容，也都要提供鍵盤可操作的功能，避免讓使用者陷在裏面無法返回主頁面。
附帶一提，網頁中若崁入影片，不要啟動「自動播放」，並且要確定播放器可以與鍵盤一起使用。此外，所有的影片都必需有隱藏式字幕 ( Video Transcript ) 和說明 ( Video Captions )。