Bootstrap: Icons have no alt text for accessibility

[joallard]

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.

[quasipickle]

Just add some styles to the icon classes that make the text transparent & super small: http://jsfiddle.net/QNW5b/1/

Then add your text inside the <i>Text here</i>

[mdo]

Not something we're going to solve in the core—there are a few options for you here, but none that we'll add at this time.

[asecondwill]

You also won't pass the accessibility checker using an i like this.

[JamesMessinger]

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

[whiteatom]

Agreed.. Alts are best practices for all images particularly icons with no text beside them. I'd say some form of alt support is almost critical to standards compliance.

[cvrebert]

You can use .sr-only for the caption.
Also, as of v3, the icons aren't images, they're an icon font, so alt isn't applicable AFAIK.

[whiteatom]

That would imply the choice to use a font was a poor one. sr-only doens't help someone mousing over an icon looking for help. Look at the pencil icon beside a comment here on this site. I know it means edit, but if I didn't, there is no other way to know what that is supposed to do.

This are intended to be used as visual indicators for users - some are obvious, but many are vague in what they will do when clicked, so the alt is needed.

[cvrebert]

If you want to be super-accessible, you perhaps shouldn't be using textless buttons in the first place.

[Giovanni-Mattucci]

The only time you would need to set "alt" text for icons is when you are using them solely as a button or object with no other associated text, otherwise they are usually superfluous for sightless users.

A good way to include some text with Bootstrap's icons is using HTML5BolierPlate's .visuallyhidden CSS class.

You can use it like so:

<i class="icon-ok"><span class="visuallyhidden">Ok!</span></i>

Working example: http://jsfiddle.net/gmattucc/rBXmh/

[cvrebert]

@Giovanni-Mattucci Or you can use Bootstrap's built-in .sr-only class.

[Giovanni-Mattucci]

Awesome didn't know about that helper :)
Exactly the same method as above.

[luisfernandos]

using a .sr-only is a easy way to send a text instead of icon when dealing with emails. At least worked for me.

[patrickhlauke]

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

[luisfernandos]

Patrick, yes I realize that. However I thought it was a good place to put this comment once this thread help me solving my problem (yesterday) and could help somebody else;

[patrickhlauke]

fair enough. i would think though that our actual documentation already clarifies this now... http://getbootstrap.com/components/#glyphicons-how-to-use

[chinjurahul]

Can we add alt attribute for icon?