Appropriate Alt Text for Functional Images

Functional images – images that serve as links. Use the destination as the alt text.

• If clicking a logo in the upper left of a page takes you to the home page, use alt="Home" as the alt text.
• If the button is a purchase button, use alt="Buy Now" as the alt text.
• Icons such as magnifying glasses meant to indicate search should have alt text that explains the desination of a click. Alt text for a magnifying glass icon might be alt="search this site".
• If clicking a thumbnail image of a faculty member leads to that faculty member's bio, alt text should be something like alt="learn more about Jane Doe".

Appropriate Alt Text for Photographs

• Be sure that the image conveys needed content and belongs in the HTML rather than the CSS
• Imagine reading the web page to someone over the phone. What would you say to describe the image? That is close to what the alt text should be.
• For example: alt="our rooms include a queen bed, two bedside lamps, two comfortable chairs at a table with internet connection, color TV and a spacious dresser".
• For example: alt="cup of sweet potato puree"

Appropriate Alt Text Fits the Context

There is no "right" alt text for any image. It depends on the purpose of the image on the page.
What alt text would you use if this was in a family album, in a detergent ad, on a mosquito eradication site, on a weather site, or in a toy car site?

Image Credit: MollyPop

Appropriate Alt Text Fits the Context, one more time

What would be appropriate for this image if it were a link to the Facebook page on marketing solutions? What if it were an image illustrating a story about Facebook marketing solutions?

Decorative Images

Everything that makes this page attractive is pure decoration and is in the stylesheet where it needs no alt text because it isn't part of the content. That includes the leaves, the clouds, the umbrella with swirls, the ideogram, and the designs behind the headings.

Style Rule Examples from the Previous Image

body {background: #e6fad6 url(body_bg.jpg) no-repeat top center;}

#container {background:url(content_bg_top.jpg) no-repeat top center;}

#pageHeader {background:url(header_what_about.gif) no-repeat top center;}

Testing Your Site: Browser Tools

Web Developer Toolbar for Firefox and Chrome offers a number of testing tools in the browser.

Testing Your Site: WebAIM's WAVE

The WAVE tool identifies every element on your page, points out accessibility errors. When you hover over one of the icons WAVE displays, it explains what the error is.

Testing Your Site: WebAIM Checklists

The WebAIM site has checklists for WCAG 2.0 and Section 508. WebAIM also has many articles about accessibility topics such as cognitive web accessibility, screen readers, and specific help for education, government, health care, business and non-profit site accessibility. WebAIM offers accessibility training.

Testing Your Site: Emulators

Search for emulators for specific devices by name. Or pick a site that offers skins for several devices. There are many sites for this, one example is mobilephoneemulator.com/

Testing Your Site: Cross-Browser and Cross-Device Testing

Sites such as browsershots.org and browsercam.com let you see screen shots of any page you want to test in a variety of browsers. This may include mobile device screen shots.

• Test with a variety of browsers on your own computer
• Test with a variety of mobile devices

Other Tests

• If you can, test with a screen reader
• Test with JavaScript disabled – can you still navigate?
• Test with CSS disabled – does it still make sense?
• Test with no mouse – keyboard only.
• Test by zooming the text up several times
• Test with wide and narrow browser windows

Knowbility Training

Knowbility.org provides accessibility training and conferences.

Resources and Links

• Web Developer Toolbar for Firefox and Chrome: chrispederick.com/work/web-developer/
• WAVE: wave.webaim.org/
• WCAG 2.0 Checklist at WebAIM: webaim.org/standards/wcag/checklist
• Knowbility Training: knowbility.org/v/training-services/