--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/avance/accessibilite' title: 'Rendre vos pages accessibles | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:57:43+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '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.' tags: - 'Make pages accessible and findable' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Rendre vos pages accessibles' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:57:43+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/avance/accessibilite' articleSection: 'Pages accessibles et visibles' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/avance/accessibilite' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Gérer le site](/fr/hc/documentation/learn-dxpr-builder/manage) /[Pages accessibles et visibles](/fr/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Rendre vos pages accessibles. Apprendre DXPR BuilderGérer le sitePages accessibles et visibles ## Dans ce guide Guides associés - [Raccourcis clavier](/fr/hc/documentation/apprendre-dxpr-builder/reference/raccourcis-clavier) - [Pare-feu et résidence des données](/fr/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 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](/fr/hc/documentation/apprendre-dxpr-builder/reference/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. 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](/fr/hc/documentation/apprendre-dxpr-builder/ia/texte-alternatif). ## 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](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan) montre les étapes. ## Utiliser des liens et boutons explicites 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 ? - [Raccourcis clavier](/fr/hc/documentation/apprendre-dxpr-builder/reference/raccourcis-clavier) pour la liste complète des raccourcis de l’éditeur. - [Pare-feu et résidence des données](/fr/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) pour les autres sujets de conformité.