Keep it clean!
When displaying images with captions. Instead of wrapping the images in <div> tags, use Figure
tags. Using different tags will both aide the screen reader in identifing landmarks and aide the developers in reading through huge amounts of code.
Wrap the image caption in the figcaption
tag. Note: You can add <p> tags, head tags, <h1>, <h2>, <h3> ... , inside the figure container as well. For more informaiton on the different use cases for <Figure> tags click the "Learn more" button below.
Learn More
Accessiblity Tip:
By default, a link outside of a paragraph tag will not be associated with any surrounding information. To create an association, either place the button inside of the paragraph or add the attribute aria-describedby="examplElementId"
or aria-labeledby="examplElementId"
. Replace the "examplElementId" with the Id of the paragraph you would like the link (link button) to be associated with.