Accessibility and alt Attributes

By  on  

The alt attribute is important for a number of reasons:  it describes an image for screen readers used by those without sight or poor sight, it describes the image to bots, and it provides an indicator of what should have loaded if the image fails to load at all.  But what about the case where the image doesn't have much value to be read, because it has accompanying positioned text offscreen?

Don't omit the the alt attribute -- the screen read will read out the image's src attribute.  Gross.  Instead include the alt attribute with an empty value:

<img src="/path/to/image.png" alt="" />

No image alt or src text is read and you're golden!

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
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Discussion

  1. Really good! I added a sniping code to my editor to remember the alt attribute. Other attributes very important are the following:

    meta charset='uft-8' (html5) or http-equiv="Content-Type" content="text/html; charset=UTF-8" (html4)

    I’m from Brazil and these tags are really important for softwares that reads screens.

  2. Definitely in agreement with this. When I studied Software Engineering at university we had a module on human-computer interaction and part of it included making your website accessible to those with poor vision.

    Now I always try to have a high contrast between the color of the text and background color being used, and like you mention I always use the alt tags to, for example to prevent spam I put the email address on my sites contact pages in an image and then put the email address in the alt tag as well such as “my name at my domain dot com” so that if anyone is using a screen reader that clearly states what the email address is. I do the same with logos too, put something like “my website dot com logo” for the same reason.

    If the images are of a product or something I try to get some keywords in there, and since doing this I get a few hits from Google image search sometimes, so that can help a bit with SEO and stuff.

    Anyhow thanks for publishing this, I think too many people forget about how important it is.

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