Image Playbook

Overview

Web page layout and and components are important in creating and accessible experience for all users.  Ensuring these considerations are used in page design phase will reduce fix time and help create the most accessible experience for all users.

Review quarterly

Just like security, digital accessibility requirements will evolve as software and technology develop.

Image plays: content under continual refinement

Formatting images:

Best practices

  • Image format

    Before sharing or posting an image, verify the image follows UTMB guidelines:

    The image doesn't contain text

    (screen readers can't read it and it doesn't always resize correctly)

    The file type is correct for the function

    • jpg, jpeg - photographs and other images
    • .png - when a transparent background is needed

    The file is under 1MB

    Image file name is clear

    • Meaningful and relate to the content
    • Sentence case or Title Case (avoid all caps except for acronyms)
    • Single between the words
    • No special characters, especially underscores, ampersand,s and quotes)
    • Avoid dates and words like final, copy

    The image has alt text

    Images should have alternate text added.

Describing images:

Best practices

  • Images have alternative text

    Summary: images must have associated text describing the content of the image also called alt text. Some decorative images do not require a description.

    Writing a good image description

    Describe the image like you would to a person who wasn't in the room with you, so they know what is happening in the image.

    • Write in sentence case.
    • Include just the description, not introductory text like "An image of" or "Image of" as screen readers will say something like, "Image: Image of a red train going through a dark tunnel."
    • Indicating the image is a graph, photo, or screenshot is okay. It will often sound like Image: Graph showing the number increase in sales" or "Image: Photograph of Mount Hood at sunset"
    • Include any text in the image (for example legacy images that haven't been updated)
    • If the image is complex or needs more of a description, add a detailed caption to the image.

    Basic verification

    • Run the application's accessibility checker.  If the application doesn't have an accessibility checker (or wizard, etc.) Manually verify that each image has a description.
    • Verify images
      • have alternative (alt) text
      • the image doesn't contain words as part of the image
      • doesn't use the file name as the alt text

    See also:

    Writing effective alt text

    Add alt text to an images in:

    Relates to: WCAG 1.1.1 Non-text Content

  • Facebook: Edit alternative text

  • Instagram: Edit alternative text

  • Outlook: Edit alternative text

  • Microsoft: Edit alternative text

WCAG: Related Guidelines

Get the details of related WCAG guidelines

Have digital accessibility questions or site feedback?  Email the digital accessibility team.