Day20：【技术篇】无障碍网页之前端切版基本概念

一、前言

  上一篇文章提到了网页如何检测无障碍规范，但很多事情防范胜於未然，可以注意一下基本无障碍规范中的规定，养成习惯後自然就可以避免掉很多错误结果的修复时间，也可以培养良好的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