Système de gestion de contenu (CMS) : Meilleures pratiques d'accessibilité
14 min
Dans cet article
- Meilleures pratiques pour les textes alternatifs dans le système de gestion de contenu (CMS)
- Pour les images non décoratifs
- Pour les images décoratifs
- Pour les images qui servent de boutons cliquables
- Pour les galeries connectées aux types de champs « image »
- Pour les galeries connectées aux types de champs « Galerie des médias »
- Noms accessibles pour les boutons
- (Éditeur Studio uniquement) Joindre des éléments à des sections distinctes lors de l'utilisation des boutons « En voir plus »
- (Pages statiques uniquement) Joindre des boutons « Élément suivant/précédent » aux conteneurs
- Joindre le texte « nombre d'éléments » à un conteneur
- Rendre les éléments de saisie accessibles
- Rendre les barres de pagination accessibles
- FAQ
Mettez en œuvre les meilleures pratiques d'accessibilité dans votre Système de gestion de contenu (CMS) pour rendre votre site utilisé par tous les visiteurs, y compris ceux qui ont besoin de technologies d'assistance. Ces pratiques incluent l'ajout de noms accessibles aux boutons, l'utilisation de texte alternatif efficace pour tous les médias, et le placement d'éléments dans des sections ou des conteneurs avec des attributs ARIA. Utilisez ces directives pour aider tout le monde à naviguer et à interagir plus facilement avec votre contenu.
Meilleures pratiques pour les textes alternatifs dans le système de gestion de contenu (CMS)
Le texte alternatif est essentiel pour fournir un contexte aux images, aux vidéos et aux formes vectorielles. Lorsque vous rédigez du texte alternatif, décrivez les médias de manière claire et concise, comme si l'IA ou les lecteurs d'écran l'interprétaient. Gardez le texte alternatif sous 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.
Nous vous recommandons de créer un champ de texte dans votre collection du système de gestion de contenu (CMS) à utiliser comme texte alternatif pour chaque élément média. Pour organiser votre collection, placez ce champ à côté du champ de médias qu'il représente et nommez-le clairement, par exemple « Texte alternatif [image/nom de la galerie] ».
Pour les éléments vidéo, la propriété de texte alternatif est appelée Description de la vidéo dans le panneau de connexion du dataset. Pour les images vectorielles ou les formes, utilisez l'option Texte alternatif connecté à . Pour les images d'arrière-plan dans les sections, les bandes, les colonnes ou les éléments de répéteur (Éditeur Wix uniquement), utilisez le texte alternatif de l'arrière-plan connecté à.
Les images décoratifs et les médias qui ne génèrent pas de contenu pertinent peuvent avoir leur texte alternatif vide. Cela permet aux lecteurs d'écran de les ignorer et de réduire les perceptions.
Pour les images non décoratifs
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.
Pour les images décoratifs
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.
Pour les images qui servent de boutons cliquables
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 utiliser des phrases pour créer un texte alternatif personnalisé :
- Connectez l'image correspondante à l'ensemble de données qui se connecte à votre collection.
- Cliquez sur le menu déroulant Texte alternatif connecté à dans le panneau Connecter une image et sélectionnez Expression.
- Cliquez sur le champ Expression et entrez une fonction qui crée le texte alternatif dont vous avez besoin. Par exemple, vous pouvez saisir la fonction suivante pour combiner « En savoir plus sur » avec un champ « titre » contenant les noms :
1CONCAT(« En savoir plus sur »,titre)En savoir plus sur l'utilisation d'expressions pour combiner les valeurs de plusieurs champs.
Pour les galeries connectées aux types de champs « image »
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é.
Pour les galeries connectées aux types de champs « Galerie des médias »
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.
En savoir plus sur la connexion de galeries aux champs « Galerie des médias ».
Noms accessibles pour les boutons
Vous pouvez ajouter des noms d'accessibilité aux boutons qui se connectent à votre système de gestion de contenu (CMS). Les noms accessibles fonctionnent comme le texte alternatif mais sont spécifiques aux boutons. Ils aident les lecteurs d'écran à décrire l'action du bouton ou l'endroit où il mène. L'ajout de noms d'accessibilité aux boutons améliore l'accessibilité de votre site et aide tous les visiteurs à naviguer plus facilement dans votre contenu.
Lorsque vous connectez un bouton à votre dataset, utilisez le menu déroulant Nom d'accessibilité connecté à pour connecter le nom d'accessibilité à un champ « Texte » de votre collection. Ce champ doit décrire l'action ou la destination du bouton de manière claire et concise.
Par exemple, au lieu d'un nom générique comme « Cliquez ici », utilisez « En savoir plus sur nos services » ou « Soumettre votre candidature ».
Si nécessaire, vous pouvez utiliser des phrases pour combiner du texte statique avec des valeurs des champs de votre collection. De cette façon, les lecteurs d'écran fournissent des descriptions pertinentes pour chaque bouton en fonction du contenu. Par exemple, vous pouvez créer un nom d'accessibilité comme :
1CONCAT(« En savoir plus sur »,titre)(Éditeur Studio uniquement) Joindre des éléments à des sections distinctes lors de l'utilisation des boutons « En voir plus »
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.
En savoir plus sur l'ajout d'un bouton « En voir plus » :
(Pages statiques uniquement) Joindre des boutons « Élément suivant/précédent » aux conteneurs
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.
Éditeur Wix
Éditeur Studio
- Accédez à votre éditeur.
- Ajoutez un conteneur.
- Cliquez sur CMS
sur le côté gauche de l'éditeur. - Cliquez sur Vos collections.
- Cliquez et faites glisser les éléments qui affichent le contenu du CMS sur le conteneur pour les connecter.
- Activez le codage si vous ne l'avez pas déjà fait :
- Cliquez sur Mode développeur en haut.
- Cliquez sur Activer le mode développeur.
- Activez les outils de développement d'accessibilité :
- Cliquez sur Paramètres en haut de votre éditeur.
- Sélectionnez Assistant d'accessibilité.
- Cliquez sur Outils de développement d'accessibilité dans le panneau de droite.
- Activez le curseur à côté de Afficher les paramètres avancés d'accessibilité dans l'éditeur.
- Cliquez avec le bouton droit de votre souris sur le conteneur avec des éléments connectés qui affichent le contenu de la collection du CMS.
- Sélectionnez Accessibilité.
- Cliquez sur Ajouter un attribut.
- Cliquez sur le menu déroulant Attributs et sélectionnez aria-live.
- Cliquez sur le menu déroulant Valeur de l'attribut et sélectionnez Poli.
- Cliquez sur Ajouter.
- Publiez votre site lorsque vous êtes prêt à mettre en ligne les modifications.
Joindre le texte « nombre d'éléments » à 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.
Éditeur Wix
Éditeur Studio
- Accédez à votre éditeur.
- Ajoutez un conteneur.
- Cliquez et faites glisser l'élément de texte qui affiche le nombre d'éléments de l'ensemble de données sur le conteneur pour le connecter. Si vous avez un autre élément de texte qui explique ce que représente le nombre d'éléments, ajoutez-le également au conteneur (ex. « résultats »).
- Activez le codage si vous ne l'avez pas déjà fait :
- Cliquez sur Mode développeur en haut.
- Cliquez sur Activer le mode développeur.
- Activez les outils de développement d'accessibilité :
- Cliquez sur Paramètres en haut de votre éditeur.
- Sélectionnez Assistant d'accessibilité.
- Cliquez sur Outils de développement d'accessibilité dans le panneau de droite.
- Activez le curseur à côté de Afficher les paramètres avancés d'accessibilité dans l'éditeur.
- Cliquez avec le bouton droit de votre souris sur le conteneur en y joignant le ou les éléments.
- Sélectionnez Accessibilité.
- Ajoutez le premier attribut :
- Cliquez sur Ajouter un attribut.
- Cliquez sur le menu déroulant Attributs et sélectionnez aria-atomique.
- Cliquez sur le menu déroulant Valeur de l'attribut et sélectionnez true.
- Cliquez sur Ajouter.
- Ajoutez le deuxième attribut :
- Cliquez sur Ajouter un attribut.
- Cliquez sur le menu déroulant Attributs et sélectionnez aria-live.
- Cliquez sur le menu déroulant Valeur de l'attribut et sélectionnez Poli.
- Cliquez sur Ajouter.
- Publiez votre site lorsque vous êtes prêt à mettre en ligne les modifications.
Rendre les éléments de saisie accessibles
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.
Lorsque vous affichez le nombre d'éléments dans l'ensemble de données :
Si les visiteurs peuvent cliquer sur des saisies qui modifient le nombre d'éléments, assurez-vous de joindre le texte qui affiche le nombre d'éléments à un conteneur. Consultez la section au-dessus de celle-ci pour plus d'informations.
Rendre les barres de pagination accessibles
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 »).
Suggestion :
Dans l'éditeur Studio, si vous disposez d'un bouton « En voir plus », assurez-vous de placer votre barre de pagination et tout ce qui s'affiche sous le répéteur ou la galerie dans une section distincte.
FAQ
Cliquez ci-dessous pour obtenir les réponses aux questions d'accessibilité courantes.
Comment dois-je intituler mon champ de texte alternatif dans le CMS ?
Que se passe-t-il si l'image de mon répéteur utilise un mélange d'images décoratifs et non décoratifs ?
Puis-je ajouter une infobulle à une image qui apparaît lorsque les visiteurs survolent l'image ?
Les messages de réussite ou d'échec de mon formulaire CMS sont-ils accessibles ?