一个图标，视觉上清清楚楚，屏幕阅读器里却是一片空白。这不是SVG本身的问题，而是写SVG的人漏掉了几个属性。
SVG在现代网页开发里几乎无处不在，图标、logo、图表、插画，任意屏幕尺寸下都能保持清晰。但看起来好看，不等于能被所有人用上。好消息是，让SVG变得可访问，往往只需要几处很小的改动。
先判断：这个SVG到底要不要描述
不是每个SVG都需要替代文本，正确做法取决于它的用途。装饰性SVG如果纯粹是视觉点缀、不承载信息，就应该对辅助技术隐藏。有含义的SVG，比如一张传达信息的插画或图形，需要提供可访问的名称或描述。交互性SVG如果本身充当按钮或链接，那这个控件必须有可访问名称，并且能用键盘操作。
装饰性图标可以这样写：
有含义的SVG则用title：
Monthly sales increased
这里有个容易踩的坑：title要传达图形的用途，而不是简单描述它长什么样。
别只靠颜色传递信息
SVG经常被用来做图表、状态指示器和示意图。如果含义只通过颜色表达，有色觉缺陷的人就可能错过关键信息。
解决办法是加上额外的视觉线索，比如标签、图案、形状或文字。对于复杂图表，还可以提供一份可访问的数据表格，或者一段关键发现的简要总结。
颜色可以是辅助，但不能是唯一的信息通道。
交互式SVG必须能用键盘操作
按钮里放一个SVG图标，并不会自动让这个按钮变得可访问。真正需要可访问名称的是外层的控件。
看这段写法：
按钮负责提供可访问名称，装饰性的SVG则对屏幕阅读器隐藏。用户不需要去解读图标，就能明白这个按钮是干什么的。
这个分工很关键：谁承担语义，谁就负责命名；谁只是装饰，谁就安静退场。
代码之外，还得真去测
可访问的标记只是起点，不是终点。要用屏幕阅读器实际测一遍SVG，只用键盘走一遍交互元素，再检查一下去掉颜色之后，图形的含义是否依然清楚。
自动化可访问性工具能帮忙发现一部分问题，但它们判断不了每一张图形是否配得上一个有意义的描述。这件事最终还是要靠人来看、来听、来操作。
回到开头那个问题：同样的SVG，为什么有人读不出来？答案往往不在图形本身，而在那几行被省略的属性里。可访问的SVG不是到处堆ARIA属性，而是做出有意识的决定——把装饰性图形藏起来，把有含义的视觉描述清楚，让交互控件对每个人都可用。
几行代码就能带来实实在在的差别。而最可访问的方案，永远是那个真正给到用户所需信息和功能的方案。
热门跟贴