Introduction

Starting from July 2020, all of the new functionalities of Docebo Learn meet the accessibility standards outlined in the Docebo Accessibility Statement (opens in a new tab). Docebo focuses on creating a keyboard-only and screen reader-compatible experience and keeps an eye out for future guidelines. Docebo works to implement native accessibility to create functionalities that are accessible by default, uses semantic code – integrated by WAI-ARIA – and does not rely on overlays or plug-ins not compatible with the needs of people with disabilities.

Keeping accessibility in mind when configuring the interface of your platform is very important. This article provides some basic considerations to help you in configuring the interface of your platform with accessibility in mind.

Learn more about creating accessible content.

Colors and Contrast

Contrast and colors are vital for an accessible interface. The text must have a sufficient contrast ratio against its background, allowing users with varying levels of vision to perceive and comprehend the content. Users, including those with visual impairments, must be able to perceive content on the page.

Keep a minimum contrast ratio of at least 4.5:1 for regular-size text and at least 3:1 for large-scale text. Also, the visual presentation of user interface components and graphical objects needs to have a contrast ratio of at least 3:1 against adjacent colors.

There are several tools to check the color contrast available online, such as:

• Color Contrast Checker (opens in a new tab)
• Color Contrast Analyser (opens in a new tab)

Accessible Color Theme

The Docebo Learn default color theme provides accessible colors.

You can configure accessible colors in your platform by setting them in the Configure Branding and Look menu, Colors section.

Use the HEX codes provided in the following table:

Code Customization

All platform code customizations must use appropriate semantic elements not to compromise platform accessibility.

Semantic Code

Semantic HTML - or WAI ARIA's equivalent - is essential for web accessibility since it provides a clear, meaningful structure and context for web content. In addition, it helps screen readers and other assistive technologies in interpreting and navigating web pages, enabling users with disabilities to access and engage with content more easily.

Links and Buttons

When including hyperlinks or buttons in your custom content, make sure their purpose is clear from the link text alone. Avoid generic terms like "click here" and instead provide descriptive text that hints at the destination. This practice assists screen reader users who navigate content by scanning links.

Do Not Hide Elements

Be careful not to hide the structural elements of the platform (such as the title bar, breadcrumbs and the header) or you may compromise the user experience of people who use assistive technologies. If you really need to hide elements, make sure that your customization provides an equivalent alternative.

Content Hierarchy

Make sure you organize your content by assigning the proper heading level to titles: headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. Remember that only one heading level 1 or <h1> is allowed per page and that it is managed by default by the platform title bar. This means that you need to use custom content starting from le level 2 or <h2>.

Please Note! Docebo is not responsible for any changes applied via custom CSS or HTML content injection.