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:
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:
| Color Area | Color Hex Code |
|---|---|
| Main Color | #0068D9 |
| Main Text Color | #212721 |
| Secondary Text Color | #707070 |
| Accent Text & Links Color | #0068D9 |
| Borders, Lines | #E4E6E5 |
| Background & Hover Items | #f5f5f5 |
| Confirmation Messages | #008767 |
| Alerts | #F7681E |
| Errors | #E62231 |
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 level 2 or <h2>.
Please note: Docebo is not responsible for any changes applied via custom CSS or HTML content injection.