role="img" 和 aria-hidden="true" 一般不该一起用,因为前者声明元素是需被朗读的图像,后者却要求完全隐藏,语义冲突导致辅助技术行为不一致;纯装饰用 aria-hidden="true" 即可,有意义图像应配 aria-label 且不设 aria-hidden。

当一个元素纯粹用于装饰、视觉增强,且不向用户传递任何有意义的信息时,才应同时使用 role="img" 和 aria-hidden="true" ——但这种组合本身存在逻辑矛盾,通常不应同时出现。
为什么 role="img" 和 aria-hidden="true" 一般不该一起用
role="img" 明确告诉辅助技术“这是一个图像”,它期望该元素具有可感知的内容(比如通过 alt 或 aria-label 提供替代文本);而 aria-hidden="true" 则指示“完全忽略这个元素,别读给用户听”。两者语义冲突:既声称是图像,又禁止被访问——辅助技术可能忽略 role="img",或报错,或行为不一致。
正确做法取决于元素的真实用途
-
纯装饰性图形(无信息量):直接加
aria-hidden="true",无需role="img"。例如背景小图标、分隔线 SVG: -
有语义的图像(需传达信息):用
role="img"+aria-label或aria-labelledby,且确保aria-hidden为false或不设置。例如自定义 SVG 图标按钮: -
需要聚焦/交互的图像容器:用
role="img"并配合键盘可访问处理(如tabindex="0"),同时提供明确的文本替代,aria-hidden必须为false。
例外情况:极少数需强制“隐藏但保留角色”的调试场景
仅在特殊测试或 polyfill 场景中,开发者可能临时用 aria-hidden="true" 配合 role="img" 来隔离渲染与朗读逻辑(例如多版本图标切换时暂禁某一个)。但这属于 hack,不可用于生产环境,也不符合 WCAG 原则。
Snowy(SnowyAdmin)是国内首个国密前后端分离快速开发平台,集成国密加解密插件, 软件层面完全符合等保测评要求,同时实现国产化机型、中间件、数据库适配,是您的不二之选! 技术框架与密码结合,让更多的人认识密码,使用密码;更是让前后分离“密”不可分。采用SpringBoot+MybatisPlus+AntDesignVue+Vite 等更多组件及前沿技术开发,注释丰富,代码简洁,开箱即用
本质上,选哪个角色、是否隐藏,取决于“这个元素对用户有没有意义”。先判断语义,再选属性,而不是反过来套用组合。









