Description
openedon Apr 27, 2017
SVG icons are tricky for accessibility. Some browsers/screen readers combinations announce the SVG <title>
(if any) no matter what you try to do to avoid it. Even adding aria-hidden="true"
to the icons doesn't work for some combos.
IE 11 + NVDA:
IE 11 and AViewer (see the SVG title is part of the calculated accessible name):
Are the <title>
really needed? Is there any case where we'd want the SVG icons to be announced? I guess the titles could be entirely removed, and when UI controls that use the icons need to be labeled, that could be done on the controls, for example:
<button aria-label="Some label here"><SVG here></button>
@davidakennedy and @samikeijonen could chime in here, they have a lot of experience with SVG icons for all the job done for Twenty Seventeen 🙂