必须用 fieldset 包裹表单组并以 legend 作为首个子元素提供语义标题，确保屏幕阅读器正确识别分组；legend 不可替换为普通文本或 div/span，嵌套 fieldset 需各自独立 legend，单控件组无需 fieldset。

用

和

给表单组加语义标签

表单里一堆复选框或单选按钮堆在一起，光靠视觉分组是没用的——屏幕阅读器根本不知道它们是一组。必须用 fieldset 包裹，再用 legend 提供组标题。

常见错误是把 legend 写成普通文本、或者漏掉 fieldset 闭合标签，导致后续元素被吞掉或结构错乱。

• legend 必须是 fieldset 的第一个子元素，不能用 div 或 span 模拟
• 多个 fieldset 嵌套时，确保每个都有独立的 legend，避免语义混淆
• 如果组内只有单个控件（比如一个带说明的开关），fieldset 不是必需的，反而可能增加冗余

用和aria属性标记标签页组件

纯 CSS 实现的标签页，如果不加 ARIA，对键盘用户和屏幕阅读器来说就是一堆不可聚焦、无状态、无法切换的按钮。

关键不是“加了 ARIA 就可访问”，而是状态同步：点击切换面板时，aria-selected 和 aria-hidden 必须实时更新，否则辅助技术会读错当前激活项。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• role="tablist" 要加在容器上，每个 tab 按钮设 role="tab"，对应内容区设 role="tabpanel"
• aria-controls 必须指向内容区的 id，不能只靠 class 或顺序隐式关联
• 默认激活的 tab 要设 tabindex="0"，其他设 tabindex="-1"，并手动管理焦点转移

用和为表格加可访问性标签

表格没有 caption，屏幕阅读器用户打开页面时就不知道这个表格是干啥的；表头没设 scope 或 headers，他们读到某个数据单元格时，根本不知道它属于哪行哪列。

尤其注意多级表头场景：仅靠 scope="col" 不够，必须配合 id 和 headers 显式关联，否则跨行合并的表头会被跳过。

• caption 应放在 table 开始后第一位置，不可用 title 或 CSS 伪元素替代
• th 的 scope 值只能是 "row"、"col"、"rowgroup" 或 "colgroup"，拼错就失效
• 复杂表格中，headers 属性值是空格分隔的多个 id，顺序影响屏幕阅读器播报顺序

避免用

模拟语义标签再强行补ARIA

写个 div 加 role="button"，不如直接用 button；用 div + role="navigation"，不如用 nav。原生标签自带键盘行为、焦点管理、语义和默认样式重置，补 ARIA 只能打补丁，不能重建基础能力。

最典型的坑是：给 div 加 role="checkbox"，但没处理 Space 键切换、没同步 aria-checked、没支持 tabindex，结果键盘用户卡死，屏幕阅读器读不出状态。

• 优先选用 header、nav、main、section、aside 等语义化容器，而非万能 div
• 交互控件一律用原生 button、a、input、select，ARIA 只用于增强，不用于替代
• 当必须用 div 时，检查是否同时实现了键盘操作（Enter/Space）、焦点管理、状态同步和屏幕阅读器反馈