正确做法是用[aria-hidden="true"]配合绝对定位等样式隐藏元素，同时保持语义；[aria-expanded]需按值写属性选择器；[aria-disabled="true"]要与:disabled并用；避免用[role]选择器做样式主干。
用 [aria-hidden="true"] 控制视觉隐藏但保留语义
很多开发者以为 display: none 或 visibility: hidden 就够了，结果屏幕阅读器完全跳过本该被读出的交互状态。真正需要的是：视觉上隐藏，但 DOM 结构和 ARIA 语义仍在。
正确做法是用 [aria-hidden="true"] 配合样式控制，比如：
button[aria-hidden="true"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
这样既不破坏可访问性树，又确保它不出现在视口里。注意别对 focusable 元素（如 button、a）直接设 aria-hidden="true" —— 屏幕阅读器会忽略它，键盘焦点却还能进去，造成“看不见却能聚焦”的混乱。
[aria-expanded] 样式要响应状态变化，不能只靠 class
下拉菜单、折叠面板这类组件，常有人写成 .menu.is-open { … }，再靠 JS 切换 class。问题在于：ARIA 属性才是辅助技术唯一识别的状态依据，class 名只是开发者自定义的标记。
立即学习“前端免费学习笔记（深入）”；
应该直接基于属性选择器写样式：
[aria-expanded="true"] .icon {
transform: rotate(180deg);
}
[aria-expanded="false"] .icon {
transform: rotate(0);
}
好处是：只要 JS 正确更新了 aria-expanded 值，样式自动生效；也避免 class 和 ARIA 不同步导致的 bug（比如 JS 报错没切 class，但 aria-expanded 已变，样式就滞后）。
常见错误：给 [aria-expanded] 写样式却不指定值，比如 [aria-expanded] { … } —— 这会匹配所有带该属性的元素，不管它是 "true" 还是 "false"，容易误覆盖。
[aria-disabled="true"] 比 :disabled 更通用
原生 button 或 input 可以用 :disabled，但自定义组件（比如用 div + role="button" 实现的按钮）没有原生 disabled 状态，必须靠 aria-disabled="true" 表达禁用语义。
所以样式要同时覆盖两种情况：
button:disabled,
[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
注意点：
-
pointer-events: none会让元素彻底不响应鼠标，但对键盘用户仍可能触发Enter/Space—— 所以 JS 必须同时拦截事件，不能只靠样式 - 别用
[aria-disabled]（不带值），否则aria-disabled="false"也会命中，把启用态也灰掉了 - 某些旧版 Safari 对
[aria-disabled="true"]的伪类支持不稳定，建议加个兜底 class
不要用 [role] 选择器做样式主干
有人喜欢写 [role="alert"] { … } 统一控制提示框样式，看起来省事，实际埋雷。
原因有三：
-
role是语义层描述，不是设计层分类 —— 同一个role="alert"可能出现在顶部横幅、右下角弹窗、内联提示，样式需求完全不同 - 浏览器对
[role]选择器的性能不如 class，尤其在大量动态插入元素时（比如聊天消息列表） - 部分旧版 IE 完全不支持属性选择器，而
role本身又是无障碍必需属性，不能为了样式妥协语义
推荐做法：用 class 定义视觉样式（如 .alert-banner、.alert-toast），再额外加 role="alert" 和对应 ARIA 属性（如 aria-live="assertive"）。样式和语义解耦，后期维护和测试都更稳。
最易被忽略的一点：当用 JavaScript 动态增删 role 时，CSS 不会重绘——因为属性值变了，但选择器匹配逻辑已执行完毕。这时候依赖 [role] 的样式根本不会更新，必须配合 class 或强制 reflow。
