Accessibilité : Meilleures pratiques pour le système de gestion de contenu (CMS)

La mise en œuvre des meilleures pratiques en matière d'accessibilité dans votre CMS (système de gestion de contenu) garantit que votre site est utilisable par tous, y compris par les personnes qui utilisent des technologies d'assistance. Ces pratiques comprennent l'ajout de noms accessibles aux éléments, l'utilisation de texte alternatif efficace pour les images et les galeries, et le placement d'éléments dans des sections ou des conteneurs avec des attributs ARIA. 

En suivant ces directives, vous pouvez créer un site Web plus inclusif qui s'adresse à tous les utilisateurs, ce qui leur permet de naviguer et d'interagir plus facilement avec votre contenu.

Le texte alternatif est essentiel pour fournir un contexte aux images et aux galeries. Lorsque vous rédigez du texte alternatif, vous devez vous concentrer sur la description de l'image comme si l'IA l'interprétait. Soyez concis (moins de 125 caractères) et évitez les phrases comme « image de ». Pour des conseils plus détaillés sur la rédaction de textes alternatifs efficaces, veuillez consulter Accessibilité : Préparer vos images et vos galeries.

En général, nous vous recommandons de créer un champ de collection à utiliser comme texte alternatif pour les images et les galeries connectées au système de gestion de contenu (CMS). Pour organiser votre collection, vous pouvez placer le champ de texte alternatif à côté de l'image ou de la galerie qu'il représente et le nommer « Texte alternatif [image/nom de la galerie] ». Gardez à l'esprit que les images décoratives n'ont pas nécessairement besoin de texte alternatif. Consultez la section des images décoratives ci-dessous pour plus d'informations. 

Lorsque vous ajoutez des images non décoratives à votre système de gestion de contenu (CMS), il est essentiel de fournir un texte alternatif descriptif. Nous vous recommandons d'ajouter un type de champ « Texte » distinct dans votre collection du système de gestion de contenu (CMS) qui représente le texte alternatif des images. Concentrez-vous sur l'utilisation d'un langage spécifique et descriptif dans votre texte alternatif. Par exemple, au lieu d'écrire le texte alternatif comme « femme », utilisez « femme plantant des marguerites dans un jardin ». 

Lorsque vous connectez l'image dans votre éditeur au dataset, cliquez sur le champ Texte alternatif connecté à et sélectionnez le champ de texte alternatif que vous avez créé. Cela permet aux lecteurs d'écran de décrire l'image et son objectif, ce qui rend votre site plus inclusif. 

Les images personnalisées ne communiquent généralement pas de contenu pertinent et ne nécessitent pas de texte alternatif. Si une image a un but purement décoratif, vous pouvez laisser le texte alternatif déconnecté dans l'ensemble de données. Cela permet aux lecteurs d'écran d'ignorer l'image, ce qui évite les confusions inutiles.

Si un lien image renvoie à une action de l'ensemble de données, telle que l'ouverture de la page de l'élément dynamique, son texte alternatif doit décrire l'action, plutôt que l'image elle-même. Par exemple, si un clic sur une image redirige les visiteurs vers une page de profil, le texte alternatif pourrait être « En savoir plus sur Willis McSmoot ». 

Les expressions permettent de combiner du texte statique (ex. « En savoir plus sur ») avec des valeurs de champ de collection dynamiques (ex. « Willis McSmoot ») pour vous assurer que le texte alternatif varie d'une image à l'autre. De cette façon, les visiteurs peuvent comprendre le but de l'image lorsqu'ils utilisent des technologies d'assistance. 

Pour les galeries qui se connectent aux types de champs « image », il est important de fournir un texte alternatif pour chaque image. Créez un type de champ « Texte » distinct dans votre collection du système de gestion de contenu (CMS) pour le texte alternatif des images. Lorsque vous connectez la galerie à votre ensemble de données, connectez le menu déroulant Textes alternatifs connectés à au champ de texte alternatif correspondant. Cela permet aux lecteurs d'écran de fournir des descriptions des images de la galerie, ce qui améliore l'accessibilité.

