17370845950

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 原则。

本质上，选哪个角色、是否隐藏，取决于“这个元素对用户有没有意义”。先判断语义，再选属性，而不是反过来套用组合。