Miami Dade College
Note the use of Section Tags throughout the document. This helps the screenreads in identifying landmarks within the page.
When using Section tags, be sure to include aria-label="" to properly name then
Use Figure tag when displaying photos and enclose the captions with the figcaption tag.
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.
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.
Some say a picture is worth a thousand words; well... we have plenty
Carousels are a great way to introduce "lifestyle" photos specific to a department or program. There are few accessiblity guidelines to keep in mind when including carousels on your pages. See minimun requirements below:
data-ride="carousel" data-interval="45000"