Web Accessibility Basics

Accessible Image Example (with alt attribute)

Continuing with the example image from above, an alt attribute has now been provided. In this instance, the screen reader will announce something like "five newborn duck hatchlings huddled together".

five newborn duck hatchlings huddled together


HTML code snippet:

<img src="newborn-ducks.jpg" alt="five newborn duck hatchlings huddled together" />


Screen Reader Testing Activity:

Turn on NVDA. Press the down arrow key to move through the web page. Now, what is announced when it encounters the image? Do you see the difference an alt tag makes?

«

»