Aller au contenu principal

Créer une plateforme accessible à l’aide de code personnalisé

  • Dernière mise à jour:
  • Administrators
  • Instructors
  • Power Users

Introduction

En personnalisant votre plateforme à l’aide de code CSS, HTML et externe, vous pouvez créer une expérience plus personnalisée et engageante pour vos utilisateurs. 

Cet article décrit les meilleures pratiques pour garantir l’accessibilité de ces personnalisations, en fournissant des directives pour chacune de ces options.

Pour en savoir plus sur le thème de l’accessibilité chez Docebo et découvrir une liste des ressources disponibles, consultez l'article Docebo et l’accessibilité.

Règles générales

Voici une liste de directives générales valables pour toutes les méthodes de personnalisation :

  • Visibilité des éléments structurels : ne masquez pas les éléments structurels de la plateforme (comme le titre, la barre de navigation, les fil d’Ariane et l’en-tête) afin de ne pas compromettre l’expérience utilisateur pour ceux utilisant des technologies d’assistance. Si vous devez masquer des éléments, assurez-vous que votre personnalisation offre une alternative équivalente.
  • Utilisez des éléments HTML sémantiques : structurez votre contenu avec des éléments HTML appropriés. Cela garantit que le contenu est compris par les technologies d’assistance et aide les utilisateurs à le parcourir plus facilement.
  • Insérez du texte alternatif : incluez toujours un texte alternatif descriptif pour les images et icônes. Pour les images décoratives, laissez l’attribut alt vide. Pour les images utilisées comme boutons ou éléments interactifs, assurez-vous d’inclure un nom accessible.
  • Prenez en charge la navigation au clavier : tous les éléments interactifs (boutons, liens, champs de formulaire) doivent être navigables uniquement au clavier. Assurez-vous qu’il y a un indicateur de focus visible pour faciliter ce mode d’utilisation.
    Utilisez des rôles ARIA : utilisez des rôles et propriétés ARIA pour améliorer l’accessibilité des widgets personnalisés ou du contenu dynamique.
  • Fournissez une expérience de navigation cohérente : proposez une disposition et une structure de navigation cohérentes sur toute la plateforme pour aider les utilisateurs à trouver le contenu plus facilement.
  • Veillez à la cohérence de la hiérarchie du contenu : structurez votre contenu avec des balises de titre appropriées pour garantir une organisation logique. Une seule balise <h1> doit être utilisée par page.
  • Veillez au contraste des couleurs : assurez un contraste suffisant entre le texte et les couleurs de fond à des fins de lisibilité, en particulier pour les utilisateurs malvoyants ou daltoniens.
  • Évitez la lecture automatique du contenu : les supports multimédias en lecture automatique peuvent être perturbants. Si nécessaire, permettez aux utilisateurs de les mettre en pause, de les arrêter ou d’en contrôler le volume.
  • Testez l’accessibilité : testez régulièrement vos personnalisations pour l’accessibilité. Utilisez des outils comme Lighthouse, Axe ou WAVE pour identifier les problèmes potentiels. Effectuez également des tests manuels, incluant la navigation uniquement au clavier et les tests avec lecteur d’écran.

Les chapitres suivants fournissent des meilleures pratiques spécifiques pour différents types de sources de personnalisation.

CSS personnalisé pour le design de la plateforme

Lors de la personnalisation du design de la plateforme via CSS, assurez-vous que les modifications visuelles ne nuisent pas à l’accessibilité. Par exemple :

  • Maintenez un bon rapport de contraste entre le texte et l’arrière-plan pour améliorer la lisibilité pour les utilisateurs malvoyants (contraste minimum de 4.5:1).
  • Évitez d’utiliser les couleurs comme seuls indicateurs de sens ; utilisez des étiquettes textuelles ou d’autres indices visuels.
  • Assurez-vous que les modifications des feuilles de style CSS n’interfèrent pas avec la navigation au clavier ni avec la visibilité des indicateurs de focus.
  • Fournissez toujours des indicateurs de focus pour les éléments utilisables dans votre contenu personnalisé.

Widgets HTML personnalisés

