Inline SVGs don't support the alt
-attribute, but you can use role="img"
and aria-label
instead:
<svg role="img" aria-label="Diagram of an internal combustion engine" viewBox="…">…</svg>
If you're not editing your site's HTML directly, you need to figure out how to add alt text through your content management system. Most popular ones have built-in tools to do it:
If your CMS doesn't support alt text, you can work around the problem by adding captions or describing the image in the main text.
Some people do generate alt text automatically when no hand-written text is available, notably Facebook and its properties and Microsoft Edge.
The problem with these systems is that they have no way of knowing what you were trying to communicate with a particular image. They just produce a general, more or less accurate description of it, which isn't always what your readers need (see above). Still, in most situations it's probably better than no description at all.
The U.S Department of Justice has some really well-written guidance on how the ADA relates to web accessibilty. ↩︎