用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或 CSSpointer-events: none+aria-disabled="true" - Chrome 122+、Firefox 125+ 支持
inert，它比hidden更安全——既隐藏又阻断焦点和事件，适合临时隔离逻辑组
复杂点在于：跨元素逻辑关联不是单次绑定，而是状态同步问题。比如一个 data-filter 按钮被点击后，不仅要更新内容区，还要确保焦点回到可操作位置、更新 ARIA 状态、重置滚动锚点——这些细节在在线运行环境里最容易因 DOM 重建而断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
