返回博客
实用的 SVG 可访问性指南
SVG 可访问性的第一步，是判断图形是否传达信息，还是仅用于装饰。这个判断决定它需要怎样的标签、角色和替代内容。
先判断图形类型
装饰性图标应对辅助技术隐藏。信息型图片需要可访问名称，复杂图表和示意图还需要更长的文字替代，用于表达关键关系。
提供合适的可访问名称
根据嵌入方式使用周围文本、aria-label、aria-labelledby 或 title/description 元素。避免重复相邻的可见标签，否则屏幕阅读器会重复朗读。
保留焦点和对比度
可交互 SVG 控件需要键盘访问、清晰角色和可见焦点。描边、填充与状态变化应在浅色、深色、强制颜色和高对比度环境中保持足够对比。
测试最终使用环境
同一 SVG 作为图片、inline markup、CSS 背景或组件时可能表现不同。应使用键盘和至少一种屏幕阅读器测试最终发布的嵌入方式，而不是只检查源文件。