In my earlier post about blog images I sung the praises of alt text, but I didn't go into detail about the whats, whys, and hows. This basic piece of HTML is so essential to your blog's health that it deserves its own dedicated tutorial. So today I'll dig in deep and give you the tools to become an alt texting master. Let's get to it!
What is Alt Text?
One quick semantic note: it's "alt text", not an "alt tag". People will still know what you're talking about if you call it an alt tag, but to be correct, say alt text!
Alt text is an attribute you add to an HTML image element to describe the image. If you write your alt text well, you'll help your visitors and search engines get a better understanding of your content.
So what do you write as alt text? It all depends on context.
This awesome photo could be used in many different types of blog posts. In a tutorial on knitting the scarf he's wearing, I'd describe it as "man wearing a striped red and pink scarf". If the kinda threatening pose he's taking with those knitting needles is more relevant to the post, "man poised to attack with knitting needles" makes good alt text. If his near-nudity is more relevant to the post than the other aspects of the photo, I'd go with "man wearing nothing but a pink and red scarf".
If the picture itself is the subject of your blog post, the alt text doesn't need to be very detailed. For example, if my post is an interview with scarf guy about why he posed like a crazy knitting monster, the alt text can be "Joe Blow in a scarf" (I'm pretty sure Joe Blow isn't his name, but you get the point).
Why Should I Use Alt Text?
Two very good reasons:
1) First, and most importantly, it provides information to visitors who cannot see the images on a website, either due to visual impairments or because they have images turned off in their browser. People with visual impairments use screen readers that read the text from a website out loud to them. The screen reader reads the alt text to describe visual elements of websites. Visitors browsing without images will see the alt text in place of the images.
2) Second, alt text provides information about an image to search engines. Without alt text, search engines don't know what they're "looking" at when they encounter a picture. So, your alt text is an opportunity to describe your image to search engines.
This is especially important if your blog posts have lots of images. Providing alt text will help bring visitors to your site since the search engines will have more detailed information about what your blog has to offer. It also greatly improves your chances of showing up in image searches, like Google Image Search or Bing Images.
Now, this does not mean that you should stuff keywords into your alt text. I can't stress this enough: always, always, always consider your human visitors when you write alt text. Visitors with visual impairments will hear all the words in your alt text read aloud, and you need to respect that. You shouldn't describe scarf guy as "knitting needles on sale, best knitting needles, cheap knitting needles, knitting, how to knit a scarf". That's not an accurate description of the photo and it's an insult to anyone who has to listen to that from a screen reader.
How Do I Add Alt Text to My Images?
Some blogging platforms prompt you for alt text when you upload a photo. Just fill in your text in the "alt text" field and you're good to go. Other blogging platforms auto-fill the alt text for you using the image's filename. If your blog uses your filenames, make sure you give the photos good, descriptive names. "DSC483012.jpg" is not a good name.
If your blogging platform doesn't have a built-in method of handling alt text, or you skipped alt text in old posts and want to add it in now, you can manually add it to your images. To do this, go into your posts in HTML view and look for your image elements.
In HTML, an image element (at its absolute minimum) looks something like this:
<img src="images/naked-scarf-guy.jpg">
You add alt text to the element after the closing quotation mark on the image source, like so:
<img src="images/naked-scarf-guy.jpg" alt="man in a scarf wielding knitting needles">
By the way, if your blogging platform doesn't support alt text or makes it hard for you to add it, complain! Alt text is a basic HTML feature and it should be easy for you to use.
How Long Should Alt Text Be?
There's no absolute limit on alt text length, but the general consensus is that you should keep it brief — no longer than a tweet. Remember that your visitors with visual impairments will have the alt text read out loud to them by their screen reader, and you don't want to bore them with pointless details.
One case where it's ok to get wordy with your alt text is when you're presenting an infographic or otherwise visualized data without any accompanying explanation. For example, it makes good sense to put all the steps of a simple flowchart into the alt text if you're not going to spell out the steps in an accompanying paragraph — if your graphic is very complex, though, it's best to provide a written alternative to the image and keep the alt text brief.
Do I Need to Add Alt Text to Every Image?
You should add an alt attribute to every image, but you can (and should) leave the attribute blank on purely decorative images. For example, if you have an image of a pretty squiggly flourish separating sections in your blog's sidebar, your readers with visual impairments don't need to hear anything about it — it's just there to add visual appeal and has no functional or informative purpose. Leaving the alt attribute blank tells a screen reader to ignore the image entirely. To leave the alt attribute blank, just don't put anything in the quotation marks after alt=. Like this:
<img src="images/fancy-squiggle.png" alt="">
Leaving the alt attribute blank also makes sense if adding alt text would be repetitive. For example, if you have a post titled "A Photo of My Dog" with a captioned photo of your dog at the top of the post, and the first sentence of your post says "Check out this cute picture of my dog!", blank alt text spares screen reader users from hearing essentially the same thing four times in a row.
In Summary
Well-written, relevant alt text provides valuable information about your blog to both your human visitors and search engine robots. Keep it brief and to the point, and leave it blank on non-essential decorative images. And remember, it's alt text, not an alt tag ;)
Further Reading:
WebAIM has in-depth information about how to write the right alt text for an image in context.
For even more detail, check out the official guide to HTML5 alt text techniques from the World Wide Web Consortium (W3C). The W3C develops HTML standards, so you know this information comes straight from the top!
The Firefox add-on Fangs shows you what a screen reader would read out loud from your blog. This is a fascinating tool that can help you discover accessibility issues on your site and get a better feel for how readers with visual impairments experience your blog.
Scarf Attack photo by Flickr user TheGiantVermin, used under Creative Commons license.
