最常被误用的html全局属性是data-、aria-和tabindex。data-属性需通过dataset访问以获驼峰转换，避免存json；aria-属性须精准覆盖语义，禁用冗余或动态添加；tabindex取值影响tab流逻辑，正数取值违反wcag规范。
哪些HTML全局属性最常被误用或滥用
多数人写 id 和 class 没问题，但一到 data-、aria-、tabindex 就容易出错。比如把 data-user-id 当成 JS 变量直接读取，却忘了它返回的是字符串；又或者给非可聚焦元素加 tabindex="0" 导致键盘导航混乱。
常见错误现象：
-
data-属性值未用dataset访问，而是用getAttribute硬取，丢失自动连字符转驼峰的转换 -
aria-hidden="true"加在父容器上，却忘了子元素里有input，导致表单控件被屏幕阅读器跳过 -
tabindex="-1"用于程序化聚焦，但没配合focus()调用，变成“看不见也点不着”的幽灵焦点
data-* 属性怎么写才不会在JS里翻车
核心原则：只存简单结构化数据，别塞 JSON 字符串或函数引用。浏览器会自动把 data-user-role 映射为 element.dataset.userRole，但前提是命名合法（只能含字母、数字、连字符，且不能以数字开头）。
实操建议：
- 多值场景用空格分隔，再用
split(' ')处理，比存数组字符串更安全 - 布尔语义优先用
data-loading（无值）而非data-loading="true"，JS 中用'loading' in el.dataset判断 - 避免
data-config='{"timeout": 500}'—— 解析失败难调试，改用多个独立属性如data-timeout="500"
aria-* 属性不是装饰，用错反而破坏可访问性
aria- 不是“加上就变无障碍”，它本质是覆盖默认语义。比如 role="button" 加在 div 上，就必须手动处理 Enter/Space 键响应和 tabindex，否则对键盘用户就是残障。
使用场景与限制：
- 仅当原生语义缺失时才用
role—— 能用button就别用div role="button" -
aria-live区域必须静态存在，不能靠 JS 动态插入后才加属性，否则屏幕阅读器可能不监听 -
aria-label和aria-labelledby二选一，混用会导致后者被忽略
tabindex 的三个取值实际影响什么
tabindex 行为差异极大，不是“设了就能 tab 进去”：
-
tabindex="0"：按 DOM 顺序加入标准 Tab 流，适用于原本不可聚焦的容器（如卡片），但需确保它有明确交互意图 -
tabindex="-1"：可编程聚焦（el.focus()），但不在 Tab 流中 —— 常用于模态框首次打开时聚焦首元素 -
tabindex="5"及正数：强行插队 Tab 流，极易打乱逻辑顺序，WCAG 明确不推荐
性能提示：大量 tabindex="0" 元素会延长键盘用户的遍历路径，移动端还可能触发软键盘意外弹出。
真正难的不是记住规则，而是每次加全局属性前问一句：这个属性是否改变了元素的语义、交互或可访问性链路？如果答案是“只是为了让 CSS 或 JS 方便一点”，那大概率该换方案了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
