Images
Screen readers interact with text on the screen. So, to convey the meaning of
an image to screen reader users, we put an accessible text label in the HTML. If an image is decorative, we can hide it from screen reader users by giving it an empty label (alt=""). After completing the exercise below, you can learn a lot more about writing good alt text for images by checking out WebAIM's resource on the
topic.
Accessible inline image​
This is an image with an alt attribute. Turn on VoiceOver if you are on a Mac, tab
to the Editor Output section, and use Ctrl + Opt + Right Arrow
to navigate to these images. VoiceOver will announce the alt text. For the second image below, VoiceOver
will not announce anything meaningful since there is no alt text.
Exercise: Inaccessible inline image​
This is an image without alt text. Turn on VoiceOver and listen to how it is read. Add an alt attribute "Teach Access logo" to this image to make it accessible and test it again with VoiceOver.