关键在明确隐藏意图：彻底移除用 display: none 或 hidden（语义明确但 ie9- 不支持）；仅视觉隐藏但保留语义则用 .sr-only（需 width/height 非零，推荐 clip-path 回退）；装饰性内容用 aria-hidden="true"；动态显隐须同步焦点与 aria-expanded 状态。
隐藏内容不是“看不见就完事”，关键在明确意图：是彻底移除，还是仅视觉隐藏但保留语义？选错方法会让键盘用户卡在空白处，或让屏幕阅读器完全跳过关键信息。
用 display: none 还是 hidden 属性？看是否需要语义留存
两者都从可访问性树中移除元素，适合真隐藏场景（如未激活的模态框、条件不满足的表单区域）。但区别在于：
-
hidden是 HTML5 原生布尔属性，语义明确，不依赖 CSS，即使样式加载失败也生效；display: none是 CSS 控制，有被覆盖风险（比如某处写了[hidden] { display: block; }） -
hidden不支持 IE9 及更早版本；display: none兼容性更好 - 它们都不触发重绘（reflow），但频繁切换仍会引发重排（reflow），动画中慎用
- 含视频、iframe 或第三方脚本的元素用这两种方式隐藏，不会暂停其运行——音频可能照播，统计脚本照发
怎么实现“看不见但读得着”？别抄错 .sr-only
这是为屏幕阅读器保留语义、同时视觉隐藏的标准方案，但网上流传的片段常漏掉关键约束：
- 必须保证
width和height为非零值（哪怕1px），否则部分读屏器（如旧版 NVDA）会忽略 - 推荐用
clip-path: inset(50%)替代老式clip: rect(0, 0, 0, 0)，更简洁且兼容现代浏览器；对不支持的环境加@supports回退 - 绝对定位 +
overflow: hidden的父容器会把内容裁掉，要检查层级和容器样式 - 不能加
aria-hidden="true"，否则直接切断读屏通路
什么时候该用 aria-hidden="true"？只屏蔽辅助技术
它不改变视觉表现，只告诉屏幕阅读器“别读这个”，适用纯装饰性内容：
- 图标按钮里的无意义 SVG 子元素：
<button><svg aria-hidden="true">...</svg>关闭</button> - 重复文本（如表格中已用
th定义了列名，旁边又加了个视觉隐藏的“列：”前缀） - 加载动画中的文字提示（如“加载中…”），若已有其他语义化状态反馈，可隐藏避免重复播报
- 切忌滥用：如果元素本身有交互（如可点击的 icon），加了
aria-hidden="true"后，屏幕阅读器用户将完全不知其存在
动态显示/隐藏时，焦点和语义容易被忽略
JS 控制显隐不只是改 display 或切 class，还得同步处理可访问性状态：
- 展开内容（如折叠面板）优先用原生
<details><summary></summary></details>，它自带焦点管理、键盘支持（Space/Enter 展开）、语义和可访问性 - 手动实现时，显示后需用
focus()把键盘焦点移到新内容首个可聚焦元素，隐藏前要记录原焦点位置并恢复 - 用
aria-expanded同步控制状态，配合aria-controls关联触发器与目标区域 - 避免同时写
aria-label和视觉隐藏子文本——前者会覆盖后者，导致读屏器重复或矛盾播报
最常翻车的地方不在代码写法，而在每次添加隐藏文本前没问一句：这个信息对谁有用？键盘用户能 tab 到吗？屏幕阅读器能按逻辑顺序读到吗？漏掉任一路径，就等于没藏好——只是换种方式暴露了缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
