Skip to main content

Docebo Help

How can we help?

Configuring alternative text for media

Last updated
Docebo module
Reading time
User level
  • Administrators
  • Instructors
  • Power Users

Introduction

Alternative text (also known as alt text) is a short description that conveys the meaning of visual media when they cannot be seen, ensuring that users with visual impairments can still understand their content. It also benefits all users by enhancing clarity and supporting a more inclusive learning experience.

This article offers practical suggestions for configuring alternative text for the media you use on the platform. 

To help you get started, here are some useful resources on writing effective alt text:

Platform areas where you can add images

Here follows a list of the platform areas where you can upload images and configure alternative text.

Warning. Always provide alternative text for images included within the content of your training materials. Docebo is not responsible for the content you upload to your platform.

Course descriptions

When adding images to a course description, enter the alternative text by clicking on the image and then on Alternative text.

Training material description

When adding images to the description of training materials, use the Image description field during the upload process to add the alternative text. The image description is the alternative text.

Page widgets

The Image widget is currently not accessible. If you need to upload images that contain meaningful content use the Custom content box widget (without button) or create an HTML widget with real text placed above the image. 

For more information, refer to the article Configuring accessible widget pages.

Writing alternative text for images

Images enhance content and provide visual context, simplifying the user experience and helping those who struggle with reading or who prefer visual learning, reduce cognitive load, and make information easier to grasp at a glance. 

However, images can also create challenges for those using screen readers. To ensure that all users, regardless of their abilities, can understand an image's purpose and meaning, it is important to provide descriptive alternative text.

Writing good alternative text is crucial for conveying an image's message to users who cannot see it. Aim for conciseness and accuracy.

Here are some guidelines:

  • Be concise and specific: Describe the main subject and purpose of the image in as few words as possible. Avoid unnecessary details.
    ✅ Use: Laptop on a desk.
    ❌ Avoid: A picture of a laptop sitting on a desk with a coffee cup next to it and some papers.
  • Convey the message or function: What information or function does the image provide?
    • Image showing a graph: Sales trends for Q1 2024, showing a 15% increase.
    • Image acting as a button: Magnifying glass icon to search.
  • Avoid redundancy: Screen readers automatically announce that an element is an image, so there is no need to include "image" in your alternative text. 
    ✅ Use: A fluffy cat
    ❌ Avoid: Image of a cat
  • Provide context: Altertnative texts relates to the context which the image is used. Consider what information a user would miss if they could not see the image.
  • Skip alternative text for decorative images: If an image is purely decorative and does not add meaningful information, leave the alternative text blank. This allows screen readers to skip it, preventing unnecessary distractions. Thumbnails and header images, often implemented as backgrounds, are generally invisible to screen readers, so they do not require alternative text.

References

Images of text: why you should avoid them

An image of text (opens in a new tab) is text rendered as an image rather than actual, selectable text, to convey meaning.

Screen readers cannot read the text embedded in images, which means users who rely on this technology may miss important information. Additionally, users with visual impairments may have difficulty reading text within images due to poor contrast or complex backgrounds. 

On responsive designs, text over images can become misaligned or too small on smaller screens, further hindering accessibility, especially for users with low vision. In contrast, real text can be resized, magnified, and adjusted to meet individual needs, offering greater flexibility and improving accessibility for all users.

Use separate text instead of embedding it within images. This makes the content readable, resizable, and adaptable for all users. 

If you have to use images of text, ensure there is sufficient contrast between the text and its background, or use a solid background to improve visibility. Always provide descriptive alternative text, but avoid relying on the image alone to convey essential information.