Introduction
Docebo Learn évolue pour fournir une expérience accessible à tous les utilisateurs quelles que soient leurs capacités ou leurs limitations. L’expérience utilisateur sur votre plateforme devient donc plus accessible grâce à l'utilisation de lecteurs d’écran et la navigation clavier dans certains espaces et sur certains éléments indiqués dans l’article Docebo et l’Accessibilité.
Docebo n’est pas responsable du contenu ajouté à votre plateforme (cours, contenu pédagogique, contributions téléversées via Discover, Coach & Share y compris les sous-titres) et ne garantit pas que le contenu disponible dans Docebo Content soit accessible. Cependant, nous souhaitons vivement vous aider à créer du contenu qui soit aussi inclusif et accessible que possible en vous donnant quelques suggestions et recommandations.
Rédiger un Texte Accessible
Cette section vous fournit quelques indications de base pour commencer à écrire du contenu web plus accessible à tous.
S’agissant d’accessibilité, le mot texte, se réfère à la fois au texte que les utilisateurs peuvent lire sur leur écran (le texte visible) et au texte utilisé par les lecteurs d’écran (texte non-visible).
Le texte visible inclut les étiquettes, les éléments, les textes des boutons, les liens et les formulaires. Le texte non-visible inclut des descriptions qui ne sont pas affichées à l’écran (comme des textes alternatifs pour les boutons avec icônes). Les textes visibles et non-visibles doivent être descriptifs et explicites, car certains utilisateurs naviguent en utilisant des titres ou des liens. Voici quelques suggestions.
Soyez Simple
Allez à l’essentiel et n’utilisez pas de texte inutilement complexe. Utilisez un langage clair en évitant les acronymes (ou développez-les à leur première utilisation), les expressions idiomatiques, les mots familiers, les abréviations et les caractères spéciaux qui ne sont pas lus par les lecteurs d’écran. Prenez également en considération le niveau de connaissance des apprenants sur le sujet.
Soyez Concis
Évitez toute phrase ou mot inutile. Les lecteurs d’écran lisent à voix haute chaque élément de l’interface, raccourcir le plus possible le texte facilite donc la navigation pour les utilisateurs.
Renforcez la Lisibilité
Certains apprenants peuvent avoir des difficultés à lire de longs textes. Ecrivez des phrases et des paragraphes courts et ciblés. Utilisez des titres (et respectez leur strucure) pour diviser votre texte afin que les lecteurs d’écran puissent passer d’une section à une autre. Essayez de garder une continuité entre les sections pour une navigation fluide.
Restez Cohérent
Gardez un langage homogène dans tout le texte afin que les termes utilisés deviennent familiers pour les apprenants. Pensez à écrire un glossaire des termes les plus utilisés.
Évitez Toute Mise en Forme Excessive
Utilisez la mise en forme (gras, italique, souligné) et les différents styles de police quand c’est nécessaire. N'utilisez pas les couleurs du texte car certains utilisateurs ne les voient pas correctement. Alignez toujours le texte à gauche, ne le centrez pas, ne le justifiez pas.
Utilisez les Liens à Bon Escient
Créez des liens compris dans texte que vous écrivez. Par exemple, évitez Cliquez ici pour télécharger le fichier et utilisez plutôt Téléchargez le fichier en tant que lien. Si possible, ajoutez des informations sur la destination du lien et indiquez si le lien s'ouvre dans un nouvel onglet ou une nouvelle page. Si le lien est un télechargment, indiquez le type et la taille du fichier.
Soignez vos Titres
De bons titres (par exemple pour les cours, les plans de formation, le contenu pédagogique, les chaînes, les catalogues, etc.) sont particulièrement importants pour l’orientation et aident les utilisateurs à comprendre leur position dans la page et ainsi parcourir les pages et leur contenu. De bons titres décrivent le contenu auquel ils se réfèrent. Soyez concis et positionnez les informations les plus importantes en premier.
Testez votre Contenu
Assurez-vous que votre contenu est tel que vous le souhaitez en le testant dans sur plateforme. Naviguez dans les zones où votre contenu est visible pour les apprenants et essayez de le mettre en valeur. Le contenu est-il auto suffisant ? Le texte est-il clair et complet ? Les liens sont-ils clairs où avez-vous utilisé cliquez ici ?
Tenez Toujours Compte des Étiquettes
Utilisez les mêmes suggestions listées pour les textes quand vous personnalisez les étiquettes affichées dans l’interface utilisateur via l’Outil de Localisation.
Inspirez-vous
Voici quelques liens utiles qui peuvent vous aider à créer du contenu accessible :
- https://www.w3.org/WAI/tips/writing/ (s'ouvre dans un nouvel onglet)
- https://a11yproject.com/ (s'ouvre dans un nouvel onglet)
Configuration de la Plateforme
Il est important de garder l’accessibilité à l’esprit quand vous configurez votre plateforme. Cette section fournit quelques indications de base pour configurer la plateforme en tenant compte de l’accessibilité.
Couleurs
Le contraste et la les couleurs sont vitales pour une interface accessible. Les utilisateurs, y compris ceux ayant des déficiences visuelles, doivent pouvoir percevoir le contenu de la page. Depuis le 30 juin 2020, les couleurs Docebo satisfont aux exigences du critère de réussite 1.4.3 Contrast (Minimum) (s'ouvre dans un nouvel onglet) du WCAG.
Configuration Accessible
Configurez des couleurs accessibles dans votre plateforme en les définissant dans le menu Configurez l’Image de Marque et l'Identité Visuelle, section Couleurs.
Les codes HEX fournis dans le tableau ci-dessous sont les couleurs accessibles par défaut de Docebo Learn :
Zone de Couleur |
Hex Code de la Couleur |
Couleur Principale |
#0068D9 |
Couleur Principale Texte |
#212721 |
Couleur Secondaire Texte |
#707070 |
Couleur de Texte Accentué & Liens |
#0068D9 |
Bordures, Lignes |
#E4E6E5 |
Éléments d’Arrière-Plan et Survol |
#f5f5f5 |
Messages de Confirmation |
#008767 |
Alertes |
#F7681E |
Erreurs |
#E62231 |
Si vous souhaitez utiliser d’autres couleurs que celles suggérées dans ce tableau, veillez à garder un contraste minimum de 4.5:1. Plusieurs outils disponibles en ligne vous permettent de vérifier le contraste, voici deux exemples :
- Color Contrast Checker - Webaim.org (s'ouvre dans un nouvel onglet)
- Color Contrast Analyser - Paciello Group
Personnalisation du Code
Toute personnalisation du code de la plateforme doivent comprendre les éléments sémantiques adaptés afin de ne pas compromettre l'accessibilité de la plateforme.
Les éléments sémantiques HTML - ou les équivalents WAI ARIA - sont indispensables pour l'accessiblité du web car ils apportent une structure claire et pertinente au contenu web. De plus, ils adent les lecteurs d'écran ainsi que d'autres technologies d'assistance à interpréter et parcourir le contenu. Cela permet donc aux utilisateurs ayant des handicaps d'accéder au contenu et de s'y engager plus facilement.
Veillez à ne pas masquer les élements structurels de la plateforme (tels que la barre de titre, les fils d'Ariane et l'en-tête) car cela entraverait l'expérience utilisateurs des personnes qui utilisent des technologies d'assistance. Si vous devez masquer des éléments, assurez-vous que votre personnalisation apporte une alternative équivalente.
Veille à organiser votre contenu en attribuant les niveaux d'en-tête aux titres. Les en-têtes indiquent l'organisation du contenu sur la page. Les navigateurs web, plug-ins et technologies d'assistance peuvent les utiliser pour assurer la navigation dans la page.
A noter : Docebo n'est pas responsable de toute modification apportée par l'ajout de CSS personnalisé ou de contenu HTML.
References
Voici quelques liens utiles qui peuvent vous aider à créer du contenu accessible :
- HTML Accessibility (s'ouvre dans un nouvel onglet)
- Accessibility Tutorial (s'ouvre dans un nouvel onglet)