同一页面多次使用的内联SVG如何实现合理无障碍访问？

针对你提出的两种写法和aria-label的使用，以下是具体分析和可行方案：

1. 带<title>的<svg role="img">写法完全可行 #

你给出的这个写法是重复内联SVG无障碍的标准方案之一：

<svg role="img"> 
   <title>Red Rectangle</title>
    <g>
      <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>
</svg>

• 给<svg>添加role="img"，能让辅助技术（如屏幕阅读器）识别这是一个图像元素，而非可交互的SVG图形或文档片段。
• 内部的<title>会被辅助技术读取，作为图像的替代文本，且每个<svg>内部的<title>独立存在，不会出现ID冲突问题——这刚好解决了你之前用aria-labelledby绑定全局ID时的痛点（ID必须唯一，重复绑定会导致辅助技术识别混乱）。

2. 仅使用aria-label也可行，但存在局限性 #

直接给<svg>添加aria-label的写法：

<svg role="img" aria-label="Red Rectangle">
  <g>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>

• 这种写法能直接提供替代文本，无需内部<title>，适合结构简单的重复SVG。
• 但局限性在于：如果SVG需要多语言支持，或者需要更详细的描述（比如配合<desc>），<title>+<desc>的组合会更灵活；另外，部分老旧的辅助技术对aria-label的支持不如内置的<title>稳定。

额外最佳实践 #

• 如果SVG是可交互元素（比如点击跳转的Twitter图标），需要添加role="link"或对应的交互角色，同时设置正确的tabindex，再配合<title>或aria-label说明交互目的（比如<title>访问Twitter主页</title>）。
• 对于完全重复的SVG，可考虑用<symbol>定义复用模板，再用<use>引用，同时在每个<use>所在的<svg>内嵌套独立的<title>：

<!-- 定义可复用的symbol -->
<svg style="display: none;">
  <symbol id="red-rect" viewBox="0 0 100 50">
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </symbol>
</svg>

<!-- 页面中重复引用 -->
<svg role="img">
  <title>Red Rectangle</title>
  <use href="#red-rect"></use>
</svg>
<svg role="img">
  <title>Red Rectangle</title>
  <use href="#red-rect"></use>
</svg>

这种方式既减少了代码冗余，又能保证每个引用的SVG都有独立的无障碍文本。

内容的提问来源于stack exchange，提问作者Steve