【無障礙網頁祕技】前端切版前要注意什麼細節呢？

Jill Hsu

9 min readApr 20, 2020

前言

在上篇【無障礙網頁祕技】基本介紹與分級中，我們了解什麼是無障礙網頁以及分級方式。這篇專注探討無障礙網站的「前端切版」有哪些該注意的地方，希望能幫助要開發無障礙網頁的團隊，包含工程師、 PM ；或是對無障礙網頁開發跟設計有興趣的朋友。

想舉一個自己切身體會的經驗：之前做無障礙網頁專案時，我收到設計師提供的兩個表格設計稿，我的任務是把它切版成網頁，於是用了先前開發一般網站的方式把表格寫出來並交付。

結果…後來才知道無障礙網頁的規範有特別定義表格的結構，要照它的方式，報讀軟體才能順利的把表格資料念給視障朋友。

最後，整個表格的 HTML 結構打掉重寫，結構不一樣所以 CSS 樣式也重新定義，也因此浪費了時間。所以事前對規範有些基本知識能事半功倍。

在上篇文章中，我們知道臺鐵網站就是符合AA等級的無障礙網頁，以下會以臺鐵網站作為舉例，提出一些覺得常見的注意事項。

正文開始！

切版前要注意的細節

細節一：標題標籤的使用

頁面中必須包含至少一個<h1>，並且不能為空。
不能跳過<h2>直接定義<h3>

可與下圖一起參照，在標題標籤使用上，每個頁面「至少」要有一個<h1>標籤作為主要標題，而且標籤裡一定要放東西，可放文字或圖片。
進一步定義次級標題的時候，不能跳過<h2>去使用<h3>標籤。以此類推，如果我們頁面使用到<h5>標籤時，代表同個頁面上一定有<h1>、<h2>、<h3>、<h4>標籤。

做個小練習，如果是下方的臺鐵簡介頁面，你會怎麼配置他的標題標籤呢？
提示：有<h1>、<h2>、<h3>

公布答案！

如果是以臺鐵網站的做法（見下圖），會把<h1>標籤放在左上角的LOGO圖上，這也是無障礙網頁常見的做法，<h1>會使用在整個網站通用的 LOGO 圖或是網站名稱上；<h2>標籤就用在本頁面的主題「臺鐵簡介-願景與營運目標」；而作為更次要標題的「願景」、「營運目標」、「營運策略」，就使用<h3>標籤。

備註：如果要考量SEO，也有網頁把<h1>標籤設置在內文標題上，例如第一銀行網站，舉台鐵把<h1>標籤設在logo是「常見」的做法，並不是「一定」要遵照。重點是要確保一個頁面「至少」有一個<h1>唷！

補充：對應的政府規範可參照提供描述性的標頭

細節二：按鈕、連結、圖片需加上額外說明

按鈕、連結需要使用「title屬性」額外說明內容。
圖片也為了讓視障朋友了解內容，需額外使用「alt屬性」說明圖片的內容。

✅️連結正確示範：️
<a href="#" title="郵輪式列車 鐵道特色旅遊-了解詳情">了解詳情</a>❌連結錯誤示範：
<a href="#">了解詳情</a>---------------------------------✅️圖片正確示範：️
<img src="img.png" alt="2020 EMU500屏東線圓形便當空盒組 新品上市">❌圖片錯誤示範：
<img src="img.png">

補充：對應的政府規範可參照針對脈絡中的鏈結，用標題屬性來補充鏈結文字、圖片組件需有替代文字屬性

細節三：表格使用 Table 結構

頁面上有用到表格時，需使用表格標籤（如：<table>）呈現表格。

這邊很容易踩雷的地方是因為：現在很多表格都不會用表格標籤寫，為了讓跨電腦手機裝置的體驗更好，很多時候會直接用<div>跟<span>來組成類表格；但無障礙網頁建議還是用最傳統的<table>表格標籤來寫。

✅️正確示範：<table border="1" 
  summary="此表格是建議搭乘車次，表格分為十直欄，第一直欄標示出發時間，第二到十直欄依序內容為：抵達時間、旅程時間、車種車次、經由、服務設施、狀態、全票票價、優待票票價、訂票。">
  <caption>建議搭乘車次</caption>
  <tr>
     <th scope="col">車種車次</th>
     <th scope="col">出發時間</th>
     <th scope="col">抵達時間</th>
     <th scope="col">行使時間</th>
  </tr>
  <tr>
     <td>區間1117</td>
     <td>06:18</td>
     <td>07:12</td>
     <td>54 分</td>
  </tr>
  <tr>
     <td>自強103</td>
     <td>05:37</td>
     <td>06:27</td>
     <td>39 分</td>
  </tr>
</table>

補充資料：對應的政府規範可參照使用表格標記來呈現表格資訊

