Images

Estimated reading time: ( words)

Summary: You should add appropriate alternative text to every image, regardless of how it is coded. The alt text should describe the content or function of the image. Purely decorative images should have empty alt text. 

Image tags

Always include an alt attribute for images that are displayed using the image tag.  

<img alt=”Goldy Gopher” src=”goldy.jpg”>

If the image is decorative, the alt attribute should be empty, like this:

<img alt=”” src=”my_decorative_pic.jpg”>

The difference between an empty alt attribute and no alt attribute at all is that the empty attribute lets screen reader users know that an image is there.

Avoid context-redundant alternative text

Sometimes information about the image is displayed as part of the normal text surrounding the image, either as part of the narrative or as an image caption. In this case, include an empty alt attribute so the alternative text is not read or displayed twice by adaptive technologies like screen readers. A blank alt attribute looks like this:

<img alt=”” src=”goldy.jpg”>
<span>Goldy </span>

CSS-based images

The CSS background property is often used to display images. You still need appropriate alternative text but needs to be done with “plain” text (text that is contained in the code and not in an image tag). In this case, the alt text should only be exposed to screen reader users, using the .sr-only class.

.sr-only{
/* Items with this class will only be available to screen reader users */
width:1px; /* do not set to 0 */
height:1px; /* do not set to 0 */
overflow:hidden;
position:absolute; 
left:-9999px; 
top:auto;
}

The .sr-only class already exists if you are using Bootstrap version 3 or higher.

Here's an example of a CSS-based image where the alt text is only available to screen reader users:

<div class=”show_goldy_image”> 
<span class=”sr-only”> Goldy Gopher </span> <!-- alternative text -->
</div>

 

Font icons

While extremely handy for developers, font icons like Font Awesome or Glyphicons can pose accessibility issues. 

  • Screen readers may read font icons as nonsensical text
  • Persons using an adaptive technology to override the font-family (for example, users with dyslexia) may see font icons as empty boxes

The first issue can be addressed with HTML. The icon itself can be hidden from screen reader users by using the ARIA-hidden="true" attribute, which looks like this:

<span aria-hidden=”true”>
    <i class=”fa fa-flag”></i>
<span>
<span class=”sr-only”>Flag</span>

You must add the aria-hidden-”true” attribute to the parent of the font icon and not to the font icon itself. Then, you can use alt text exposed only to screen reader users by using the CSS, class shown above.

Did you find what you were looking for?

Related articles

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.