What is Alternative Text and why is it important?
Alternative Text (alt text) is used to describe an image to a user who is unable to see them. It is primarily used for people who are blind and utilize screen reading software. Without alt text, a person who is blind will not have access to the image's information. This is a common barrier to access, especially for images that include diagrams and charts.
What is a screen reader?
A screen reader is a form of assistive technology that renders text and image content into speech output. People who are blind utilize this type of software to navigate computer/web content, solely through the use of a keyboard. Example programs include Jaws, NVDA, and VoiceOver.
Images Example
To determine if an image is inaccessible, you either need to use a screen reader on the image or check the source code.
Here is an example of an inaccessible image's code for this image:
Inaccessible: <img src="bird.png" alt="">
Notice how the HTML Alt Tag is empty. Since it is empty, the screen reader would not be able to read anything, resulting in the user not having access to the image description.
Below are some examples of providing Alt Tags for the image, varying in quality:
Okay alt text: <img src="bird.png" alt="Bird">
Better alt text: <img src="bird.png" alt="Bird Flying">
Best alt text: <img src="bird.png" alt="Hummingbird flying with its wings fully extended">