引入
HTML 可访问性是为了让更多人都能正常使用网页，包括使用屏幕阅读器、键盘操作、弱视或色弱的用户。
它不是额外的高级功能，而是写网页时应该考虑的基础体验。
正文
定义
定义
可访问性是指网页内容和功能对不同能力、不同设备、不同使用方式的用户都尽量可用。
简单说，就是网页不只给“鼠标正常点击、眼睛正常观看”的用户使用，也要尽量照顾其他使用场景。
使用语义化标签
语义化标签能帮助浏览器和辅助工具理解页面结构。
<header>
<h1>网站标题</h1>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容。</p>
</article>
</main>比起全部使用 <div>，语义化标签更容易被屏幕阅读器理解。
图片替代文本
alt 用于给图片提供替代描述文本。
<img src="cat.jpg" alt="一只躺在沙发上的橘猫">如果图片加载失败，或者用户使用屏幕阅读器，alt 就能说明图片内容。
如果图片只是装饰，可以使用空 alt。
<img src="line.png" alt="">表单标签
<label> 可以把说明文字和表单控件关联起来。
<label for="email">邮箱：</label>
<input id="email" type="email" name="email">这样点击“邮箱”文字时，也能聚焦到输入框，对鼠标和触屏用户都更友好。
标题层级
标题应该按结构使用，而不是只为了字体大小。
<h1>网页主标题</h1>
<h2>第一部分</h2>
<h3>第一部分的小节</h3>清晰的标题层级能帮助用户快速理解页面结构。
链接文字
链接文字应该说明点击后去哪里。
<a href="about.html">查看关于我们</a>不建议大量使用没有说明性的链接文字。
<a href="about.html">点击这里</a>“点击这里”单独看不出链接目标，不利于理解。
键盘操作
网页功能尽量不要只能用鼠标操作。
按钮、链接、输入框等元素默认支持键盘聚焦。
<button type="button">打开菜单</button>如果用普通 <div> 假装按钮，就可能影响键盘和辅助工具使用。
iframe 标题
<iframe> 建议添加 title，说明嵌入内容是什么。
<iframe src="map.html" title="公司地址地图"></iframe>否则使用辅助工具的用户可能不知道这个 iframe 的作用。
视频字幕
视频内容可以通过 <track> 添加字幕。
<video src="lesson.mp4" controls>
<track src="lesson.vtt" kind="subtitles" srclang="zh" label="中文">
</video>字幕可以帮助听力障碍用户，也方便静音观看。
特点
- 可访问性关注的是更多用户能不能顺利使用网页
- 语义化标签能帮助辅助工具理解页面结构
- 图片应根据情况提供合适的
alt - 表单控件应配合
<label>使用 - 链接文字应该清楚说明目标
- 页面功能尽量支持键盘操作
- 字幕、标题层级、清晰结构都能提升可访问性
注意事项
- 不要把重要信息只放在图片里，图片应有文字说明或
alt - 不要用
<div>随便模拟按钮，能用<button>就用<button> - 不要跳级乱用标题，例如从
<h1>直接跳到<h5> - 链接文字不要都写“点击这里”
- 颜色不要作为唯一提示方式，色弱用户可能分不清
- 自动播放声音可能影响用户体验
- 可访问性不是只给少数人用，好的结构对所有用户都有帮助
理解
可以把可访问性理解为“让网页更容易被所有人使用”。
它不是只关注页面好不好看，而是关注用户能不能看懂、听懂、点到、输入、导航。
HTML 写得清楚，很多可访问性问题一开始就能避免。
引出
理解可访问性之后，可以继续学习 HTML 语义化标签 和 HTML SEO 基础，它们都依赖清晰的页面结构。