Let's Talk About Images
A picture is worth a thousand words!
Sure, all this text is great, but pictures communicate a lot of information when browsing the internet. Plus, they add a lot of interest to websites as well.
However, when a person has a visual impairment, accessing images may be difficult or impossible. That is, unless they have "alt text."
What is Alt Text
Alt text is a written description of an image that is added to the element's code when the webpage is first created, or the image is first added. Your screen reader, or NVDA in this case, communicates with the webpage and reads this alt text, so when you navigate to the image, NVDA will verbalize what is happening in the picture.
In less technical terms, alt text is a description of a picture on the web. This description is not visually on the page. It is for the screen reader's eyes only. And then when your cursor navigates to the image, NVDA tells you what the image is rather than just saying "image" or "graphic"
Navigation
That's great and all, but how do we actually navigate to an image? We press the "g" key for graphic. You will navigate to the next available image on that page. Press "Shift + g" to move to the previous image. If the image has been given alt text, NVDA will describe the image. If it has not been given alt text, NVDA will either say "graphic", "image", or it might not say anything at all.
Sometimes your web browser will try to add alt text to an image that has not been given it by the creator. For instance, Google Chrome tries to add alt text to images without descriptions. NVDA may say something like "appears to be" or "maybe image of...". If you hear either of these phrases in the description, note that the description has not been designated by the person who uploaded or created the image. Therefore, the description could be incorrect. Keep your ears on the look-out for these types of phrases.
Practice
Press the "g" key to find the first image on this page.
Below there are 2 images. One of them has been given alt text. and the other has not. See how NVDA interacts differently.
Did you notice a difference? Did NVDA recognize both images? Did it only recognize one? What did it say for the image that did not have alt text?
Review!
Which key do we press to navigate to the next image?