Remove the SVG title element

[afercia]

See WordPress/gutenberg#528

The SVG title element is not consistently supported by assistive technologies and it's not sufficient to make a SVG accessible. To make SVGs accessible, many other features would need to be added, see: https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

However, there are additional considerations:

• first: I don't think there's an easy way to translate the title element for proper localization, other than generating a complete set of SVGs for each language which is, I guess, a bit complicated
• SVGs need the accessibility treatment described in the paciellogroup post only when they're used as not purely decorative images; since in the vast majority of cases they will be purely decorative, e.g. used as icons next to a text label, they should be completely hidden to assistive technologies and the only way to do that is to strip out the title element

As a general consideration, UI controls made of only icons are not accessible. Also, see some very interesting considerations about their usability: https://www.nngroup.com/articles/icon-usability/

Therefore, icon-only controls should be avoided. When really, really, needed, they should have at least a visible "tooltip" and should be made accessible as described in the paciellogroup post.
However, since it's impossible to programmatically distinguish when a SVG icon is purely decorative and when not, the best option is again to strip out the title element and address the accessibility during implementation, for example wrapping the SVG in an element with an aria-label attribute.

Lastly, worth noting the current title elements are, sometimes, not so accurate 🙂 Hearing screen readers announce "Video Alt3Embed" wouldn't help so much.

[ryelle]

Thanks for the issue & all the context @afercia — at the base of it, though, the request is just to remove the <title> from the generated SVG, is that correct? Maybe we can also update the examples to show accessible uses of the icons as well, but actual implementation is to be done in gutenberg or other individual projects.

[afercia]

the request is just to remove the <title> from the generated SVG, is that correct?

@ryelle correct, thanks 🙂 And yes, the implementation should be done in each project, see the linked issue above.