ARIA Role属性：提升网页可访问性的关键

role="alert" 和 aria-live 的配合要点

动态通知类消息依赖 role + aria-live 协同工作，但组合错误会导致播报失败或打断过度。

• role="alert" 默认启用 aria-live="assertive"，适合“登录失败”“网络断开”等需立即干预的场景
• 非紧急提示（如“已保存”）该用 role="status" + aria-live="polite"，避免打断用户当前操作
• 不要把 aria-live 直接加在 role="alert" 外层容器上——如果容器本身是动态插入的，屏幕阅读器可能根本来不及注册它
• 每次更新内容前，建议先清空旧文本再写入新内容，否则某些读屏器会拼接播报（如“已保存已保存”）

aria-hidden="true" 的继承陷阱

aria-hidden="true" 不是“视觉隐藏就加它”，它会整棵树从可访问树中剔除，连里面真实的按钮、链接、输入框都不可见、不可聚焦。

• 模态框开启时，背景区域常用 aria-hidden="true"，但必须确保模态框自身未设该属性，或显式设为 aria-hidden="false"
• 如果父容器加了 aria-hidden="true"，子元素想恢复可访问性，必须显式写 aria-hidden="false"（仅设 tabindex="0" 不起作用）
• 纯装饰性 SVG 图标可用 aria-hidden="true"，但带交互的图标按钮（如“关闭”叉号）绝不能套这个

最常被忽略的一点：role 的合法性不是靠人眼判断，而是靠浏览器「Accessibility」面板实时校验——比如 role="checkbox" 缺少 aria-checked，面板会直接标红；别等上线后被视障用户反馈才改。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~