用id+for关联表单控件与标签是HTML原生语义化绑定，点击label自动聚焦控件且屏幕阅读器可识别；常见错误是for值与目标id不一致、id重复或目标不可交互。

用 id + for 关联表单控件与标签是最直接的跨元素逻辑绑定

这不是“模拟”关联，而是 HTML 原生支持的语义化绑定，点击 label 会自动聚焦或切换对应控件，且对屏幕阅读器可见。

常见错误是只写 for="xxx" 却没给目标元素设 id="xxx"，或者 ID 值不一致（大小写、空格、特殊字符）导致断连。

• for 必须精确匹配目标元素的 id 值，不能是 class 或其他属性
• 目标控件必须是可聚焦/可交互的元素（input、textarea、select、button 等）
• 同一页面中 id 必须唯一；重复 ID 会让 for 绑定行为不可预测

示例：

<label for="email-field">邮箱地址</label>
<input type="email" id="email-field" name="email">

data-* 属性是跨元素传递上下文数据的轻量方案

它不触发任何默认行为，但能被 JavaScript 安全读取，适合在 DOM 节点间隐式传递配置、状态或关系标识。

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

注意：浏览器不会校验 data- 后缀是否合法，但建议只用小写字母、数字、短横线，避免驼峰或下划线——某些旧版工具链会截断或转义。

• 值始终是字符串，如需布尔或数字，需手动转换：JSON.parse(el.dataset.active) 或 +el.dataset.index
• 多个相关元素可用同一组 data- 键名形成逻辑组，比如 data-group="filter" + data-value="price"
• 不要用 data- 存敏感信息或大量结构化数据；它本质是公开的 DOM 属性

示例（筛选按钮控制内容区）：

<button data-filter="news">新闻</button>
<button data-filter="blog">博客</button>
<div data-content-for="news">这里是新闻内容</div>

aria-controls 和 aria-expanded 是可访问性驱动的显式逻辑关联

当元素之间存在“控制-被控制”关系（如折叠面板、下拉菜单），仅靠 class 或自定义事件不够，必须用 ARIA 属性声明这种关系，否则屏幕阅读器无法感知状态变化。

关键点在于：这两个属性必须成对使用，且值要互相指向。浏览器和辅助技术依赖它们做语义映射，不是装饰性写法。

• aria-controls 的值必须是被控元素的 id 字符串，不能是选择器或 class 名
• aria-expanded 是布尔属性，合法值只有 "true"、"false"，不能写 "1" 或空字符串
• JavaScript 更新状态时，必须同步更新两个属性，否则会触发 WCAG 4.1.2 失败

示例（手风琴面板）：

<button aria-expanded="false" aria-controls="panel-1">标题</button>
<div id="panel-1" hidden>面板内容</div>

tabindex 配合 contenteditable 可让非表单元素参与焦点流并建立操作链

这是实现“编辑区→保存按钮→预览区”这类多节点协作流程的基础。没有 tabindex，contenteditable 元素键盘不可达；没有明确焦点顺序，用户 tab 导航会跳过关键环节。

容易忽略的是：一旦加了 tabindex="0"，该元素就进入自然 tab 流，若未同步处理 focus/blur 事件，可能导致光标丢失或状态不同步。

• 只对需要键盘交互的非表单元素设 tabindex="0"；纯展示区域不要加
• 禁用状态（disabled）会让 tabindex 完全失效，此时应改用 inert 或 CSS pointer-events: none + aria-disabled="true"
• Chrome 122+、Firefox 125+ 支持 inert，它比 hidden 更安全——既隐藏又阻断焦点和事件，适合临时隔离逻辑组

复杂点在于：跨元素逻辑关联不是单次绑定，而是状态同步问题。比如一个 data-filter 按钮被点击后，不仅要更新内容区，还要确保焦点回到可操作位置、更新 ARIA 状态、重置滚动锚点——这些细节在在线运行环境里最容易因 DOM 重建而断裂。