無障礙網頁設計教學、要點整理

許多網頁設計師及前端工程師在碰到需要無障礙標章的網站時，面對文謅謅的規範，經常像是無頭蒼蠅，跌跌撞撞的花費許多時間才得以成功取得標章，在此筆者整理一些要點

國家通訊傳播委員會針對無障礙網站分級成四級標章，分別是 A 、 A+ 、 AA以及AAA四個等級，以 AAA 標章規範最為嚴格，無障礙規範索引。在此筆者將幾大要點整理：

一、文字大小必須使用em為單位。
    在文字的css定義大小時不可以使用px單位，必須使用em單位，這裡可以使用 線上工具 PX轉EM工具

二、符合巢狀結構
    每個網頁中使用h1~h6標籤時必須依順序由h1開始使用，網頁內不能有h1、h3卻沒有h2的情況。

三、圖片加上alt替代文字
    所有圖片必須加上alt替代文字，但如果這張圖片僅作為美編、排版等用途，alt內容留白，範例：

<img src="image.jpg" alt="">

四、連結加上title
    所有連結必須要加上title並說明連結去處，假設是以開新視窗的方式的連結必須加上"(另開新視窗)"，範例：

<a target="_blank" href="https://www.weiyuan.com" title="前往微源科技首頁(另開新視窗)">

五、網站使用javascript時需在html上加入未開啟javascript的提示
    基本上就是在html body中加入以下：

<noscript>您的瀏覽器不支援JavaScript功能，若本網站功能無法正常使用，請開啟瀏覽器JavaScript狀態</noscript>

六、文字顏色對比值要求
    文字與文字的背景顏色對比值要求需達到 4.5 : 1 ( AAA級為 7 : 1 )，可以使用線上工具 顏色對比度測量工具。

七、在網頁上方必須要有網站導覽頁面連結
    在網頁上方(可能會是主選單)必須要有網站導覽頁的連結，頁面的內容可以參考本站 網站導覽。

八、網站區塊快捷鍵
    網頁主要區塊必須有鍵盤快捷鍵(accesskey)的連結，通常會設有頁首、內容、側邊選單、頁尾等處。範例如下：

<a href="#menu" title="主選單區" accesskey="u">:::</a>

九、將tabindex="1"設定為跳到內容區的快捷鍵
    在網頁中使用鍵盤tab切換時第一個必須是跳到主要內容區的連結

<a href="#content" title="跳到主要內容區塊" tabindex="1">跳到主要內容區塊</a>

    為了不因為這個連結而影響視覺設計，可以使用下面方式將它隱藏

width: 0;
height: 0;
overflow: hidden;

    當連結聚焦(focus)時顯示出文字：

width: auto;
height: auto;

十、使用鍵盤tab切換時，所在的位置必須有明顯的css變化顯示目前游標所在位置
    這個功能其實瀏覽器都會針對目前的游標位置顯示藍色框(chrome)或是虛線(IE)，若是使用某些套件沒有顯示時可以參考以下CSS：

a:focus {
    outline: 2px solid blue !important;
}

以上為筆者針對無障礙標章網頁設計歸納出要點整理。