Skip to content

SVG icons accessibility #528

Closed
Closed

Description

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:

ie11 nvda svg title

IE 11 and AViewer (see the SVG title is part of the calculated accessible name):

ie11 svg title

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 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions