Rendre vos pages accessibles.

Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken

Vous donnez à chaque image une description, vous ordonnez les titres et vous gardez le texte lisible sur la couleur, pour que les utilisateurs de lecteur d’écran et de clavier puissent utiliser vos pages. Cette page liste ce que DXPR Builder fait pour vous, ce que vous ajoutez vous-même, et comment vérifier le résultat avant de publier.

Ce que le builder fait pour vous

  • Une vraie structure de texte. L’élément Text utilise CKEditor 5 avec de vrais titres (Heading 1 à Heading 6), des paragraphes et des listes.
  • ARIA sur les éléments interactifs. Les onglets portent role="tablist" et role="tab". Les barres de progression et les compteurs circulaires portent role="progressbar" avec leurs valeurs minimale, maximale et actuelle. Les titres de panneaux repliables sont des boutons qui indiquent si leur panneau est ouvert.
  • Des dialogues d’éditeur accessibles. Chaque dialogue de réglages est un role="dialog" avec aria-modal et un titre.
  • Un accès clavier dans l’éditeur. Enter ouvre les réglages d’un élément, Escape ferme un panneau ou désélectionne l’élément, et Ctrl (Cmd sur Mac) avec une flèche déplace les éléments. Voir la référence des raccourcis clavier.

Les éléments de mise en page (sections, lignes et colonnes) sont de simples éléments div. La structure qu’annonce un lecteur d’écran vient de vos titres.

Ajouter un texte alternatif à une image

  1. Pointez l’image et cliquez sur More > Settings.
  2. Ouvrez le panneau SEO.
  3. Saisissez une description dans Alt attribute : ce que l’image montre et pourquoi elle est sur la page, en une ou deux phrases, sans « image de ».
  4. Cliquez sur Save dans le dialogue, puis sur Save sur la barre du conteneur.

Le panneau SEO d’un élément Image avec l’attribut Alt Orange painting of a face in profile, à côté de cette peinture et de sa légende d’exposition Spring

Quand Alt attribute est vide, l’élément Image n’écrit aucun alt, et les lecteurs d’écran peuvent lire le nom du fichier. Pour une image purement décorative, utilisez plutôt une Background image de section dans le panneau Style ; les lecteurs d’écran ignorent les arrière-plans. Le carrousel d’images utilise un seul Alt attribute pour toutes ses images, donc décrivez l’ensemble.

Les images générées par IA démarrent avec votre prompt comme texte alternatif. Modifiez-le pour qu’il décrive le résultat plutôt que la demande. Voir texte alternatif des images.

Ordonner les titres

  1. Donnez à la page un seul Heading 1. La plupart des thèmes affichent le titre de la page comme Heading 1, donc n’en ajoutez pas un second dans le builder. Sur DXPR CMS, vous pouvez plutôt masquer ce titre sur une page : sur son formulaire de modification, ouvrez DXPR Theme Settings et cochez Page Title sous DXPR Hide Regions.
  2. Dans la barre d’outils de l’élément Text, utilisez la liste des titres pour marquer les titres de section comme Heading 2 et les sous-sections comme Heading 3. Ne sautez aucun niveau.
  3. Utilisez les boutons de liste de la barre d’outils pour les listes plutôt que des tirets tapés.

Trois éléments fixent leur niveau de titre. Le Title du Jumbotron est toujours un Heading 1, le Title de la carte est toujours un Heading 5, et chaque Toggle title d’un panneau repliable est un Heading 2.

Vérifier le contraste des couleurs

Les sélecteurs de couleur proposent la palette de votre thème mais ne mesurent pas le contraste, donc vérifiez-le vous-même :

Texte Ratio minimal (WCAG AA)
Texte courant 4.5:1
Grand texte (24 px, ou environ 19 px en gras) 3:1

Pour du texte sur une photo, assombrissez la photo pour que le ratio tienne sur toute l’image. Dans le panneau Background effects de la section, réglez Background effect sur Gradient avec des Start color et End color sombres et semi-transparentes. Arrière-plans montre les étapes.

Le panneau Background effects d’une section avec Gradient sélectionné, des pastilles sombres et semi-transparentes sous Start color et End color et la direction 180, à côté d’une photo de bureau assombrie sous un titre blanc

Les éléments Button et Link affichent le texte que vous saisissez comme texte de lien. Écrivez ce que fait le lien (« Register for Open Day »), pas « cliquez ici ». L’élément Link a aussi un Title attribute dans son panneau SEO pour une description plus longue.

Ce que vous voyez

  1. Réglez View mode sur la barre du conteneur à Preview, pour qu’aucun contrôle d’éditeur ne gêne.
  2. Appuyez sur Tab pour parcourir la page. Chaque bouton, lien et onglet est atteignable et montre un anneau de focus visible.
  3. Un vérificateur automatique, comme l’audit d’accessibilité du navigateur ou l’extension axe, ne signale aucune erreur pour le contenu du builder sur la page publiée.

Si vous n’obtenez pas un rapport sans erreur

  • Le vérificateur signale une image sans texte alternatif. L’Alt attribute de l’élément Image est vide. Remplissez-le, ou déplacez une image décorative vers un arrière-plan de section.
  • Le vérificateur signale deux Heading 1. Un Title de Jumbotron est toujours un Heading 1, à côté du titre de page de votre thème. Utilisez plutôt un élément Text avec un Heading 2.
  • Le vérificateur signale un niveau de titre sauté. Un Title de carte est toujours un Heading 5. Laissez-le vide et commencez la carte avec un titre d’élément Text au bon niveau.
  • Le vérificateur signale un faible contraste sur du texte sur photo. Ajoutez le dégradé décrit plus haut, ou choisissez un fond de texte plus sombre.

Et ensuite ?