语义化标签是网页可访问性的结构基础，必须用<button>、<h1>-<h6>、<label>等原生标签构建内容层级，ARIA仅作补充；焦点管理、颜色对比度（≥4.5:1）、点击区域（≥44×44px）和键盘导航闭环测试缺一不可。
语义化标签不是装饰，是结构骨架
浏览器、屏幕阅读器和搜索引擎靠 HTML 标签理解内容层级和角色。用 <div> 套 <div> 写按钮或标题，等于主动屏蔽辅助技术。
- 按钮必须用
<button>，不要用<div onclick="...">—— 后者默认不可聚焦、无键盘交互、不被 AT（辅助技术）识别 - 标题用
<h1>到<h6>严格嵌套，跳级（如<h2>后接<h4>）会打乱阅读流 - 表单控件必须配
<label>，且通过for或包裹方式绑定id；<input type="checkbox">单独写没<label>，视障用户无法知道它代表什么
aria-* 属性不能补救语义缺失，只能增强已有语义
aria-label、aria-labelledby、aria-hidden 这些属性不是“给 div 加语义”的捷径。它们只在语义已正确的基础上起补充作用。
- 如果用了
<button>，通常不需要aria-label—— 按钮文本本身已是可访问的名称 -
aria-hidden="true"加在父容器上，子元素即使有aria-label也会被完全忽略；常见错误是给弹窗遮罩层加aria-hidden="true"，却忘了把焦点锁进弹窗内 -
role="button"只该用于确实无法改用<button>的遗留场景（比如第三方组件封装），同时必须手动处理tabindex="0"、Enter/Space键响应和aria-pressed
焦点管理不是“加上 tabindex 就完事”
键盘用户依赖 tab 键线性遍历可交互元素。默认可聚焦元素（<a>、<button>、<input> 等）天然支持；其他元素加 tabindex="0" 后能聚焦，但不等于能操作。
- 模态框打开时，焦点必须立即移入第一个可聚焦项，且 tab 键要在模态框内循环（
tabindex不解决循环，得用 JS 拦截keydown） -
tabindex="-1"仅用于让元素可通过 JS.focus()聚焦，但它本身不在 tab 顺序中 —— 别误以为这是“隐藏焦点”的方法 - 动态插入的内容（如 AJAX 加载的列表）若含可聚焦元素，需在插入后手动将焦点设到合理位置，否则键盘用户会卡在插入点前
颜色对比度和尺寸问题常被视觉设计师忽略
WCAG AA 级要求文本与背景对比度 ≥ 4.5:1（大号文本 ≥ 3:1）。这不是“看着差不多就行”的主观判断，而是工具可验证的硬指标。
立即学习“前端免费学习笔记（深入）”；
- 禁用纯灰文字（如
#999on#fff对比度仅 2.7:1）；用 WebAIM 对比检查器 实测，别信设计稿里的“视觉效果” - 点击区域最小尺寸：触屏设备要求 ≥ 44×44px，PC 端建议 ≥ 24×24px；
<input type="checkbox">原生尺寸太小，必须用label扩大热区，或通过padding+min-width/min-height调整 - 避免仅用颜色传递信息 —— “必填项标红”必须搭配 * 或 aria-required="true" + 文本说明，否则色觉障碍用户无法识别
可访问性不是加几个 ARIA 属性就达标，而是从第一行 HTML 开始，把结构、交互、视觉三者当成一个闭环来设计。最常被跳过的环节，是键盘导航下真实走一遍流程 —— 那时候才会发现 tab 键卡在哪、焦点丢失在哪、屏幕阅读器读出来的是不是你想表达的。
