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：<svg aria-hidden="true">...</svg> -
有语义的图像（需传达信息）：用
role="img"+aria-label或aria-labelledby，且确保aria-hidden为false或不设置。例如自定义 SVG 图标按钮：<svg role="img" aria-label="搜索">...</svg> -
需要聚焦/交互的图像容器：用
role="img"并配合键盘可访问处理（如tabindex="0"），同时提供明确的文本替代，aria-hidden必须为false。
例外情况：极少数需强制“隐藏但保留角色”的调试场景
仅在特殊测试或 polyfill 场景中，开发者可能临时用 aria-hidden="true" 配合 role="img" 来隔离渲染与朗读逻辑（例如多版本图标切换时暂禁某一个）。但这属于 hack，不可用于生产环境，也不符合 WCAG 原则。
本质上，选哪个角色、是否隐藏，取决于“这个元素对用户有没有意义”。先判断语义，再选属性，而不是反过来套用组合。
