We're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. If you don't need a caption, just eliminate the <figcaption> tags.
On this page, we'll give you the basic code for centering a single image and adding a caption, and using a banner image.
Centering a Single Image
We recommend centering informative images so that they're easier to see and understand on any device. For example, Figure 1 is centered on this page.
<figure style="margin: 2.5rem auto; width: 80%;">
<img style="width: 100%;" src="Image source" alt="concise description of the image" />
<figcaption>
Image Caption
</figcaption>
</figure>Guidelines
- If you want to change the width, we recommend changing it is the figure tag and while leaving the image width at 100%.
- The <figcaption> tags create a caption if you need one but can be deleted if you don't.
- A longer description beyond the alt text is often needed for informative images. See the Adding a Long Description page for more information.
Centered Banner Images
The purpose of a banner image is to add visual interest to the page. Such images are usually centered and sized to appear as large as possible on any screen. This code will help you do that.
<figure style="margin: 2.5rem 0;">
<img style="width: 100%;" src="Image source" alt="concise description of the image or empty (check decorative image box) if purely decorative" />
</figure>Guidelines and Modifications
- Check the decorative image box when adding the image to Canvas if appropriate.
- This style is using margins in the figure tag to define the space outside the image, so if you don't want it to span the full width of the page, you can adjust the second number in the margin (0 in the provided code).
Best Practice: Add Alt Text to Informative Images
Don't forget to add meaningful, concise alt text to informative images. The alt text serves as a replacement for the image if it fails to load or is read by a screen reader. It should not be the same as the image caption but should instead describe the information contained in the image so that someone can understand it even if they can't see it.
0 Comments
Add your comment