Accessible Rails Apps – Images and Alternative Text

Posted by Brian in Accessibility, Rails, Usability (July 3rd, 2009)

Many types of users make use of alternative text for images. Users who use screen reading software rely on those tags to describe the images they can’t see. Mobile users with slow connections or ‘pay by the minute’ plans often times turn off images to speed up the process.

Rails does something a little crazy with the image_tag helper… it automatically generates the ALT tag, which is just a horrible horrible idea.

  <%= image_tag "rails.png" %>

generates

  rails

This is an absolutely awful idea, and I presume this was done just to shut up the XHTML Transitional validator which will complain if you leave ALT text off of your image elements.

You shouldn’t be adding ALT text to images to satisfy a validator. You should be doing it because it’s The Right Thing To Do.

ALT text is designed to describe the image, to be an alternative to the image. So, when placing the image on the page, take a few seconds to describe what it is.

  <%=image_tag "rails.png", :alt => "The Ruby on Rails Logo"
  <%=image_tag "banner.jpg", :alt => "Awesome Consulting Services - We Make Websites" %>

And for goodness sakes, please don’t prefix your description with “An image of…”. Screenreaders and other devices will make it completely clear to us that the content is supposed to be an image.

Some images convey more information than the ALT may allow, and so we’ll talk about that next.

2 Responses to ' Accessible Rails Apps – Images and Alternative Text '

Subscribe to comments with RSS

  1. Henrik N said,
    on July 6th, 2009 at 10:41 am

    And worth mentioning: it’s perfectly valid, and often a good idea, to set the alt text to the empty string. This is especially true for pure decorational images.

  2. Brian said,
    on July 6th, 2009 at 12:23 pm

    @Henrik N:

    I assume you’re referring to advice like this. I think that article explains it quite well. It’s important to make a distinction between “valid” and “accessible” though.

    My advice though, is to keep decorative images out of the code altogether and insert it with CSS. Decoration is the stylesheet’s job. Images in the markup should be content, and should thus have ALT text that’s descriptive.

Leave a reply

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: