# 無障礙網頁設計教學、要點整理
- 發布日期：2020-08-30
- 作者：Ronnie Chang
- 分類：網頁設計
- 關鍵字：無障礙標章、網頁設計、教學
> 許多網頁設計師及前端工程師在碰到需要無障礙標章的網站時，面對文謅謅的規範，經常像是無頭蒼蠅，跌跌撞撞的花費許多時間才得以成功取得標章，在此筆者整理一些要點
> 許多網頁設計師及前端工程師在碰到需要無障礙標章的網站時，面對文謅謅的規範，經常像是無頭蒼蠅，跌跌撞撞的花費許多時間才得以成功取得標章，在此筆者整理一些要點
國家通訊傳播委員會針對無障礙網站分級成四級標章，分別是 A 、 A+ 、 AA以及AAA四個等級，以 AAA 標章規範最為嚴格，[無障礙規範索引](https://accessibility.ncc.gov.tw/Home/Info)。在此筆者將幾大要點整理：
**一、文字大小必須使用em為單位。**
在文字的css定義大小時不可以使用px單位，必須使用em單位，這裡可以使用 線上工具 [PX轉EM工具](https://www.weiyuan.com.tw/pxtoem)
**二、符合巢狀結構**
每個網頁中使用h1~h6標籤時必須依順序由h1開始使用，網頁內不能有h1、h3卻沒有h2的情況。
**三、圖片加上alt替代文字**
所有圖片必須加上alt替代文字，但如果這張圖片僅作為美編、排版等用途，alt內容留白，範例：
```
```
**四、連結加上title**
所有連結必須要加上title並說明連結去處，假設是以開新視窗的方式的連結必須加上"(另開新視窗)"，範例：
```
```
**五、網站使用javascript時需在html上加入未開啟javascript的提示**
基本上就是在html body中加入以下：
```
```
**六、文字顏色對比值要求**
文字與文字的背景顏色對比值要求需達到 4.5 : 1 ( AAA級為 7 : 1 )，可以使用線上工具 [顏色對比度測量工具](https://www.weiyuan.com.tw/contrast_ratio)。
**七、在網頁上方必須要有網站導覽頁面連結**
在網頁上方(可能會是主選單)必須要有網站導覽頁的連結，頁面的內容可以參考本站 [網站導覽](https://www.weiyuan.com.tw/guide)。
**八、網站區塊快捷鍵**
網頁主要區塊必須有鍵盤快捷鍵(accesskey)的連結，通常會設有頁首、內容、側邊選單、頁尾等處。範例如下：
```
:::
```
**九、將tabindex="1"設定為跳到內容區的快捷鍵**
在網頁中使用鍵盤tab切換時第一個必須是跳到主要內容區的連結
```
跳到主要內容區塊
```
為了不因為這個連結而影響視覺設計，可以使用下面方式將它隱藏
```
width: 0; height: 0; overflow: hidden;
```
當連結聚焦(focus)時顯示出文字：
```
width: auto; height: auto;
```
**十、使用鍵盤tab切換時，所在的位置必須有明顯的css變化顯示目前游標所在位置**
這個功能其實瀏覽器都會針對目前的游標位置顯示藍色框(chrome)或是虛線(IE)，若是使用某些套件沒有顯示時可以參考以下CSS：
```
a:focus { outline: 2px solid blue !important; }
```
以上為筆者針對無障礙標章網頁設計歸納出要點整理。
## 熱門文章
- [Python3 出現 ModuleNotFoundError: No module named 'requests'](/article/88)：使用 Python3 出現 ModuleNotFoundError: No module named 'requests' 解決方式
- [CentOS 設定 SFTP 教學](/article/81)：在centos中建立新帳號，限制只能使用sftp，並且只能使用指定的目錄，並保持apache可以正常運作Laravel專案。
- [HTML input上傳檔案類型限制accept](/article/82)：HTML使用input上傳檔案時，若想要限制檔案的類型時可以使用accept屬性。
- [PHP Laravel 取得客戶端IP](/article/68)：PHP Laravel 取得客戶端IP的方式介紹
- [Composer update 出現 proc_open(): fork failed - Cannot allocate memory](/article/85)：Composer update 出現 proc_open(): fork failed - Cannot allocate memory
## 連結
- [回文章列表](/article)
- [聯絡我們](/contact)