一、前言

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

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

1. 標題

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

HTML標題標籤使用層級 (來源：國家發展委員會)

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

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

&#9745;正確示範:

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

&#9746;錯誤示範：

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

&#9745;正確示範:

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

&#9746;錯誤示範：

1
<img src="img.png">

3. 字級大小

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

&#9745;正確示範:

1
2
3
4
.txt_large {font-size: 120%}
.txt_large {font-size: 2em}
.txt_large {font-size: 2rem}
.txt_large {font-size: larger}

&#9746;錯誤示範：

1
.txt_large {font-size: 18px}

三、結論與自我鼓勵