L’accessibilité est un enjeu crucial dans la conception de sites web. Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) permet de s’assurer que les contenus sont accessibles à tous, y compris aux personnes en situation de handicap.
Cet article propose des préconisations concrètes pour configurer correctement les blocs Gutenberg et fonctionnalité que nous proposons avec les Collections.
Vous souhaitez un site conforme RGAA
Avant de rentrer dans le concret, quelques infos lorsque vous souhaitez disposer d’un site conforme au RGAA, vous devez prévoir :
S’il s’agit d’un nouveau site internet :
- Intégrer la notion d’accessibilité dès la conception des maquettes graphiques
- Rédiger du contenu adapté tout au long de la création du site
- Appliquer les bonnes pratiques lors de l’intégration des visuels pour la gestion des alt
S’il s’agit d’un site existant : la mise en conformité d’un site existant qui ne s’est pas inscrit dans cette démarche dès la phase de conception semble assez difficile. Concrètement, cela implique :
- Une refonte graphique & technique des éléments projets (menu, header, footer, page d’accueil)
- Une repasse sur l’ensemble des contenus de votre part pour que ceux-ci soient rédigés conformément aux critères du RGAA
- Une repasse de la configuration sur l’ensemble des images afin de vérifier / adapter la saisie des attributs alt
La mise en place de cette démarche est donc également assez conséquente pour vous (environ 40% des critères de conformité ne concernent que de la saisie « client« ).
Saisie de contenus : les bonnes pratiques
Les blocs
Les tableaux
- Définir une légende au tableau
- Activer et saisir la « Section d’en-tête »
- Optionnel : utiliser la “Section de pied de page” pour résumer ou conclure les données du tableau
Image
- Saisir un texte alternatif si l’image n’est pas uniquement décorative
- Qu’est-ce qu’une image décorative ?
- Point 1.2 du référentiel – Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
Galerie d’images
- Saisir un texte alternatif pour chaque image de la galerie, sauf si les images sont strictement décoratives
- Définir une légende à la galerie
Fichier audio
- Ajouter un titre clair ou une légende décrivant le contenu de l’audio
- Fournir une transcription textuelle complète du contenu audio (obligatoire dans le cadre du RGAA)
- Éviter la lecture automatique
Bannière
- Ne pas utiliser une image de bannière seule pour transmettre de l’information : le texte superposé doit être lisible, accessible et suffisant à lui seul
- Vérifier les contrastes entre le texte et l’image de fond
- Saisir un texte alternatif si l’image n’est pas uniquement décorative
Média et texte
- Saisir un texte alternatif si l’image n’est pas uniquement décorative
- Respecter l’ordre logique de lecture (image puis texte ou inversement, mais cohérent dans le contexte)
Vidéo
- Toujours fournir une alternative textuelle au contenu vidéo :
- Une transcription textuelle complète
- Sous-titres synchronisés
- Éviter la lecture automatique
- Donner un titre ou une légende qui décrit le sujet ou le rôle de la vidéo
Strate visuelle pleine largeur
- Éviter les images porteuses d’information
Colonnes
- Ordre logique : S’assurer que l’ordre des colonnes suit une lecture logique pour les lecteurs d’écran.
- Titres/entêtes : Chaque colonne contenant un bloc distinct devrait idéalement commencer par un titre sémantique (<h2>, <h3>, etc.).
Liste pages enfants
- Les apparences Vignette et Liste sont accessibles
- Si vous souhaitez utiliser l’apparence Carrousel, il est obligatoire d’avoir des flèches de navigation en desktop (en haut à droite de préférence) et en mobile.
Liste pages enfants et petits enfants
- Il est obligatoire d’avoir des flèches de navigation en desktop (en haut à droite de préférence) et en mobile.
FAQ accordéon
Le niveau de titre cohérent avec la structure de la page.
Ancres
- L’ordre des ancres doit respecter l’ordre des sections dans la page
Contenus associatifs
- Les apparences Grille et Liens larges sont accessibles
- Si vous souhaitez utiliser l’apparence Carrousel, il est obligatoire d’avoir des flèches de navigation en desktop (en haut à droite de préférence) et en mobile.
Carrousel SIT
- Si vous souhaitez utiliser l’apparence Slider, il est obligatoire d’avoir des flèches de navigation en desktop (en haut à droite de préférence) et en mobile.
Une part importante des critères du RGAA (un peu moins de 40%) concerne votre saisie de contenu. Voici un résumé de quelques bonnes pratiques complémentaires à prendre en compte (liste non exhaustive). Il est important de noter que si vous souhaitez disposer d’un site 100% accessible, vous devrez avoir suivi une formation adaptée auprès d’un organisme certifié.
- Hiérarchie claire : Utilisez les balises HTML correctement (h1 à h6) pour structurer l’information.
- Alternative aux médias : Ajoutez des textes alternatifs (attributs alt) aux images et proposez des transcriptions pour les vidéos/audio. Si une image est purement décorative, elle ne doit pas contenir de texte alternatif, mais doit avoir un attribut alt vide (alt= » ») pour ne pas être lue par les lecteurs d’écran.
- Formulaires accessibles : Ajoutez des labels et des indications claires pour chaque champ.
- Formulaires – Validation des erreurs : Proposez des messages d’erreur explicites et compréhensibles.
QUE faire en attendant votre conformité Rgaa
Vous possédez un site collection :
Il vous est possible de créer en BO une page dédiée puis de créer un lien dans le footer en passant par l’entrée « Options supplémentaires » puis par « Liens de la barre de copyright » pour gérer votre lien « Accessibilité – site non conforme ».
Vous possédez un site non-collection :
Rapprochez-vous de votre chargée de projet pour qu’il puisse réaliser la manipulation pour vous. Cela sera déduit d’un forfait de maintenance.
Commentaires
Soyez le premier à poster un commentaire !