Lors de l’utilisation de widgets HTML personnalisés pour ajouter des éléments spécifiques aux pages, souvenez-vous des points suivants :

  • Utilisez des balises HTML sémantiques appropriées (par exemple, <section>, <article>, <group>) pour transmettre le sens et la structure du contenu.
  • Assurez-vous que les titres sont utilisés correctement pour établir la hiérarchie du contenu.
  • Assurez-vous que tous les éléments interactifs (boutons, liens) sont clairement décrits et navigables au clavier.
  • Évitez les images de texte, car elles peuvent être inaccessibles pour les lecteurs d’écran. Utilisez plutôt des éléments de texte HTML appropriés, pleinement lisibles et redimensionnables.

HTML personnalisé dans les zones de texte

Lors de l’ajout de contenu HTML personnalisé dans les zones de texte, telles que les descriptions : 

  • Utilisez des éléments HTML accessibles comme des listes, des titres et des liens pour structurer logiquement le contenu.
  • Assurez-vous que tout contenu non textuel, comme les images ou icônes, dispose d’un texte alternatif descriptif ou d’aria-labels pour les lecteurs d’écran.
  • Évitez d’utiliser des images de texte. Si vous devez inclure des images, fournissez un texte alternatif approprié et utilisez du texte HTML pour le contenu critique.

Pour plus de meilleures pratiques sur la rédaction de contenu accessible, consultez l’article Rédiger un contenu accessible et efficace.

Liens personnalisés

Évitez d’ouvrir les liens dans de nouveaux onglets ou fenêtres, sauf si cela est strictement nécessaire, car cela peut perturber l’expérience de navigation de l’utilisateur. Si vous devez le faire, indiquez clairement si un lien ouvre dans une nouvelle fenêtre ou onglet :

  • Si vous utilisez l’éditeur de la plateforme, utilisez l’attribut target="_blank" pour les liens.
  • Si vous fournissez du contenu HTML personnalisé, incluez directement dans le code l’attribut target="_blank", et assurez-vous que le lien comporte une indication claire qu’il s’ouvre dans un nouvel onglet ou une nouvelle fenêtre. Cela peut se faire par un texte visible ou en indiquant la présence d’un élément visuellement masqué avec aria-describedby.

Contenu externe

Lorsque vous intégrez du contenu externe via des iframes ou que vous insérez des liens vers des pages externes, assurez-vous que :

  • Le contenu intégré est également accessible. Vérifiez qu’il respecte les normes des Règles pour l’accessibilité des contenus Web (WCAG).
  • Lors de l’intégration de contenus pouvant nécessiter une interaction (comme des formulaires ou des supports multimédias), assurez-vous que leur accessibilité au clavier et avec des lecteurs d’écran est pleinement prise en charge.
  • Ajoutez toujours un attribut title. Cela fournit une étiquette claire et concise pour le contenu de l’iframe, ce qui est essentiel pour que les utilisateurs de lecteurs d’écran en comprennent le but. Exemple : <iframe src="..." title="Carte interactive"></iframe>
  • Ajoutez un attribut lang si la langue du contenu est différente. Si le contenu de l’iframe est dans une langue différente de la page principale, incluez un attribut lang pour assurer une prononciation correcte par les technologies d’assistance. Exemple : <iframe src="..." title="Article en français" lang="fr"></iframe>;
  • Assurez-vous que les liens externes ont un texte de lien clair et descriptif qui indique la destination ou le but du lien.

Code externe

Lorsque vous injectez du code externe personnalisé de type JavaScript ou encore HTML dans la plateforme, assurez-vous qu’il est accessible. Voici les points sur lesquels vous devez vous concentrer :

  • Mises à jour dynamiques du contenu : si votre code met à jour le contenu sans nécessiter de recharger entièrement la page, assurez-vous que ces changements sont perceptibles par les utilisateurs de lecteurs d’écran. Dans certains cas spécifiques, vous pouvez utiliser des régions ARIA live pour annoncer les mises à jour importantes, mais appliquez-les avec précaution afin d’éviter de submerger les utilisateurs avec trop d’interruptions.
  • Accessibilité au clavier : tous les éléments interactifs dans votre code injecté doivent être entièrement accessibles et utilisables uniquement au clavier. Les utilisateurs qui ne peuvent pas utiliser une souris dépendent entièrement de la navigation au clavier.
  • Tests réguliers : testez régulièrement votre code injecté pour en confirmer la compatibilité et assurer une expérience fluide pour tous les utilisateurs.