Skip Main Navigation

Accessible Web Design

Alt Text

When a screen reader comes across a graphic in a web page it has no idea what the graphic is unless specific information is given. This specific information is usually in the form of an alt attribute. Every graphic on a page should have an alt attribute whether that tag briefly describes the specifics of a chart or a brief description of an image. Alt text is made for brief descriptions as there is no way of skipping them. If the graphic or image is used for aesthetic purposes only there should still be an alt attribute. That alt attribute should be blank or null.

Example

HTML code for an alt attribute:

<img src="butterfly.jpg" alt="Monarch Butterfly">

Good Alt text:

Monarch Butterfly

Better Alt text:

A monarch butterfly in Mexico feeding on nectar during its spring migration north.

Monarch Butterfly



Links

Effective Alt Text
(http://www.webaim.org/techniques/images/5)

WAI Web Content Accessibility Curriculum
(http://www.w3.org/WAI/wcag-curric/sam2-0.htm)

up arrow back to top