语义化HTML标签提升可访问性：用<header><nav><main>替代<div>明确页面结构；<button>和按交互意图严格区分；图片alt属性必填且准确；表单控件必须绑定<label>；语义标签需与内容意图一致。
用 <header> <nav> <main> 替代 <div> 布局
辅助技术（如屏幕阅读器）依赖语义结构理解页面逻辑。纯 <div> 嵌套会让它们只读出“division”，无法区分导航、标题区或主体内容。
-
<header>应包裹站点标识、主标题，而非仅样式居中的<div class="header"> -
<nav>必须包含一组导航链接，且建议加aria-label="主导航"（尤其页面含多个<nav>时） -
<main>页面唯一，且不能嵌套在<article>或<aside>内；屏幕阅读器可通过快捷键直接跳转至此
<button> 和 <a> 别混用，交互意图必须明确
点击触发 JS 行为？用 <button>。跳转到新 URL？用 <a href>。混用会导致键盘焦点、屏幕阅读器播报、默认行为全部错乱。
-
<button onclick="submitForm()">提交</button>✅ 可聚焦、可回车触发、自动有role="button" -
<a href="#" onclick="submitForm()">提交</a>❌ 点击后 URL 变成#，按回车会滚动到页首，且需手动加role="button" tabindex="0"才算勉强可用 - 若必须用
<a>模拟按钮（如禁用 JS 场景），至少设href="javascript:void(0)"并补全aria-label
图片的 alt 不是可选项，而是强制识别路径
对屏幕阅读器而言，缺失 alt 的 <img> 相当于“此处有一张图，但不知道是什么”——它会读出文件名（如 icon_menu.png），或完全跳过。
- 装饰性图片：用
alt=""（空字符串），明确告知辅助工具忽略 - 信息性图片：描述内容本身，不是“一张图显示……”。例如商品图用
alt="黑色圆领针织衫，袖口有白色条纹"，而非alt="商品图片" - 图文混合场景（如图标+文字按钮）：图标用
alt=""，文字本身已提供含义，重复描述反而干扰
表单控件必须绑定 <label>，别只靠视觉对齐
仅靠 CSS 把文字放在输入框旁边，屏幕阅读器无法自动关联两者。用户聚焦 <input> 时，听不到这是“邮箱”还是“密码”。
立即学习“前端免费学习笔记（深入）”；
- 显式绑定：用
for和id匹配，<label for="email">邮箱</label><input id="email" type="email"> - 隐式绑定：把
<input>包进<label>，更简洁且无需 ID：<label>邮箱<input type="email"></label> - 避免仅用
placeholder当标签——它在输入后消失，且很多辅助工具不读placeholder
<form>
<label for="search">搜索关键词</label>
<input id="search" type="search" name="q">
<fieldset>
<legend>通知方式</legend>
<label><input type="checkbox" name="notify" value="email"> 邮件提醒</label>
<label><input type="checkbox" name="notify" value="sms"> 短信提醒</label>
</fieldset>
</form>
语义标签不是“写了就达标”，关键在是否与内容真实意图一致。比如用 <article> 包裹广告位，或给搜索框加 role="navigation"，反而会误导辅助工具。可访问性失效往往发生在语义被滥用，而不是没用。 
