SVGs failing due to lack of alt attribute

[adrianblynch]

My report suggests that SVGs should contain an alt attribute but the recommended way to do this is with a title and/or desc element.

Adding either an alt attribute or a title element to SVGs being audited still results in a failure:

Adding title elements similarly fails:

Adding both results in the same failure.

So the question is, what will it take to make this pass in Lighthouse and should the recommendation documentation be updated to reflect this?

https://developers.google.com/web/tools/lighthouse/audits/alt-attribute

[patrickhulce]

Thanks for the report @adrianblynch! Right now the support in axe, which is what powers our accessibility audits, seems to be a little iffy for SVG (see dequelabs/axe-core#20). You might want to chime in that thread with the issues you're seeing since they're looking for helpful examples! :)

cc: @kaycebasques for potentially updating the docs to mention pending SVG support?

[kaycebasques]

@adrianblynch what's the source for "the recommended way to do this is with a title and/or desc element"?

[paulirish]

@adrianblynch you said " the recommended way to do this is with a title and/or desc element."

can you show that these are preferred over an alt attribute?

[patrickhulce]

Currently waiting on axe support for this.

[mgifford]

This still seems to be an issue. Rather frustrating, particularly for things like social media icons which which should have titles baked into them.

[adrianblynch]

@adrianblynch what's the source for "the recommended way to do this is with a title and/or desc element"?

Sorry @kaycebasques and @paulirish - It's so long ago I can't remember where I read this.

[mgifford]

I'd go with either:
https://www.sitepoint.com/tips-accessible-svg/
https://developer.paciellogroup.com/blog/2015/12/does-svg-text-pass-wcag-1-4-5-images-of-text/
https://www.deque.com/blog/creating-accessible-svgs/

As reasonable example of best practices.

[Malvoz]

The svg-img-alt rule landed in dequelabs/axe-core#1953. 🎉