Introduction

You can configure your platform’s widget pages using various widgets, and it is important to ensure that the digital content within them is accessible to all users. Accessibility is key to creating inclusive learning experiences.

This article outlines best practices for designing accessible widget pages, including strategies like assigning meaningful titles and using semantic HTML. By applying these simple suggestions, you can improve usability for individuals with diverse abilities. The goal is to provide practical guidance that helps you build a more inclusive and engaging learning environment for everyone.

For the complete list of accessible widgets, refer to the Scope of this document chapter of the Docebo Accessibility Conformance Report - Public areas, login process, and built-in pages.

For more information about accessibility at Docebo, including a list of the available resources, refer to the article Accessibility at Docebo.

Give widgets meaningful titles

Assign a visible title to each widget using the Title field or by defining it within your custom content. If you opt to provide a custom title, remember to assign the correct heading level according to the overall page structure, which helps screen readers interpret the content correctly. We strongly suggest defining a widget title even when the widget content is visually self-explanatory.

Best practice. If you add multiple widgets of the same type on the same page, make sure to assign a unique and meaningful title to each one.

HTML/WYSIWYG widget

To ensure accessibility for the HTML/WYSIWYG widget, use appropriate semantic code and follow the WCAG guidelines. This practice not only improves accessibility compliance but also enhances the user experience in general.

For more details, refer to the article Building an accessible platform with custom code.

Embed video widget

When you configure the Embed video widget, ensure accessibility for users with vision impairments by providing alternatives for time-based media, such as videos. This can include adding audio descriptions of the video's visual elements as an additional audio track.

The Docebo platform does not offer pre-recorded content, so content creators are responsible for ensuring the accessibility of their videos. For more information, refer to Vimeo, YouTube, and Wistia. 

For more information, refer to the Embedded videos chapter of the article Configuring accessible training material.

Courses and learning plans widget

When configuring the Courses and learning plans widget, choose either the Card or List display mode based on your audience and the amount of content. If you are displaying a long list of courses, the List view is usually the best option.

Configure the widget to show the search bar, the filters selector, and the sorting options only if they are essential for your users' journey. Avoid including them purely for design reasons: keeping the layout clean helps reduce cognitive load and improves usability.

Custom content box widget

When configuring the Custom content box widget, choose background and text colors carefully. A solid color background is typically the best option, as it ensures sufficient contrast. If you opt for an image background, make sure the title and subtitle remain legible by placing them where the contrast is adequate.

Assign a clear and functional label to the link. Although it appears as a button for design purposes, it functions as a link. Avoid using identical link text for different destinations, as this can confuse screen reader users. Only enable the Open in a new tab/window option when it truly adds value. Finally, align the content on the left, as left-aligned text is usually the most readable. For more details on links and accessibility, refer to the Use links wisely chapter of the article Writing accessible and effective content.

My calendar widget

When configuring th My calendar widget, remember that all calendar views are accessible and provide the list of events. The agenda view is particularly beneficial as it imposes the least cognitive load on users. 

Enable the Show display view option, so that users can choose their preferred view.

Task list widget

When configuring the Task list widget, carefully choose the tabs to display to avoid clutter. Users can explore the content via the pagination bar or by scrolling through the page. Also, set the widget height thoughtfully to ensure that a meaningful number of items are visible at a glance.