細節四：定義字級大小用相對字級尺寸或具名字級尺寸

在 CSS 定義字級時，都要使用相對字級尺寸（如：% 或 em、rem ）；或具名字級尺寸（如： small、large），簡單來說就是不能用 px 定義字級。

原因是有些人不是完全看不見，他可能會把系統的字級調大，如果用 px 定義的話，會把字大小的像素 ( pixel ) 給固定了，但如果是用相對字級就能夠讓字跟著縮放。

✅️正確示範：️
.txt_large {font-size: 120%}
.txt_large {font-size: 2em}
.txt_large {font-size: 2rem}
.txt_large {font-size: larger}❌錯誤示範：
.txt_large {font-size: 18px}

另外，寫網頁常常會用到套件，在使用上要特別注意套件內的 CSS 字級大小定義！之前曾碰過無障礙網頁因為套用 Bootstrap，被檢測工具掃到好幾段 CSS 都用 px 定義字級，檢測因而沒有過；後來解法是把 Bootstrap 更新到 4 以上的版本（只要 Bootstrap 4 以上的無障礙程度都很好）。所以大家在使用套件上，也可以注意該套件是否支援無障礙。

補充：對應的政府規範可參照以CSS來指定不同呈現方式、任何CSS樣式規則均使用具名字型尺寸，或者使用百分比或em等相對字型尺寸單位

細節五：能用 Tab 完成整個頁面的瀏覽

要確保只按鍵盤 Tab 鍵時，能依序瀏覽網頁上的內容。

這點算是一個很方便自我檢測的點，在網頁切好版後，可以在自己電腦試著按 Tab 鍵，看是不是能夠每個內容都能照順序的瀏覽（見下方動畫）。

不知道大家最近有沒有預購口罩，政府的口罩預購系統也是無障礙網頁唷！如果是用電腦預購口罩的朋友，可以體驗看看用只用 Tab 鍵瀏覽的感覺。

（小提醒：如果 Tab不小心按過頭，可以用 Shift + Tab返回上一個內容）

補充：對應的政府規範可參照確認使用者不會困在內容中

細節六：設置定位點

定位點（原名導盲磚）主要用途在於幫助使用者快速定位及搜尋，顯示方式是利用三個冒號（:::）來代表，需要搭配快速鍵設計來使用。

以下圖為例（左上方藍色圈起處為定位點），如果我們今天目的是要訂火車票，使用者一進到這個頁面，只用 Tab 鍵慢慢點選內容的話，因為上面那排深藍色 Menu 展開後連結很多，要按很多次 Tab 鍵才會真的到填寫訂票資訊的地方。

但是現在我們有了定位點！這時只要使出「快捷鍵」大法，按下「Alt + C」就可以直接跳到主要的內容區塊，順利填寫資料完成訂票。

常用網站定位點快捷鍵如下：
Alt + U：上方功能區塊，包括回首頁、網站導覽、網站搜尋、字體選擇等。
Alt + C：中央內容區塊，為本頁主要內容區。
Alt + S：網站搜尋。
Alt + Z：下方功能區塊（一般是Footer）
(Mac 的 Alt 要換成 Control + Option + Shift)其快速鍵的HTML程式碼如下：
<a href="#U" title="上方功能區塊" id="AU" accesskey="U" name="U" style="">:::</a>

一般來說快捷鍵的設定是所有網站通用的，有些無障礙網站會另外把快捷鍵列出放在網站導覽裡，且額外補充各個區塊的頁面內容有什麼（見下圖）。

這裏要提醒的是，在 HTML 放置定位點後，不能用 display: none; 或是用 JavaScript 隱藏定位點，但是可以把定位點顏色設定成跟背景顏色一樣，讓它融在背景裡。

補充：什麼是定位點（原名導盲磚）

結語

很感謝你看到這裏！🙏🏻
這邊只列出幾個常見的要點，希望能夠有所幫助，如果想要觀看完整的規範，可至國家通訊傳播委員會的無障礙網頁開發規範2.0版。如果有相關經驗、或有興趣的朋友也歡迎互相交流：）有任何建議也歡迎回饋給我。

下一篇會從「介面設計🎨」的觀點，說明設計無障礙網頁要注意的事。

【無障礙網頁祕技】系列文章

【無障礙網頁祕技】基本介紹與分級
 【無障礙網頁祕技】前端切版前要注意什麼細節呢？
【無障礙網頁祕技】介面設計大補丸
【無障礙網頁祕技】檢測工具Freego操作方式 (即將推出✨)

謝謝您的閱讀：）
若您如果喜歡我的文章的話，歡迎按下「拍手」給我支持 👏👏👏

30個拍手：還滿喜歡這篇文章的
30個以上的拍手：很喜歡這篇文章，或希望能多看到相關類型的分享也歡迎追蹤我的 Medium 或加我 LinkedIn(連結請點我）