search

google / material-design-icons

Material Design icons by Google (Material Symbols)
http://google.github.io/material-design-icons/
Apache License 2.0
50.63k stars 9.57k forks source link

Ligatures causing accessibility issues #732

Open jenshedqvist opened 6 years ago

jenshedqvist commented 6 years ago

Because the text inside the icons i.e. face is read by screen readers it will seriously confuse anyone browsing the web using a screen reader. This is get's even worse if you are using the icons in a website that is not in english. Moreover, the ligature-method could potentially confuse search engines and other third party scraping services as the content of the <i>-element is plain text. And nope, the ligature identifier name will seldom be correct, a link using a lock icon to signal that it requires authentication to be accessed would be read out loud "Log in lock outline", a read more link "To the archive trending flat".

Yes there are workarounds, like using the much more bulky numeric character references, or by setting attributes like aria-hidden="true" on the <i>-element (but that is not always possible), another way that could work is using a title-attribute and hope that the screen reader only reads that out loud and not both the title AND the ligature text but that is basically guesswork.

The point is, the default solution with ligatures, albeit elegant, does come with an whole package of accessibility issues that needs to be adressed. Either by opting for a more robust solution or by documenting the caveats of using the ligature-approach.

tphinney commented 2 years ago

Agree, this is an overdue issue to cover in the docs.