Introduction
Il est crucial de garder en tête l’importance de l’accessibilité de l'interface de votre plateforme. Dans cette optique, cet article vous offrira quelques éléments de base à prendre en considération pour vous aider à configurer cette interface.
Couleurs et contraste
Le contraste et les couleurs sont des aspects essentiels de toute interface accessible. Le rapport de contraste entre le texte et son arrière-plan doit être suffisant pour permettre aux utilisateurs avec différents niveaux de vision de percevoir et de comprendre le contenu. Les utilisateurs, y compris ceux souffrant de déficiences visuelles, doivent pouvoir percevoir le contenu de la page.
Maintenez un rapport de contraste d'au moins 4.5:1 pour le texte de taille normale, et d’au moins 3:1 pour le texte de grande taille. De plus, la présentation visuelle des éléments de l’interface utilisateur et des objets graphiques doit avoir un rapport de contraste d’au moins 3:1 par rapport aux couleurs adjacentes.
Plusieurs outils pour vérifier le contraste des couleurs sont disponibles en ligne :
- Vérificateur de contraste des couleurs (s'ouvre dans un nouvel onglet)
- Analyseur de contraste des couleurs (s'ouvre dans un nouvel onglet)
Thème de couleur accessible
Le thème de couleur par défaut de Docebo Learn offre des couleurs accessibles.
Vous pouvez configurer celles de votre plateforme en les définissant dans la section Couleurs du menu Configurer l’identité de marque et visuelle.
Utilisez les codes hexadécimaux fournis dans le tableau suivant :
| Élément concerné par la couleur | Code hex couleur |
|---|---|
| Couleur principale | #0068D9 |
| Couleur principale du texte | #212721 |
| Couleur secondaire du texte | #707070 |
| Couleur d'accentuation du texte et des liens | #0068D9 |
| Bordures, lignes | #E4E6E5 |
| Arrière-plan et éléments survolés | #f5f5f5 |
| Messages de confirmation | #008767 |
| Alertes | #F7681E |
| Erreurs | #E62231 |
Hiérarchie du contenu
Assurez-vous d'organiser votre contenu en attribuant le niveau approprié aux titres : ces derniers indiquent l’organisation du contenu sur la page. Les navigateurs web, les plug-ins et les technologies d’assistance peuvent s’en servir pour soutenir la navigation des utilisateurs sur la page. N'oubliez pas qu'un seul titre de niveau 1 ou <h1> est autorisé par page, et que celui-ci est géré par défaut par la barre de titre de la plateforme. Cela signifie que vous devez utiliser du contenu personnalisé à partir du niveau 2 ou <h2>.
À noter : Docebo ne saurait être tenu responsable des modifications appliquées par le biais de CSS personnalisé ou suite à l’injection de contenu HTML.