必须用 role="img" 的情况是图像无法用原生 表达时，如 CSS 背景图、多 SVG 拼合图标、伪元素装饰图或 动态图；此时需配合 aria-label 或 aria-labelledby 提供语义。
什么时候必须用 role="img" 而不是直接写 <img alt="怎么利用HTML的role="img"配合aria-label为一组构成图像的元素提供整体描述" >
只有当图像内容**无法用单个 <img alt="怎么利用HTML的role="img"配合aria-label为一组构成图像的元素提供整体描述" > 标签原生表达**时，才需要 role="img"。典型场景包括：<div> + CSS <code>background-image、多个 SVG 元素拼合的图标、CSS 伪元素组合的装饰图、或用 <canvas></canvas> 渲染的动态图。这些方式浏览器和爬虫都看不到“图像语义”，role="img" 是补救手段，不是首选方案。
role="img" 必须搭配 aria-label 或 aria-labelledby，不能单独存在
role="img" 只声明“这个容器是图”，但不提供“图是什么”。屏幕阅读器遇到它会静默跳过，除非你明确告诉它内容——靠 aria-label（硬编码文本）或 aria-labelledby（引用页面中已有 ID 的文本）。常见错误是只写 role="img" 却漏掉任一属性，结果无障碍支持完全失效。
- 用
aria-label：适合固定、简短、无需翻译的描述，比如aria-label="搜索按钮图标" - 用
aria-labelledby：适合复用已有标题，比如图表上方有个<h3 id="chart-title">2025 年用户增长趋势</h3>，就写aria-labelledby="chart-title" - 别同时写两个：后者优先级更高，
aria-label会被无视
多元素构成图像时，role="img" 应该加在最外层容器上
例如一组 <svg></svg> 和 <text></text> 拼成的徽标，或一个 <div> 包裹多个 <code><span></span> 模拟像素画——所有子元素都应属于同一语义单元。这时 role="img" 和 aria-label 必须放在**最外层父容器**上，且内部不能有其他可聚焦/可交互元素（如 <button></button>、<a></a>），否则会干扰名称计算。
错误示例：
<div role="img" aria-label="公司徽标"><br> <svg>...</svg><br> <a href="/about">关于我们</a> <!-- 这里破坏了图像语义 --><br></div>
立即学习“前端免费学习笔记（深入）”；
正确做法：把链接移出容器，或改用 aria-labelledby 引用外部可见文字，确保整个区域被当作一张图读取。
容易被忽略的兼容性细节
SVG 内联图标常被误认为自带语义，其实默认只是容器。必须显式加 role="img" + aria-label，否则多数屏幕阅读器按 <g></g> 或 <svg></svg> 容器处理，不朗读描述。
另外注意：
– <img alt="怎么利用HTML的role="img"配合aria-label为一组构成图像的元素提供整体描述" > 标签本身禁止设 role="img"，HTML5 规范不认可，浏览器可能忽略；
– title 属性不是无障碍替代品，它只对悬停用户有效，且不被所有读屏软件支持；
– 如果图像描述较长（比如复杂图表），优先提供 <table> 或 <code><details></details> 展开的文本摘要，aria-label 只用于极简提示。
