Successful alternate text descriptions for the image below could be in the surrounding paragraph text, an alt text description, a long description or a caption. You don’t need all four. Just make sure you are conveying all important information in at least one text format.
The surrounding paragraph text below describes the important information contained in the image.
"Karen went to the ITC E-learning conference in 2013 in San Antonio, TX. While she was there, she traveled to Stonewall, TX to see President Lyndon B. Johnson’s restored birthplace."
Extra credit: If you want to be extra diligent, use an "aria-describedby" image attribute to indicate where in the paragraph text the image is described. View the HTML source code to see how it is written.
Watch a video of the screen reader, JAWS, reading the surrounding paragraph text and see what happens when it gets to the image.
Alt text is an HTML attribute within the img tag. It is not seen on screen.
View the HTML source code for the image below to see how alt text is written in the img tag.
Watch a video of the screen reader, NVDA, reading the alt text, image attribute of the image above.
Images like this don't contain important information for the viewer, so you should use null alt text. View the HTML source code for the image to see how null alt text is written in the img tag.
Watch this short video of JAWS not reading the alt text in this example.
The Longdesc attribute is also an attribute of the image, but it allows you to create or link to a web page that provides a longer description of the image than the typical 100 characters allowed in alt text. Like the alt text, the longdesc attribute will not be seen on screen.
Watch this video on how JAWS reads the alt text and long description in this image example.
Your caption must be associated with the image, so make sure to properly add a caption using the 'figcaption' html tag. View the HTML source code for the image to see how the caption text is associated with the image using the figcaption tag.
Watch this video on how JAWS reads image captions.