真正提升可用性的全局属性是id、lang、tabindex、aria-label；title在移动端失效，accesskey因支持差且易冲突已基本退出实用场景。
哪些全局属性真能提升可用性，哪些只是摆设
不是所有全局属性都对可用性有实际贡献。id、lang、tabindex、aria-label（虽非全局但常配合使用）是真正起效的；而title在移动端完全失效，accesskey因浏览器支持不一且易冲突，基本已退出实用场景。
容易踩的坑：
-
title加在<div>或<code><span></span>上——这些元素默认不可聚焦，旧版 Safari 甚至不触发提示 -
tabindex="0"滥用：给非交互元素加tabindex会把键盘焦点引入无操作能力的容器，破坏导航流 -
lang只写在根节点，但页面内嵌多语言内容（如引用外语段落）没单独标注，导致屏幕阅读器发音错误 - 根元素用
打底 - 遇到 RTL 内容块，包裹一层
<blockquote lang="ar" dir="rtl"></blockquote>，而非靠 CSS 强行覆盖 - 避免在
<input>上单独设dir却不配lang——输入法行为和光标定位可能异常 - 用
hidden时，元素彻底退出可访问性树，适合“临时移除”场景（如加载中状态切换） - 用
visibility: hidden或opacity: 0时，元素仍在可访问性树里，屏幕阅读器仍会读出——这常导致冗余播报 - 动态控制时，优先用
element.hidden = true/false，比切换 class 更直接、无样式污染风险 - 单值优先用明确语义键：
data-order-status="pending"，而非data-status="1" - 结构化数据拆成多个
data-属性：data-order-id="789"+data-order-date="2026-08-04" - 避免嵌套 JSON：
data-config这种字段极易因引号转义或换行崩掉，改用<script type="application/json" id="order-config"></script>更稳妥
lang 和 dir 必须配对使用才可靠
仅设lang="zh-CN"不能保证中文从左到右显示；若页面含阿拉伯语或希伯来语片段，必须同时用dir="rtl"显式声明方向。否则 CSS 的 text-align 或 flex-direction 可能与预期相反，尤其在表单输入框、按钮图标顺序上出问题。
实操建议：
hidden 不等于 display: none，但很多人当它用
hidden是语义化隐藏：元素不渲染、不占空间、不被屏幕阅读器读取、也不参与 tab 键导航。而display: none只是视觉隐藏，DOM 仍存在，某些 JS 逻辑（如offsetHeight判断）可能误判。
关键区别：
data-* 属性别只存 ID，要设计可读键名
data-user-id="12345"看似合理，但dataset.userId拿到的是字符串"12345"，没有类型信息；更严重的是，如果后端返回的是{id: 12345, role: "admin"}，硬塞进data-user-info会导致 JSON 字符串转义混乱，JS 解析失败。
推荐做法：
最常被忽略的一点：data-属性值始终是字符串，哪怕你写data-count="0"，JS 里取出来也是"0"，做数值比较前必须显式转换。
