语义化标签是网页可访问性的结构基础，必须用、-、等原生标签构建内容层级，aria仅作补充；焦点管理、颜色对比度（≥4.5:1）、点击区域（≥44×44px）和键盘导航闭环测试缺一不可。
语义化标签不是装饰，是结构骨架
浏览器、屏幕阅读器和搜索引擎靠 HTML 标签理解内容层级和角色。用 <div> 套 <code><div> 写按钮或标题，等于主动屏蔽辅助技术。<ul><li>按钮必须用 <code><button></button>，不要用 <div onclick="..."> —— 后者默认不可聚焦、无键盘交互、不被 AT（辅助技术）识别<li>标题用 <code><h1></h1> 到 <h6></h6> 严格嵌套，跳级（如 <h2></h2> 后接 <h4></h4>）会打乱阅读流
<label></label>，且通过 for 或包裹方式绑定 id；<input type="checkbox"> 单独写没 <label></label>，视障用户无法知道它代表什么aria-* 属性不能补救语义缺失，只能增强已有语义
aria-label、aria-labelledby、aria-hidden 这些属性不是“给 div 加语义”的捷径。它们只在语义已正确的基础上起补充作用。
- 如果用了
<button></button>，通常不需要aria-label—— 按钮文本本身已是可访问的名称 -
aria-hidden="true"加在父容器上，子元素即使有aria-label也会被完全忽略；常见错误是给弹窗遮罩层加aria-hidden="true"，却忘了把焦点锁进弹窗内 -
role="button"只该用于确实无法改用<button></button>的遗留场景（比如第三方组件封装），同时必须手动处理tabindex="0"、Enter/Space键响应和aria-pressed
焦点管理不是“加上 tabindex 就完事”
键盘用户依赖 tab 键线性遍历可交互元素。默认可聚焦元素（@#@#@#@#@#@#@#@#@#@0 实测，别信设计稿里的“视觉效果”<li>点击区域最小尺寸：触屏设备要求 ≥ 44×44px，PC 端建议 ≥ 24×24px；<code><input type="checkbox"> 原生尺寸太小，必须用 label 扩大热区，或通过 padding + min-width/min-height 调整
可访问性不是加几个 ARIA 属性就达标，而是从第一行 HTML 开始，把结构、交互、视觉三者当成一个闭环来设计。最常被跳过的环节，是键盘导航下真实走一遍流程 —— 那时候才会发现 tab 键卡在哪、焦点丢失在哪、屏幕阅读器读出来的是不是你想表达的。
