Working With Image Code
Before we talk about writing a good description, we need to go over the HTML code properties for images because those define how long the description can be and where it goes on the page. While this foundational knowledge is important, keep in mind that Evolution and Canvas provide simple ways for adding alt text without needing to edit code, which we'll demonstrate later in this module.
When you view the source code of the page, you'll see that the image is in an <img> tag, which has a number of "attributes," such as src, title, height, width, and alt. The <img> tag attributes define the image's source and size.
The Alt Attribute
In terms of accessibility, our focus is on the alt attribute (often called the alt tag). The alt attribute's purpose is to contain a short description of the image, which will display if the image fails to correctly load on the page; additionally, screen-reading software can read the alt text aloud to a person using a screen reader or a read-aloud tool.
Example Image: The WCLD Accessibility Ally Badge
This is the code:
<img id="164192146" src="/courses/1975413/files/164192146/preview?verifier=LUwqf91Ml18GNVGMNjBCtpgLn5DwYyQl9SyjAR7q" alt="W C L D Accessibility Ally Badge" width="50%" height="50%" />
In our example, you can see that the alt text is "W C L D Accessibility Ally Badge."
The alt text is short and conveys the meaning of the image without describing its shape or color. There are spaces between the letters WCLD so that they'll be read correctly by assistive technology. Learn more about writing good alt text on the Image Alternative Text page.