HTMLaria属性实用技巧与隐藏用法

本文深入解析了HTML中`aria-hidden="true`的正确使用边界与常见误区，强调它仅屏蔽辅助技术访问、不改变视觉呈现，必须严格限定于纯装饰性内容（如无文本的图标、分隔线），绝不可滥用在交互元素或其容器上；同时厘清了其与`role="presentation"`、CSS“屏幕阅读器专用”隐藏类（`.sr-only`）的本质区别，并揭示动态更新场景下同步管理`aria-hidden`状态、`aria-modal`及焦点锁的关键实践，帮助开发者真正实现既美观又无障碍的Web体验。

aria-hidden="true" 到底隐藏了什么

它只对辅助技术（如读屏软件）隐藏元素，不影响视觉呈现——这点最容易误解。很多人加了 aria-hidden="true 还以为页面上也看不见了，结果用户看到空白区却听不到说明，反而更困惑。

常见错误现象：aria-hidden="true" 加在包含交互子元素的容器上（比如按钮父级 div），导致子按钮无法被读屏聚焦；或加在图标 上却忘了同步给它加 role="presentation" 或文本替代。

• 仅用于纯装饰性内容：空图标、分隔线、背景花纹等
• 绝不能加在有 tabindex、button、a 等可交互元素上，除非你明确想屏蔽其语义
• 如果图标旁已有可见文字（如“搜索”+放大镜 icon），给图标加 aria-hidden="true" 是安全的

screen reader only 的正确写法

CSS 隐藏 + aria-hidden 不等于“仅屏幕阅读器可见”。真要实现“视觉隐藏但读屏可读”，得用专门的无障碍隐藏类，靠 position: absolute; left: -9999px; 这类方式移出视口，同时确保不触发 aria-hidden。

错误用法：提交 —— 两个逻辑冲突，读屏直接跳过。

• 推荐最小化 CSS 类：.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
• 配合语义：用 上传文件 替代无意义的 “点击这里”
• 不要用 display: none 或 visibility: hidden，它们会让读屏完全忽略内容

role="presentation" 和 aria-hidden="true" 的区别

role="presentation" 是让元素“放弃自身语义”，但子元素仍保留原有角色；aria-hidden="true" 是让整个元素及其后代对辅助技术不可见。选错会导致结构断裂。

典型场景：表格中纯装饰的空单元格、SVG 内部路径、Bootstrap 的 .carousel-indicators 容器。

• SVG 图标外层 → 允许内部