Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    CSS Rounded Corners

    The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images.  CSS rounded corners thus save us time in creating images and requests to the server.  Today, rounded corners with CSS are supported by all of...

  • By
    Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...

Discussion

  1. Dean

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

  2. Dan

    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. 

  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. 

  4. Will
    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. 

  5. Alexander
    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. 

  6. Thibaut
    

    Just sayin’ ^^
    

    7. 

  7. Kyra
    so first you say “little did i know that this [the fact you should use alt everywhere] isn’t the case”, but then you proceed to show us why it indeed is the case (to prevent url reading), might wanna clarify that.
    

    8. 

  8. Regina Battle
    “…accessibility and usability are just added bonuses.” 
    

    Wrong. Sites should be inclusive — accessible and easy to use.
    

    9. 

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