iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
自我挑戰組

新手全端工程師的職場成長歷程系列 第 20

Day20:【技術篇】無障礙網頁之前端切版基本概念

  • 分享至 

  • xImage
  •  

一、前言

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

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

1. 標題

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

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

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

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

☑正確示範:

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

☒錯誤示範:

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

☑正確示範:

<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


上一篇
Day19:【技術篇】無障礙檢測(freego)方式
下一篇
Day21:【技術篇】SSH 的基本運作原理
系列文
新手全端工程師的職場成長歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2021-10-07 23:21:42

原來無障礙是如此重要!

我要留言

立即登入留言