La connexion d'une galerie au champ « Galerie média » est un excellent moyen d'afficher de nombreuses images ou vidéos concernant un élément sur une page d'élément dynamique. Ce faisant, ajoutez un texte alternatif pour chaque fichier multimédia directement dans le champ « Galerie média » de votre collection. Cliquez sur le champ « Galerie média » à côté de l'élément concerné dans votre collection pour ajouter un texte alternatif à chaque fichier multimédia. Vous pouvez également y saisir le titre et la description de chaque fichier. Cela permet aux lecteurs d'écran de communiquer le contexte des images et des vidéos, en vous assurant que tout le contenu média de votre galerie est accessible.

Lorsque vous ajoutez un bouton « En voir plus » dans l'éditeur studio, conservez tout ce qui est placé sous le répéteur ou la galerie dans une section distincte. Si vous placez des éléments dans la même section que le répéteur ou la galerie, et directement sous le répéteur ou la galerie, les éléments se chevauchent lorsque l'on clique sur le bouton « En voir plus ». Ce chevauchement peut être source de confusion pour les visiteurs car il empêche la visibilité et l'accessibilité.

Pour éviter ce problème, assurez-vous toujours que tous les éléments que vous souhaitez placer sous le répéteur ou la galerie, y compris le bouton « En voir plus », sont connectés à une section distincte. De cette façon, lorsque les utilisateurs cliquent sur le bouton « En voir plus », la galerie ou le répéteur se développe correctement sans se chevaucher, ce qui offre une expérience plus claire et plus conviviale.

Sur les pages statiques, si les visiteurs peuvent cliquer sur les boutons « Élément suivant/précédent » qui provoquent la modification du contenu des éléments connectés au système de gestion de contenu (CMS), joignez les éléments d'affichage à un conteneur unique. Configurez ensuite les attributs ARIA (Applications Internet enrichies accessibles) du conteneur afin que les lecteurs d'écran puissent annoncer le contenu modifié lorsque les visiteurs cliquent sur les boutons.

Vous devez uniquement joindre les éléments qui affichent le contenu modifié. Les boutons « Élément suivant/précédent » n'ont pas besoin d'être connectés à un conteneur.

Si vous affichez le nombre d'éléments de l'ensemble de données dans un élément de texte et que les visiteurs peuvent cliquer sur un élément de saisie pour modifier le nombre d'éléments, joignez le texte à un conteneur. Configurez ensuite les attributs ARIA (Applications Internet enrichies accessibles) du conteneur afin que les lecteurs d'écran puissent annoncer le nombre d'éléments lorsqu'il change.

Cela peut s'avérer utile lorsque les visiteurs cliquent sur des entrées qui filtrent le contenu ou sur des entrées qui collectent du contenu. Chaque fois que les visiteurs ont la possibilité de modifier le nombre d'éléments affichés, joignez le texte qui affiche le nombre d'éléments à un conteneur afin que les lecteurs d'écran puissent annoncer la modification.

Lorsque vous avez des éléments de saisie qui sont configurés pour filtrer le contenu, les filtres sont appliqués dès qu'un visiteur effectue une sélection par défaut. Vous pouvez modifier ce comportement en ajoutant un bouton « Appliquer les filtres ». 

Pour l'accessibilité, il est préférable d'ajouter un bouton « Appliquer les filtres ». Avec ce bouton, le contenu n'est pas filtré tant que les visiteurs ne cliquent pas. Cela crée une meilleure expérience, en particulier si les utilisateurs souhaitent configurer plusieurs filtres avant de les appliquer tous en une seule fois. 

Pour rendre les barres de pagination davantage accessibles, ajoutez des noms d'accessibilité à la fois à la barre elle-même et à ses boutons. Ces noms ne sont pas visibles à l'écran mais sont essentiels pour les lecteurs d'écran, car ils aident les utilisateurs à comprendre comment naviguer entre les pages. Par exemple, vous pouvez nommer la barre de pagination « Navigation de page » et attribuer des noms clairs aux boutons tels que « Page suivante », « Page précédente », ou les personnaliser en fonction de votre contenu (ex. « Story suivante » ou « Article précédent »).

Cliquez ci-dessous pour obtenir les réponses aux questions d'accessibilité courantes.