全局属性缺失或误用会直接引发样式失控和语义断裂：lang缺失导致发音错乱与:lang()失效；hidden无配套css致视觉残留；tabindex=0未响应键盘焦点；contenteditable未约束引发xss；aria-*与原生属性冲突使读屏器行为异常。
全局属性本身不直接“修复”问题，但class、id、lang、hidden、aria-*等属性的缺失、误用或冲突，会立刻暴露样式失控和语义断裂——比如hidden被JS反复切换却没配display逻辑，或aria-hidden="true"加在<main></main>上导致整页对读屏器不可见。
哪些全局属性一缺失就触发样式/语义故障
这些属性不写，浏览器不会报错，但渲染和辅助技术行为会悄然偏移：
-
lang缺失 → 屏幕阅读器发音错乱，CSS 的:lang()伪类失效 -
hidden被 JS 动态增删，但没配套 CSS 规则（如[hidden] { display: none; }）→ 元素视觉残留或布局塌陷 -
tabindex设为0却没实现键盘焦点响应（keydown监听）→ 键盘用户能聚焦却无法操作 -
contenteditable开启但未限制输入长度或格式 → 破坏表单验证流，甚至引入 XSS 风险（如插入oninput事件）
怎么用 DevTools 快速扫描全局属性异常
别手动翻 DOM 树，用控制台一行命令筛出高危模式：
- 查所有没
lang的根级元素：document.querySelectorAll("html:not([lang]), body:not([lang])") - 找被
aria-hidden="true"锁死但又不是装饰性容器的节点：$$('[aria-hidden="true"]').filter(el => !el.closest("img, svg, [role=presentation]")) - 标出所有
tabindex值非法的元素：$$('[tabindex]').filter(el => !["0", "-1"].includes(el.getAttribute("tabindex")))（非 0/-1 的数值 tabindex 已被现代规范弃用） - 检查
hidden元素是否意外影响盒模型：$$('[hidden]').forEach(el => console.log(el, getComputedStyle(el).display))—— 若输出"inline"或"block"，说明没重置显示逻辑
为什么 aria-* 和原生全局属性混用容易出事
ARIA 不是补丁，它覆盖的是浏览器默认语义。一旦和原生属性冲突，读屏器可能彻底“懵掉”：
-
<button aria-label="提交" role="link">提交</button>→role="link"强制覆盖按钮语义，但键盘仍按 button 行为响应（空格/回车触发），读屏器却说“链接”，用户操作预期错位 -
<input type="checkbox" aria-checked="true">→aria-checked与原生checked属性不同步时，读屏器读状态，JS 读 DOM 属性，两者永远对不上 <div hidden aria-hidden="false"> → <code>hidden优先级高于aria-hidden，元素视觉隐藏且对读屏器不可见，aria-hidden="false"彻底无效用 CSS 选择器提前标记隐患区域
把下面这段加进
<style></style>或控制台执行，页面会自动高亮四类典型漏洞点：/* 缺失 lang */ html:not([lang]) { outline: 2px solid #ff0000; } /* hidden 元素但 display 未归零 */ [hidden]:not([hidden] + *[hidden]) { outline: 2px dashed #ff6b35; } /* aria-* 与原生语义明显冲突 */ [role="button"]:not(button), [role="link"]:not(a) { outline: 2px dotted #4ecdc4; } /* tabindex 非标准值 */ *[tabindex]:not([tabindex="0"]):not([tabindex="-1"]) { outline: 2px solid #45b7d1; }注意：这些 outline 只是视觉提示，不解决根本问题；真正要改的是 HTML 源码里对应属性的取值逻辑和配套 JS/CSS 行为。
