第七日：無障礙網頁設計重點 Checklist

2022 iThome 鐵人賽

DAY 7

自我挑戰組

無障礙網頁設計大叔日記系列第 7 篇

14th鐵人賽無障礙網頁設計 accessibility wai-aria a11y

我愛無障礙網頁設計的大叔

2022-09-13 09:58:06

1783 瀏覽

分享至

「哈囉，我是樂樂，要訂閱我的頻道喲～呵呵呵呵～」

現在每天醒來，腦海中都是某 Youtube 頻道的聲音，
根本就是起床號。

今天還是一直在下雨，早上想說趁著沒有下雨，
趕快騎電動車載小朋友上課，
結果剛出發就傾盆大雨，
結果弄得比推嬰兒車穿雨衣更狼狽，
所以今天大叔要快速的把私藏的常遇到的問題，
整理成 Checklist 發佈，
可能會有前幾篇提到的內容，就當複習吧，
今天要來早早結束這第七日。
（對七有種莫名的恐懼，應該是七夜怪談吧，煩死了）

規劃定位點（舊稱導盲磚） ::: ，使用在版面各主要區塊。
快捷鍵，除了每個定位點都有對應的快捷鍵，比較常見的快捷鍵還有搜尋。各瀏覽器的快捷鍵操作方式請參考 MDN 文件。
SEO：頁籤標題、頁面描述、關鍵字、favicon、社群分享圖片。
<h1> 到 <h6>：<h1> 只能出現一次且一定要出現，<h2> 到 <h6> 可以重複。<h1> 到 <h6> 需要按順序使用。每個網站的用法都不一樣，而我們的建議是， <h1> 只能出現一次，很適合用在網站 logo 上，輔以整個網站的名稱作為描述。<h2>，如果當頁面標題，就只出現一次就好，若當成章節標題，層級依序使用 <h2> 至 <h6>。但如果是在<article>裡，<h1>是可以重複被使用的，然後在這個獨立內容裡也是要按順序使用。
製作「跳至主要區塊」按鈕，方便跳過每頁都會重複出現的區域，例如跳過選單直接進到主要內容。
如果瀏覽器關閉了 javascript，最好使用 <noscript>content</noscript> 顯示內容。（雖然目前這個規定拿掉了，但還是建議順手做一做。）
<iframe> 需要有 title=""，如果 <a> 是另開視窗，則要使用 blank="_target", 並且加入 rel="noreferrer noopener" 和 "另開視窗" 等文字提示。
<img> 需要有 alt="" 屬性且內容必須有意義。如果是裝飾性質的圖片，沒有實質意義，還是要寫但沒有值， alt="" 。alt 屬性文字內容主要可以根據圖片以及其上下文內容而決定，一般建議最多 150 個字以下（但這沒有任何根據）。如果需要長描述，可以使用 aria-detail 搭配 id 使用，便可以報讀。注意：longdesc 已經過時。
<svg> 標題要寫在接續在 <svg> 之後，如：
```
<svg>
	<title></title>
	...
</svg>
```
若 svg 僅僅是圖示，可以使用 aria-hidden="true" focusable="false"
但因為還是要文字描述，所以可以再之後補上 <span class="visually-hidden">description</span> 補充。
<label for="id"> ，在表單內，使用 label 時，for 屬性必須對應到內容的 id。
<button> 必須要有內容，設計時可善加利用 visually-hidden。
<table> 的 <th> 需要標註是欄或列 <th scope="row/col">。
下載的檔案不可依賴特定文書商用軟體，且在連結裡要使用 title 寫出完整檔名，例如：<a title="操作手冊.pdf">
非文字其相鄰的顏色需具有 3：1 的對比度，例如 focus 狀態都，若無，另外還有至少 2px 厚。
「網站導覽」進入網站後，擺在 3 個步驟內就可以把注目焦點放在「網站導覽」頁面連結上。不可替換成其他文字，因為這是為了統一識別。
確保畫面放大 200% 都不會破版，記得還要檢查「只放大文字」200%（firefox 有此設定）。
常用 icon ： Fontawesome 無障礙網頁設計使用方法
在這些改變之下，仍不會破版：行高 1.5 倍以上(建議為 2 倍)、字元間距 0.14 倍以上、字間距 0.16 倍以上、段落間距 font-size 2倍以上。此為英文，中文可先根據此使用以及出版品規範。
驗證機制，根據 W3C ，目前仍然沒有完美的方式，但有以下建議：如果業主可以不用使用輸入框，推薦使用 google recaptcha v3，盡量以這種方式為主，若業主想要使用輸入框形式，則有 3 種方式選擇：需要有驗證圖形與聲音提示、寄送 email，如 hcaptcha以及撥打客服電話取得驗證碼。
設計稿建議至少針對紅綠色盲做設計。
除非是有其必要性，否則不可以鎖定行動裝置方向，例如學習鋼琴 app，就是有其橫向的必要性。
input 善用 autocomplete 屬性，方便使用者快速填入過去常使用的值。密碼請使用 autocomplete="new-password"，避免意外填寫現在的密碼。
非主要音訊（背景聲）小於主要語音音訊（前景聲） 20 分貝
影片要上字幕、不要自動播放
再次檢查指引5、指引8、指引12，避免被退件。
避免只使用顏色當作訊息，必要時使用多種提示引導。
資料視覺化相關規範可前往這篇文章閱讀
按鈕若是使用圖示，可以使用 aria-hidden="true", 並增加一個 <span class="visually-hidden">Close</span> 補充文字。
回頂端、下拉式選單、開燈箱按鈕點擊後，要注意焦點是否有跟著跳回去原本的地方。
非連結盡量不要用底線
跑馬燈方式可參考這篇文章
要有麵包屑
再次檢查鍵盤執行順序，螢幕報讀軟體有開、沒開都要測。且不能要求限定時間內完成，除非有特殊性，例如銀行服務。
送出的結果可反悔。
顏色對比：AA: 一般大小 4.5:1, 大文字或圖 3:1， AAA: 一般大小 7:1, 大文字或圖 4.5:1(大文字定義： 24px 或是粗體 19px ）。
字級請用相對單位，如 %, em, rem。
AAA 文字不可全齊（不能用 text-align: justify）
AAA 寬度不可以多於 80 個字元或字符(中日韓語系為 40)
RWD 如果只有垂直捲動，寬度大於 320px; 若是水平捲動，則要大於 256px 高度。
懸浮效果要可提供一種機制移除、指標在其區域內移動且內容不會消失、移出區域則消失。
如果有時間限定，則至少要有一種方式可以關掉或延長時間，且延長可 10 次以上。20 小時以上可以不用管。
畫面一秒鐘內不得閃爍三次。
動畫要可以終止。
任何可操作功能，必須大於 44px * 44px 大小，講 px 其實有點死，主要還是要看使用者使用的裝置，建議至少 54dp，Android 是建議至少 48dp。換算公式為 px = dp * (DPI/160)。
網頁語言的設定 <html lang="zh-Hant-TW">
相同的功能，要有一樣的識別。
檢查使用者輸入，提供錯誤提示。
非必要不要使用 ARIA
一些常見問題可參考講義
狀態提示，使用者不需要將焦點注目，就可以得知訊息。
字體沒有決定，只能視網站內容與風格而定，要達到可讀與易讀，可參閱 Jedi 的教學，從 108 頁開始閱讀。
最小文字不要小於 12px（如果情況允許，建議 18px）。同觸控區域一樣 px 寫死了，需要依據使用裝置去換算大小。