一、前言

  上一篇文章提到了網頁如何檢測無障礙規範，但很多事情防範勝於未然，可以注意一下基本無障礙規範中的規定，養成習慣後自然就可以避免掉很多錯誤結果的修復時間，也可以培養良好的coding習慣唷～

二、無障礙網頁切版基本概念

1. 標題

• 頁面中必須包含至少一個<h1>，並且不能為空。
• 不能跳過<h2>直接定義<h3>，以此類推，如果我們頁面使用到<h5>標籤時，代表同個頁面上一定有<h1>、<h2>、<h3>、<h4>標籤。

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

2. 對特定tag需有額外說明

• 按鈕、連結需要使用「title屬性」額外說明內容。(參考連結:針對脈絡中的鏈結，用標題屬性來補充鏈結文字)

☑正確示範:

✅️連結正確示範：️
<a href="#" title="郵輪式列車 鐵道特色旅遊-了解詳情">了解詳情</a>

☒錯誤示範：

<a href="#">了解詳情</a>

• 圖片也為了讓視障朋友了解內容，需額外使用「alt屬性」說明圖片的內容。(參考連結:圖片組件需有替代文字屬性)

☑正確示範:

<img src="img.png" alt="2020 EMU500屏東線圓形便當空盒組 新品上市">

☒錯誤示範：

<img src="img.png">

3. 字級大小

  在 CSS 定義字級時，都要使用相對字級尺寸（如：% 或 em、rem ）；或具名字級尺寸（如： small、large），簡單來說就是不能用 px 定義字級。
  原因是有些人不是完全看不見，他可能會把系統的字級調大，如果用 px 定義的話，會把字大小的像素(px)給固定了，但如果是用相對字級就能夠讓字跟著縮放。
  另外，寫網頁常常會用到套件，在使用上要特別注意套件內的 CSS 字級大小定義。

☑正確示範:

.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}

三、結論與自我鼓勵

• 引用文章：前端切版前要注意什麼細節呢？
• 引用文章：認識無障礙網頁與分級

本文同步發佈於我的個人網站 Annie Code Life