Images: Making Visual Content Accessible

Why Images Matter

Images are a powerful tool for enhancing the visual appeal and understanding of your webpage. However, for users with visual impairments or those relying on screen readers, improperly handled images can become barriers to accessibility. Providing appropriate text descriptions ensures all users can access and understand the information conveyed by images.

Using Images to Support Accessibility

Accessible images provide meaningful context for all users, regardless of their ability to see the image itself. This is achieved through:

  • Alternative Text (Alt Text): A concise description of the image’s purpose or content that is read aloud by screen readers.
  • Avoiding Text in Images: Text embedded in images is not accessible to screen readers and should be avoided. Instead, use plain text on the webpage to convey the same information.

By following these principles, your images can complement your content without excluding any users.

Example of Accessible Image Use

Scenario 1: Informative Image with Alt Text

  • Image: A photograph of Elon University’s Alamance Building
  • Alt Text: “Photograph of Elon University’s Alamance Building with flowers in bloom.”

Scenario 2: Decorative Image (No Alt Text Needed)

  • Image: A decorative background of maroon and gold patterns.
  • Alt Text: Leave the alt attribute blank (alt=””) to signal screen readers that the image is decorative and does not convey meaningful content.

Scenario 3: Text Embedded in an Image (Avoid)

  • Image: A brochure or flyer with the text, “Event at Elon! Join us Friday at 6 p.m. in Belk Library.”
  • Guidance: Avoid embedding text in images. Instead, write the text directly on the webpage. Screen readers cannot interpret the text within the image.

General Rules for Images

  • Always Use Alt Text: Provide a meaningful description for every image, unless it is purely decorative.
  • Be Concise but Informative: Alt text should describe the purpose or essential details of the image in one or two sentences. While there is no strict limit on the number of characters used in alt text, we recommended you keep the length to no more than 150 characters.
  • Avoid Text in Images: Whenever possible, use plain text on the page instead of embedding text in an image.
  • Mark Decorative Images Properly: Use an empty alt attribute (alt=””) for images that do not convey essential content.
  • Don’t Repeat Text: If the content of an image is already explained in surrounding text, keep the alt text brief or empty.

Common Mistakes to Avoid

  • Missing Alt Text: Failing to include alt text makes images inaccessible to users who rely on screen readers.
  • Using Long Alt Text: Overloading the alt text with unnecessary details can make it harder for users to follow.
  • Embedding Essential Text in Images: Screen readers cannot interpret text within an image, leaving visually impaired users without access to important information.
  • Not Marking Decorative Images Properly: Decorative images without an empty alt attribute may be read aloud by screen readers, causing confusion.

Final Tips

  • Test with Screen Readers: Use a screen reader to experience how your images are interpreted, ensuring your alt text is helpful and concise.
  • Think About Context: The alt text should reflect the image’s purpose within the page’s content.
  • Follow Brand Guidelines: Ensure all images align with Elon University’s branding and accessibility policies.