Taken from a blog post Alt text (or text alternatives) are words that show up in place of an image, when that image can’t be loaded. Images are sometimes turned off by users with slow internet connections and blind users often use screen reader software that reads the alt text aloud when it reaches the image. The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt text for images in most cases.
The text is meant as a replacement for the image – not in addition to it. This means the text should describe the image and give the same information as the image would if seen. This isn’t always easy and people don’t always agree on what the ‘same’ information is. The best bet is to be honest with yourself – what does the picture convey? If the image is your company logo, your company name is a good bet. If the image is of text, replicate the text exactly. For all other images, describe the image helpfully and succinctly – we don’t need to know it’s a picture of 17,387 trees if ‘forest’ would do. Whatever you do, don’t see alt text as a great resource for keyword stuffing. Adding out-of-context keywords as alt text is terrible for accessibility, does not meet WCAG 2.0 guidelines and has minimal to no search engine optimisation benefits. What to do - Add alt text to all of your images - Add a name to all of your buttons (such as ‘Search’ or ‘Submit’) How to do it If you’re using a good quality content management system, you will be able to add alt text with very little effort. For example, WordPress allows you to edit the alt text of all images that you insert into posts and pages. If you’ve got something a little more bespoke, here is some information and code that will help: An image on a website has two essential elements, its source and its alternative. The source is the location of the image and the alternative is what I’ve just been talking about. ? <http://www.wuhcag.com/alt-text/?goback=.gde_53511_member_150908160#> 1 <img src="filename.jpg" alt="insert alt text" /> Here’s how a form might look like with names added. ? <http://www.wuhcag.com/alt-text/?goback=.gde_53511_member_150908160#> 1 2 3 4 5 6 7 <form> <label for="option1">Option One</label> <input id="option1" type="radio" name="type" /> < /br> <label for="option2">Option Two,</label> <input id="option2" type="radio" name="type" /> </form> Auditing alt text Alt text is relatively simple to audit and easy to fix, making this a quick-win WCAG 2.0 guideline. One of the best ways is to add the WAVE toolbar <http://wave.webaim.org/toolbar/> to Firefox and check a page. As most sites have a standard template, you can catch your biggest issues with one sweep. Banners, sidebar images and footers only need fixing once to improve every page on your site. After that, you’ll need to do page-by-page checking. If you want a more in-depth and hands-off solution, you can request an accessibility audit <http://www.wuhcag.com/contact/> of your whole website for alt text and other issues. One more thing [image: Forest] Photo credit <http://www.flickr.com/photos/view_camper/3179689934/> There are a few types of image that don’t need alt text: spacers, icons, purely decorative, tests and CAPTCHA images. Icons are usually used to complement text not replace it, so there’s no need to duplicate your efforts here. Users with screen readers would just hear the same thing twice anyway – which is the opposite of what we’re trying to do. Spacers are images used for padding, often for ease and not good coding. They are used to preserve formatting and present no information so don’t need alt text. Decorative images are ones used just because they look nice, they have no information or use other than aesthetics. Tests and CAPTCHAs would be undermined by text alternatives so you don’t need them – although if you do use CAPTCHA, use one with an audio alternative or add contact details to help blind users. In all theses cases, use what is called ‘null’ alt text by simply leaving the alt text out – but do put the quotes in: ? <http://www.wuhcag.com/alt-text/?goback=.gde_53511_member_150908160#> 1 <img src="location-of-image.jpg" alt="" /> Screen readers will then skip the image rather than reading the filename or trying to substitute an alt text. That’s all there is to alt text! Is there anything you’d like to add or any questions you have? Leave a comment below and I’ll be sure to respond. Don’t forget, you can now buy the book<http://www.wuhcag.com/shop/how-to-meet-the-wcag/>and learn about all the web accessibility guidelines at once! -- Regards, Srinivasu Chakravarthula - Twitter: http://www.twitter.com/VasuTweets Website: http://www.srinivasu.org | http://www.learnaccessibility.org Let's create an inclusive web! Search for old postings at: http://www.mail-archive.com/[email protected]/ To unsubscribe send a message to [email protected] with the subject unsubscribe. To change your subscription to digest mode or make any other changes, please visit the list home page at http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in
