https://www.alsacreations.fr/_nuxt/rnuScoMi.js

1import{_ as p}from"./BYBhZ3hj.js";import{c as m,d as t,a as i,b as s,w as l,g as r,F as c,h as b,k as v,o as g,_ as f}from"./B_VJXJcG.js";import{_ as x}from"./DbUMFFzn.js";import{_ as q}from"./Bn9sH_VS.js";import{_ as P}from"./C6kesyN4.js";import{_ as y}from"./CR4K-dPI.js";const A={class:"article","data-layout":"boxed prose"},W={"data-layout":"duo","data-gap":"m",class:"mt-40"},C={class:"box box-cta rounded"},k={"data-layout":"duo","data-gap":"m",class:"mt-40"},F={class:"title-small"},M={class:"title-small"},B={__name:"wordpress-accessibilite",setup(S){return(j,e)=>{const a=p,n=f,o=b,u=v,d=x;return g(),m(c,null,[t(a,{items:[{label:"Guide"},{url:"/definition/wordpress-accessibilite",label:"Rendre un site WordPress accessible"}]}),i("article",A,[e[35]||(e[35]=i("h1",{class:"title-big"},"Rendre un site WordPress accessible",-1)),e[36]||(e[36]=i("p",null,[s(" Rendre un site WordPress accessible consiste à "),i("b",null,"optimiser votre site web construit avec le CMS WordPress pour qu'il soit utilisable par tous"),s(", y compris les personnes en situation de handicap. ")],-1)),i("p",null,[t(n,{name:"solar:info-circle-line-duotone"}),e[0]||(e[0]=s(" WordPress, par défaut, intègre certaines bonnes pratiques d'accessibilité : il est nécessaire de préserver ces bonnes pratiques lors de la construction du thème de votre projet et de bien choisir les extensions qui viendront compléter les fonctionnalités natives de ce ",-1)),e[1]||(e[1]=i("abbr",{title:"Content Management System",lang:"en"},"CMS",-1)),e[2]||(e[2]=s(". ",-1))]),i("ul",null,[e[8]||(e[8]=i("li",null," Avec plus de 40% des sites web mondiaux, améliorer l'accessibilité WordPress est un objectif majeur de la communauté open source. ",-1)),i("li",null,[e[5]||(e[5]=s(" Respecter le ",-1)),t(o,{to:"/definition/rgaa"},{default:l(()=>[...e[3]||(e[3]=[s("RGAA",-1)])]),_:1}),e[6]||(e[6]=s(" et les ",-1)),t(o,{to:"/definition/accessibilite-numerique"},{default:l(()=>[...e[4]||(e[4]=[s("obligations d'accessibilité numérique",-1)])]),_:1}),e[7]||(e[7]=s(" est une nécessité pour les sites publics et les entreprises privées (loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées). ",-1))]),e[9]||(e[9]=i("li",null," Toucher les 15% de la population mondiale en situation de handicap élargit votre audience. ",-1))]),e[37]||(e[37]=i("h2",{class:"title-medium"},"Site existant ? Audit et état des lieux",-1)),i("div",W,[e[15]||(e[15]=i("div",{class:"box rounded theme-dark"},[i("p",null," Avant d'entreprendre des améliorations, il est essentiel de réaliser un audit complet de l'existant pour identifier les problèmes d'accessibilité et prioriser les actions. "),i("p",null," Cela inclut des tests automatisés et manuels, pour évaluer la conformité et proposer des pistes concrètes, identifier les potentielles extensions problématiques, et vérifier la structure du thème. ")],-1)),i("div",C,[e[14]||(e[14]=i("h3",{class:"title-small"}," Besoin d'un audit d'accessibilité WordPress ? ",-1)),i("p",null,[e[11]||(e[11]=s(" Notre équipe d'experts réalise des audits RGAA complets avec méthodologie officielle, ",-1)),t(o,{to:"/definition/echantillon-audit-accessibilite"},{default:l(()=>[...e[10]||(e[10]=[s("échantillonnage",-1)])]),_:1}),e[12]||(e[12]=s(" représentatif et recommandations priorisées. ",-1))]),i("p",null,[t(u,{href:"/prestations/audit-accessibilite"},{default:l(()=>[...e[13]||(e[13]=[s("Demandez un audit d'accessibilité numérique ",-1)])]),_:1})])])]),e[38]||(e[38]=r('<h2 class="title-medium"> Actions prioritaires sur WordPress <img src="'+q+'" alt="" width="50" height="50" loading="lazy" class="inline-block"></h2><p> Les améliorations d&#39;accessibilité s&#39;articulent autour de plusieurs axes techniques et éditoriaux. </p><h3 class="title-small">Thème et structure</h3><ul><li><b>Réaliser un thème accessible</b> : <ul><li>Privilégier une structure simple et logique, sémantique</li><li>Ne pas surcharger d&#39;extensions ou de constructeurs de pages</li><li>S&#39;assurer de la navigation au clavier</li><li> Contrôler les contrastes, la lisibilité, l&#39;accessibilité des médias </li></ul></li><li><b>Optimiser la structure</b> : <ul><li> Liens d&#39;évitement (<i lang="en">skip links</i>) vers le contenu principal </li><li>Zones de navigation clairement identifiées</li><li>Hiérarchie des titres cohérente</li><li>Utilisation correcte des éléments sémantiques HTML5</li><li>Utilisation appropriée des liens et des boutons</li><li>Éviter les contenus clignotants ou en mouvement</li></ul></li></ul><h3 class="title-small">Contenu et médias</h3><ul><li><b>Images accessibles</b> : <ul><li> Ajouter des alternatives textuelles pertinentes (attribut <code>alt</code> et en revanche laisser vide cet attribut pour les images décoratives) </li><li>Utiliser des légendes descriptives pour les images complexes</li></ul></li><li><b>Vidéos et audio</b> : <ul><li> Ajouter des sous-titres aux vidéos (manuellement ou automatiquement) </li><li>Fournir des transcriptions textuelles</li><li>Éviter la lecture automatique avec son</li><li>Proposer des contrôles de lecture accessibles</li></ul></li><li><b>Documents téléchargeables</b> : <ul><li>Indiquer le format et la taille des fichiers</li><li>S&#39;assurer que les PDF sont accessibles</li><li>Proposer des versions alternatives si nécessaire</li></ul></li></ul><h3 class="title-small">Navigation et interaction</h3>',7)),i("ul",null,[i("li",null,[e[23]||(e[23]=i("b",null,"Menus et liens",-1)),e[24]||(e[24]=s(" : ",-1)),i("ul",null,[e[18]||(e[18]=i("li",null," Préciser la langue des pages et les changements de langue dans le contenu ",-1)),e[19]||(e[19]=i("li",null,"Libellés de liens explicites et uniques",-1)),e[20]||(e[20]=i("li",null,"Indication visuelle du focus au clavier",-1)),e[21]||(e[21]=i("li",null,"Fil d'Ariane pour faciliter l'orientation",-1)),e[22]||(e[22]=i("li",null,"Plan du site accessible",-1)),i("li",null,[e[17]||(e[17]=s(" Définir correctement les rôles ",-1)),t(o,{to:"/definition/aria"},{default:l(()=>[...e[16]||(e[16]=[s("ARIA",-1)])]),_:1})])])]),e[25]||(e[25]=i("li",null,[i("b",null,"Formulaires"),s(" : "),i("ul",null,[i("li",null,"Étiquettes claires associées aux champs"),i("li",null,"Messages d'erreur explicites et bien positionné

1s"),i("li",null,"Regroupement logique des champs et tabulation clavier"),i("li",null,"Instructions d'aide accessibles")])],-1))]),e[39]||(e[39]=r('<h2 class="title-medium"> Quelles sont les extensions recommandées ? </h2><p> Certaines extensions peuvent contribuer à améliorer l&#39;accessibilité ou à vous aider dans cette démarche, mais elles n&#39;appportent pas de solution de <i>remplacement magique</i>, car l&#39;accessibilité doit être intégrée dès la conception. Elle est spécifique à votre projet, et ne peut être automatisée par des algorithmes qui ne connaissent pas votre contenu et votre contexte. </p><p> En revanche, il est important de <b>choisir des extensions qui ne vont pas à l&#39;encontre des bonnes pratiques d&#39;accessibilité</b> pour éviter d&#39;introduire de nouveaux obstacles. Ainsi, nous ne recommandons pas d&#39;extensions de construction de pages (de type Elementor, Divi, WPBakery...) car elles génèrent souvent un code source lourd et peu sémantique, difficile à rendre accessible. Une fois que vos pages et blocs ont été conçues avec ces extensions propriétaires, il est souvent très compliqué de revenir en arrière. </p><p> Pour construire des formulaires de contact, <a href="https://fr.wordpress.org/plugins/contact-form-7/">Contact Form 7</a> est un bon choix, et dispose d&#39;un <i lang="en">fork</i> que nous recommandons <a href="https://github.com/juliemoynat/contact-form-7/tree/a11y-fixes">amélioré par Julie Moynat</a></p><div class="section"><div data-layout="boxed"><div data-layout="duo" data-gap="m"><img class="rounded" src="'+P+'" alt=""><div><h2 class="title-medium">Rédaction accessible</h2><p> Adopter une approche de rédaction accessible permet de garantir que le contenu est compréhensible et utilisable par tous. L&#39;éditeur de contenu natif de WordPress (Gutenberg) offre des blocs structurés qui facilitent la création de contenu accessible. </p><ul><li> Utiliser la hiérarchie de titres appropriée dans l&#39;éditeur de contenus. </li><li> Créer des paragraphes courts et aérés, expliciter les abréviations et acronymes. </li><li>Utiliser les listes ordonnées et non ordonnées.</li><li>Mettre en évidence les informations importantes.</li><li>Apporter une alternative textuelle pour les images.</li></ul></div></div></div></div><div class="section"><div data-layout="boxed"><div data-layout="duo" data-gap="m"><div><h2 class="title-medium">Formation des équipes</h2><p> Sensibiliser et former les équipes éditoriales aux bonnes pratiques d&#39;accessibilité est crucial pour maintenir un site accessible à long terme. </p><p> Nous pouvons vous proposer des <a href="https://formations.alsacreations.fr" target="_blank">formations adaptées</a> à votre budget et temps de disponibilité. </p><ul><li><b>Sensibilisation</b> : Former les éditeurs aux enjeux de l&#39;accessibilité </li><li><b>Procédures</b> : Établir des <i lang="en">check-lists</i> de publication accessible </li><li><b>Outils</b> : Utiliser les fonctionnalités d&#39;accessibilité de l&#39;éditeur WordPress </li><li><b>Tests</b> : Intégrer des tests d&#39;accessibilité dans le processus de publication </li></ul></div><img class="rounded" src="'+y+'" alt=""></div></div></div><h2 class="title-medium">Maintenance et amélioration continue</h2><p> L&#39;accessibilité d&#39;un site WordPress est processus d&#39;amélioration continue qui nécessite une attention régulière. </p>',8)),i("div",k,[i("div",null,[i("h3",F,[e[26]||(e[26]=s(" Suivi régulier ",-1)),t(n,{name:"solar:refresh-line-duotone"})]),e[27]||(e[27]=i("ul",null,[i("li",null,[i("b",null,"Audits périodiques"),s(" : Planifier des vérifications régulières évite les régressions chronophages. ")]),i("li",null,[i("b",null,"Tests utilisateurs"),s(" : Solliciter des retours d'utilisateurs en situation de handicap. ")]),i("li",null,[i("b",null,"Mises à jour"),s(" : Maintenir WordPress, thèmes et extensions à jour pour bénéficier des améliorations d'accessibilité. ")])],-1))]),i("div",null,[i("h3",M,[e[28]||(e[28]=s(" Documentation et déclaration ",-1)),t(n,{name:"solar:document-text-line-duotone"})]),i("ul",null,[i("li",null,[e[30]||(e[30]=i("b",null,"Déclaration d'accessibilité",-1)),e[31]||(e[31]=s(" : Créer et maintenir une ",-1)),t(o,{to:"/definition/accessibilite-numerique"},{default:l(()=>[...e[29]||(e[29]=[s("déclaration d'accessibilité",-1)])]),_:1}),e[32]||(e[32]=s(" conforme. ",-1))]),e[33]||(e[33]=i("li",null,[i("b",null,"Documentation interne"),s(" : Documenter les procédures à respecter et les bonnes pratiques pour les équipes. ")],-1)),e[34]||(e[34]=i("li",null,[i("b",null,"Contact"),s(" : Proposer un moyen de signaler les problèmes d'accessibilité. ")],-1))])])])]),t(d,{variant:"blue",title:"WordPress accessible, c'est possible !"},{"args-item-1":l(()=>[t(n,{name:"solar:settings-line-duotone"}),e[40]||(e[40]=s(" Configuration ",-1))]),"args-item-2":l(()=>[t(n,{name:"solar:presentation-graph-line-duotone"}),e[41]||(e[41]=s(" Formation ",-1))]),"args-item-3":l(()=>[t(n,{name:"solar:graph-up-line-duotone"}),e[42]||(e[42]=s(" Amélioration continue ",-1))]),"list-item-1":l(()=>[...e[43]||(e[43]=[i("h3",{class:"title-small"},"Thème propre",-1),i("p",null," WordPress dispose d'une structure bien conçue pour élaborer des thèmes accessibles et participe à l'effort en améliorant continuellement ses fonctionnalités d'accessibilité, y compris pour l'interface d'édition des contenus. ",-1)])]),"list-item-2":l(()=>[...e[44]||(e[44]=[i("h3",{class:"title-small"},"Équipes sensibilisées",-1),i("p",null," Former vos équipes éditoriales aux bonne

1s pratiques d'accessibilité est un investissement durable. Une fois sensibilisées, elles produiront naturellement du contenu plus accessible. ",-1)])]),"list-item-3":l(()=>[...e[45]||(e[45]=[i("h3",{class:"title-small"},"Impact public",-1),i("p",null," Un site WordPress accessible améliore l'expérience utilisateur pour tous et vous met en conformité avec les obligations légales. C'est un cercle vertueux qui bénéficie à votre audience et à votre image de marque. ",-1)])]),_:1})],64)}}};export{B as default};