Digital Design System

Image With Caption: Full Width

Imagery is a compelling part of our brand. When placing imagery within the content of a page, inline images should always have captions (to provide context and accessibility compliance).

Imagery helps create a pleasant user experience when created and designed properly. Imagery can provide information (remember accessibility!), improve branding aesthetic, and improve the user’s ability to scan material and engage with it.

Anytime an image is placed in the body of a page, it must have a caption and alt text associated with it. Before adding an image to a page, make sure you review the Accessibility > Imagerypage.

An image must always contain a caption for UX, accessibility, and SEO.

Image with caption example

<div class="card inline-media sr-reveal inline-media--notched">
    <img class="card-img-top" src="/images/inline-photo-example.jpg" alt="alt tag for the image, leave blank if this is decorative only">
    <div class="card-body">
        <div class="card-title mb-0 font-weight-semibold font-mono">Caption headline. Lorem ipsum dolor sit amet.</div>
        <p class="card-text font-p-small">Caption body which is optional. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

One of the most obvious ways we can fail accessibility requirements is by not following proper accessibility rules for imagery. Consult the imagery and accessibility section for more specific examples of how to ensure that content passes WCAG 2.1 Level AA standards.

Remember, not all imagery needs alt tags. For example, unless you are communicating information – e.g. in a chart, graph, or infographic – you do not need to have alt information added. You do, however, need to have alt=”” (empty quotes) to indicate to the screen reader that an image is decorative-only.

Always use the WTWCO.com Sitecore image component.

Key specs

  • Follow Brand image specifications
  • Ensure imagery follows specifications/sizing guidelines
  • Caption title text is mandatory, Caption body text is optional

At mobile sizes, the image changes to a full bleed display, and a bottom border is added to distinguish the image from the rest of the content that could possibly come below it.

alt text

If your image is a chart/graph that has information that is small and therefore hard to read according to our image specifications, you can use a Lightbox/Modal. Follow guidance for the lightbox, as it is key to not overuse the functionality. Only use it when it is crucial to magnify the content.

Below is an example of an image that was added to a page incorrectly. Why? It’s missing a caption, it had the title of the image on the image itself (instead of in the caption), and it wasn’t aligned.

alt text

We’ve also seen an issue with table titles/captions being added manually above the image. This is incorrect per our styles. Only use heading tags (e.g. <h4>) to begin sections of content. Do not use heading tags to introduce an image.

alt text