SVG需用ARIA属性赋予语义：独立图标用role="img"+aria-label，装饰性图标用aria-hidden="true"，复杂图形优先aria-labelledby关联外部文本；纯图标按钮的aria-label须置于容器而非SVG内，且SVG加aria-hidden="true"。
SVG本身不自带语义，必须靠ARIA属性“告诉”辅助技术它是什么、用来做什么。关键不是堆属性，而是按用途选对组合：独立图标用 role="img" + aria-label，装饰性图标用 aria-hidden="true"，带上下文的复杂图形优先用 aria-labelledby 关联外部文本。
纯图标按钮必须把 aria-label 放在容器上
比如一个只显示放大镜图标的搜索按钮，不能这样写：
屏幕阅读器会忽略 SVG 里的 aria-label。正确做法是：
- 把 aria-label="搜索" 加在
<button></button>上 - 同时给内部
<svg></svg>加 aria-hidden="true"，防止读屏器误读路径数据 - 如果按钮已有可见文字（如“搜索”二字），就不用 aria-label，避免重复朗读
复杂SVG图形推荐用 aria-labelledby 关联标题
当SVG包含多个可交互部分（比如图表中的坐标轴、数据点、图例），直接写 aria-label 容易冗长且难维护。更稳妥的方式是：
- 在 SVG 外部或内部顶部加一个
<title>我的销售趋势图</title> - 给
<svg></svg>标签加上 aria-labelledby="id-of-title" - 若需为某个具体元素（如某根柱状图）补充说明，可用
aria-labelledby="title-id data-point-id"同时关联多个 ID
装饰性 SVG 一律用 aria-hidden="true"
背景花纹、分隔线、纯视觉修饰的 SVG 不传递信息，也不需要用户操作。这类图形要明确“别读”，否则可能干扰屏幕阅读器节奏：
- 直接在
<svg></svg>上加 aria-hidden="true" - 不需要 role 或 label，加了反而多余
- 注意：不要对整个 SVG 组合使用 aria-hidden，除非整组都无语义；若其中某子元素需被读出，应单独处理
避免 aria-label 和其他标签混用导致覆盖
几个常见冲突点要避开：
- aria-label 和 aria-labelledby 同时存在 → 后者被忽略，二者选其一即可
- 给
<img alt="SVG矢量图形的语义化：ARIA标签属性配置" >加 aria-label 是错误的，必须用 alt 属性 - 用
title替代 aria-label 不可靠，多数读屏器默认不读 title，移动端基本无效 - aria-label=""（空字符串）等于主动屏蔽该控件，可聚焦却不可感知，属于严重无障碍缺陷
