Creating Accessible Content and Configuring an Accessible Interface

Learn how to produce accessible content and how to configure an accessible interface for your learners

Last Updated

July 27th, 2020

Docebo Module

Learn

Reading Time

4 min

Introduction

Your platform is moving in the direction of providing accessible experiences for all users, regardless of their abilities or impairments. The learner experience of your platform is thus becoming accessible using screen readers and keyboard navigation in the areas outlined in the Docebo and Accessibility article.

Docebo is not responsible for the content uploaded in your platform (courses, training material, assets uploaded through Discover, Coach & Share, including captions) and does not grant that the content available in Docebo Content and Docebo Discover is accessible.  However,  we sincerely want to help you in creating content that can be as much inclusive and accessible as possible by providing you some easy suggestions and guidelines.

Writing Accessible Text

This section provides some basic considerations to help you get started writing web content that is more accessible to everyone.

When talking about accessibility, the word text refers both to the text that users can read on the screen (visible text) and to the text used by screen readers (non-visible text).

The visible text includes labels, elements, text on buttons, links, and forms. The non-visible text includes descriptions that are not displayed on the screen (such as the alternative text for buttons with icons). Both visible and non-visible text should be descriptive and meaningful, as some users navigate by using headings or links.

Here are some suggestions.

Keep it Simple

Get to the point and do not use text that is unnecessarily complex. Use clear language avoiding acronyms (or expand them at first use), idioms, slang words, abbreviations and special characters not readable by screen readers. Also, always consider the learners’ level of knowledge on the subject.

Be Concise

Avoid unnecessary sentences or words. Screen readers read out loud every element of the interface, so the shorter the text, the faster users can navigate the area.

Enforce Readability

Some learners may find it difficult to read long texts. Write short, focused sentences and paragraphs. Use headings to split your text so that screen readers can jump from one section to the other. Try to keep continuity between sections for fluent navigation.

Maintain Consistency

Try to keep a consistent language throughout the text, so that the terms you use become familiar for learners. Consider writing a glossary of the most commonly used terms.

Avoid Heavy Formatting

Use formatting (bold, italics, underline) and different font styles only when it is really needed. Do not rely on colored text, since some users may not see them properly.

Use Links Wisely

Create text links as part of the text you are writing. As an example, avoid Click here to download the file and use Download the file as a link instead. If possible, include information on where the link leads to.

Write Good Titles

Good titles (for example for courses, learning plans, training material, channels, catalogs, etc) are particularly important for orientation to help users in understanding their position in the page, and thus navigating pages and content. Good titles describe the content that they refer to. Try to be concise and put the most important information first.

Test Your Content

Make sure your content is as expected by testing it in your platform. Navigate to the areas where your content will be visible by your learners and try to emphasize it. Is the content auto evident? Is the text clear and expansive? Are the links clear or you have used something like click here?

Always Consider Labels

Use the same suggestions listed for texts when customizing the labels shown in the user interface via the Localization Tool.

Be Inspired

Here are some useful links that may help you in creating accessible content:

Platform Interface Customization

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

Colors

Contrast and colors are vital for an accessible interface. Users, including those with visual disabilities, must be able to perceive content on the page. Since June 30, 2020, the Docebo colors satisfy the requirements of the WCAG success criteria 1.4.3 Contrast (Minimum).

Accessible Color Theme   

At present, the Docebo default color theme does not provide accessible colors. Our Accessibility Team is working hard to make a default accessible theme available for all platforms. Keep an eye on our Product Updates page for our latest releases, and to be informed when the theme will be available.

In the meanwhile, you can already configure accessible colors in your platform by setting them in the Configure Branding and Look menu, accessible from the Admin Menu, form the gear icon in the top right corner.

Use the HEX codes provided in the following table:

Color AreaColor Hex Code
Main Colors#0465AC
Main Text Color#333333
Secondary Text Color#707070
Accent Text & Links Color#0465AC
Borders, Lines#E4e5e6
Background & Hover Items#f5f5f5
Confirmation Messages#008767
Alerts#C94E09
Errors#CF000F

If you wish to use other colors than the one suggested in this table, remember to keep a minimum contrast of 4.5:1. There are several tools to check the color contrast available online, here two examples: