Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Icons have no alt text for accessibility

See original GitHub issue

When marking up an icon, there’s no way to identify what the icon means except by putting text beside. Clients without knowledge of image sprites or just images, really, are at disadvantage.

For example, I’m trying to display a list of items with boolean attributes:

## ACME TV ##
Electric: yes
HD: yes
USB port: no

For UX, I want to replace yes and no’s with pretty little icons. However, replacing the text values makes the HTML lose the yes/no values

{Electric} + i.icon-ok
{HD} + i.icon-ok
{USB} + i.icon-remove

A text-only browser viewer would have no idea of what is present or not.

Issue Analytics

State:
Created 11 years ago
Comments:16 (4 by maintainers)

Top GitHub Comments

2reactions

patrickhlaukecommented, Sep 18, 2015

@luisfernandos you do realise that this thread is 2 years old, right? 😃

2reactions

JamesMessingercommented, Jul 11, 2013

Why would you not implement this? It’s a very common and recommended best-practice for accessibility and SEO to put text inside icons.

Top Results From Across the Web

Writing Alt Text for Accessibility: Guidelines and Examples

It's increasingly common to see icons which stand on their own, with no text around them at all. In that case, it's VERY...

Do icons need alt attributes? - DEV Community ‍ ‍

If an icon is added using an inline image element, it must have an alt attribute. The value of that alt attribute can...

Tips and Tricks | Web Accessibility Initiative (WAI) - W3C

Superfluous information in the text alternative: Usually, there's no need to include words like “image”, “icon”, or “picture” in the alt text. People...

Accessibility: Image Alt text best practices - Siteimprove Support

The alt text needs to describe the image as concisely as possible. As a rule of thumb: avoid writing text alternatives longer than...

Google Explains Alt Text for Logos & Buttons

Alt Text on Buttons Are For Accessibility Not SEO. John Mueller makes it clear that there is no SEO purpose for adding alt...