可访问性
aria-label/role 无障碍属性、alt 文本、语义化、键盘导航
可访问性
Web 可访问性（A11y） 确保所有用户（包括残障人士）都能正常使用你的网页。
学完本章你将： 掌握 aria 属性、alt 文本、语义化、键盘导航。
alt 文本
html
<!-- ✅ 有用的描述 -->
<img src="chart.png" alt="2024年Q4销售额增长30%的柱状图">
<!-- ✅ 纯装饰图片用空 alt -->
<img src="decoration.png" alt="">
<!-- ❌ 无 alt -->
<img src="chart.png">aria 属性
html
<!-- aria-label：给屏幕阅读器提供标签 -->
<button aria-label="关闭弹窗">✕</button>
<nav aria-label="主导航">
<a href="/">首页</a>
</nav>
<!-- aria-hidden：对屏幕阅读器隐藏 -->
<span aria-hidden="true">🎉</span> 恭喜！
<!-- role：标记元素角色 -->
<div role="alert">操作成功！</div>
<div role="navigation">...</div>表单可访问性
html
<!-- ✅ label 关联 input -->
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<!-- ✅ fieldset 分组 -->
<fieldset>
<legend>选择你的兴趣：</legend>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编程</label>
</fieldset>
<!-- ✅ 错误提示 -->
<input type="email" aria-describedby="email-hint" required>
<span id="email-hint">请输入有效的邮箱地址</span>键盘导航
html
<!-- ✅ 原生可聚焦元素（a/button/input/select/textarea）无需额外处理 -->
<!-- ✅ 用 tabindex 控制 Tab 键顺序 -->
<div tabindex="0">可通过 Tab 键聚焦</div>
<!-- ✅ skip link：跳过导航直达内容 -->
<a href="#main-content" style="position: absolute; top: -40px; /* 聚焦时显示 */">
跳转到主内容
</a>
<main id="main-content">...</main>