Accessibility Tip: Empty alt Attributes

By  on  

As mostly a self-taught developer, my impressions of best practices were self-formed, and over the years I've realized many of those impressions were incorrect or the standards associated with them had quickly changed.  One small but important practice is the usage of alt attributes on img tags, and I had thought you should set an alt attributes on all images within the page.  Little did I know that isn't the case.

<!-- BAD: image URL will be read out -->
<img src="/wp-content/themes/punky/images/logo.png">

<!-- BAD: adding useless cruft alt -->
<img src="/wp-content/themes/punky/images/logo.png" alt="Logo">

<!-- GOOD: empty alt is silent -->
<img src="/wp-content/themes/punky/images/logo.png" alt="">

Images with only visual value should have an empty alt attribute set on them.  Omitting the alt attribute makes most screen readers read out the entire image URL and providing an alt attribute when the image is for visual purposes only is just as useless.

You can't blame young developers for not knowing this or any other accessibility related topic -- accessibility (and usability for that matter) aren't topics taught at most universities.  Let's be honest -- most developers are excited their stuff works; accessibility and usability are just added bonuses.  Well, now you have no excuse to not use alt attributes correctly!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

  • By
    Truly Responsive Images with responsive-images.js

    Responsive web design is something you hear a lot about these days. The moment I really started to get into responsive design was a few months ago when I started to realise that 'responsive' is not just about scaling your websites to the size of your...

Discussion

  1. Of course this only applies to decorative images, really good guide to alt text on Webaim – http://webaim.org/techniques/alttext/

  2. I’m curious about SEO. What if I want my logo to index in Google as “My Company Logo”? I’d imagine that I’d like an alt tag.

    
    

    And I wouldn’t care much about a screen reader announcing the alt text.

    Of course this use case would apply only to images you’d like indexed, which wouldn’t include many decorative images. In that case, an empty alt seems correct.

  3. Wilkins

    It’s actually recommended to use the aria role “presentation”, no need for an empty alt tag. You actually don’t even need the alt tag if you’re using a presentation role.
    http://www.w3.org/TR/wai-aria/roles

  4. That’s interesting, I’ve always thought it was good practice to add alt tags to images. Especially with the W3 validator listing images with missing alt tags as errors, although it does specify under certain conditions.

    I just tested it with an empty alt tag, and it appears to accept that. Thanks I’ll start using this from now on.

  5. Good trick. But it may not be a good practice to put decorative images in HTML at all. Why can’t we use CSS here?

  6. 
    

    Just sayin’ ^^

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!