2:I[9275,[],""] 4:I[1343,[],""] 5:I[6234,["676","static/chunks/870fdd6f-55b462152a75a87f.js","168","static/chunks/168-7359a5970e990dd0.js","231","static/chunks/231-87925b9c7247c60f.js","185","static/chunks/app/layout-78646f3be151d6b1.js"],"default"] 6:I[638,["676","static/chunks/870fdd6f-55b462152a75a87f.js","168","static/chunks/168-7359a5970e990dd0.js","231","static/chunks/231-87925b9c7247c60f.js","185","static/chunks/app/layout-78646f3be151d6b1.js"],"default"] 7:I[231,["231","static/chunks/231-87925b9c7247c60f.js","404","static/chunks/app/blog/page-8f32ba8ea0c5473f.js"],""] 3:["slug","Accessibilite-web","d"] 0:["MyMc1OMdWoHtNbjuqTgCw",[[["",{"children":["blog",{"children":[["slug","Accessibilite-web","d"],{"children":["__PAGE__?{\"slug\":\"Accessibilite-web\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":[["slug","Accessibilite-web","d"],{"children":["__PAGE__",{},[["$L1",["$","main",null,{"children":["$","article",null,{"children":[["$","h1",null,{"className":"page_h1__TEgpm","children":"Accessibilité web"}],["$","img",null,{"className":"page_cover__MJlpA","src":"/blog/accessibilityWeb/cover.png","alt":"Accessibilité web"}],["$","p",null,{"className":"page_date__s1If_","children":["Publié le ","17/06/2025"]}],["$","div",null,{"children":[["$","p","0",{"className":"page_p__xHwOL","children":"L'accessibilité web permet à tous les utilisateurs, y compris ceux en situation de handicap, de naviguer sur le web sans problème. Pourtant, de nombreux sites restent aujourd’hui difficilement utilisables pour ces utilisateurs."}],["$","p","1",{"className":"page_p__xHwOL","children":"L’accessibilité ne devrait pas être une option, mais une priorité dès la conception. Au-delà des obligations légales, elle contribue à une meilleure expérience pour tous les internautes, quels que soient leurs besoins ou leurs contraintes."}],["$","p","2",{"className":"page_p__xHwOL","children":"Dans cet article, nous verrons les différents types de handicap, les normes à connaître et les bonnes pratiques à adopter pour créer un site réellement accessible."}]]}],["$","nav",null,{"className":"page_sommaire__3dRIq","children":[["$","h2",null,{"className":"page_h2__eJPAA","children":"Sommaire"}],["$","ol",null,{"children":[["$","li","0",{"children":["$","a",null,{"href":"#les-diffrents-types-de-handicap","children":"Les différents types de handicap"}]}],["$","li","1",{"children":["$","a",null,{"href":"#les-normes-wcag--le-socle-de-laccessibilit-web","children":"Les normes WCAG : le socle de l’accessibilité web"}]}],["$","li","2",{"children":["$","a",null,{"href":"#comprendre-aria-accessible-rich-internet-applications","children":"Comprendre ARIA (Accessible Rich Internet Applications)"}]}],["$","li","3",{"children":["$","a",null,{"href":"#les-bonnes-pratiques-pour-un-site-accessible","children":"Les bonnes pratiques pour un site accessible"}]}],["$","li","4",{"children":["$","a",null,{"href":"#conclusion","children":"Conclusion"}]}]]}]]}],["$","div",null,{"children":[["$","h2","0",{"className":"page_h2__eJPAA","id":"les-diffrents-types-de-handicap","children":"Les différents types de handicap"}],["$","p","1",{"className":"page_p__xHwOL","children":"L’accessibilité web vise à prendre en compte les besoins de tous les utilisateurs, et notamment ceux en situation de handicap."}],["$","p","2",{"className":"page_p__xHwOL","children":"Il existe plusieurs types de handicap, chacun pouvant impacter la manière d’interagir avec un site internet :"}],["$","ul","3",{"className":"page_ul__hA42p","children":[["$","li","3",{"children":"Handicaps visuels : cécité, basse vision, daltonisme. Les personnes concernées utilisent souvent des lecteurs d’écran ou ont besoin d’un contraste élevé et d’un texte lisible"}],["$","li","3",{"children":"Handicaps auditifs : surdité ou malentendance. L’absence de sous-titres ou de transcription rend le contenu audio ou vidéo difficilement accessible"}],["$","li","3",{"children":"Handicaps moteurs : difficultés à utiliser une souris ou un clavier classique. La navigation doit pouvoir se faire uniquement au clavier ou via des dispositifs d’assistance"}],["$","li","3",{"children":"Handicap psychique : troubles anxieux, troubles de l’humeur, schizophrénie… Ces situations peuvent rendre difficile l’utilisation d’interfaces trop complexes ou peu prévisibles"}],["$","li","3",{"children":"Maladies invalidantes : certaines maladies chroniques (comme la sclérose en plaques ou la maladie de Parkinson) peuvent entraîner de la fatigue, des douleurs ou des difficultés cognitives ponctuelles. Une interface claire et flexible est donc essentielle"}],["$","li","3",{"children":"Déficience intellectuelle : elle peut affecter la compréhension, la mémoire ou la concentration. Un langage simple, une navigation intuitive et des contenus bien structurés sont ici indispensables"}],["$","li","3",{"children":"Handicaps temporaires : fatigue visuelle, bras cassé, environnement bruyant... L’accessibilité bénéficie aussi à ces situations passagères"}]]}],["$","figure","4",{"className":"page_figure__j7ScX","children":[["$","img",null,{"className":"page_image__QAchn","src":"/blog/accessibilityWeb/handicap.png","alt":"Les différents types de handicap"}],["$","figcaption",null,{"className":"page_legend__2Sazr","children":"Les différents types de handicap"}]]}],["$","h2","5",{"className":"page_h2__eJPAA","id":"les-normes-wcag--le-socle-de-laccessibilit-web","children":"Les normes WCAG : le socle de l’accessibilité web"}],["$","p","6",{"className":"page_p__xHwOL","children":"Les WCAG (Web Content Accessibility Guidelines) définit les règles à suivre pour rendre les sites web accessibles à tous, en prenant en compte les aspects physiques, psychologiques et techniques des utilisateurs."}],["$","p","7",{"className":"page_p__xHwOL","children":"Les règles sont organisées en 4 principes :"}],["$","ul","8",{"className":"page_ul__hA42p","children":[["$","li","8",{"children":"Perceptible : le contenu doit être visible ou audible par tous"}],["$","li","8",{"children":"Utilisable : les interactions doivent être simples à réaliser"}],["$","li","8",{"children":"Compréhensible : le contenu doit être clair et prévisible"}],["$","li","8",{"children":"Robuste : le site doit fonctionner avec les technologies d’assistance"}]]}],["$","p","9",{"className":"page_p__xHwOL","children":"Les WCAG sont déclinées en niveaux (A, AA, AAA), le niveau AA étant le plus souvent exigé (par exemple pour les sites publics en France)."}],["$","h2","10",{"className":"page_h2__eJPAA","id":"comprendre-aria-accessible-rich-internet-applications","children":"Comprendre ARIA (Accessible Rich Internet Applications)"}],["$","p","11",{"className":"page_p__xHwOL","children":"Le HTML sémantique est la base de l’accessibilité. Mais dans certains cas, il est nécessaire d’ajouter des attributs ARIA pour améliorer l’accessibilité des pages web et la compréhension du contenu par les technologies d’assistance (lecteurs d’écran, commandes vocales …)."}],["$","p","12",{"className":"page_p__xHwOL","children":"Par exemple :"}],["$","ul","13",{"className":"page_ul__hA42p","children":[["$","li","13",{"children":"aria-label : fournit un nom à un élément interactif qui n’a pas de texte visible"}],["$","li","13",{"children":"aria-hidden='true' : masque un élément aux lecteurs d’écran mais pas visuellement"}],["$","li","13",{"children":"role='dialog' ou role='tablist' : précise le rôle d’un élément dans la structure de la page et s’utilise uniquement quand il n’y a pas de balises HTML correspondantes"}]]}],["$","p","14",{"className":"page_p__xHwOL","children":"⚠️ ARIA ne remplace pas le HTML natif : il doit être utilisé avec modération, uniquement quand les balises HTML natives ne suffisent pas."}],["$","figure","15",{"className":"page_figure__j7ScX","children":[["$","img",null,{"className":"page_image__QAchn","src":"/blog/accessibilityWeb/aria.png","alt":"Code avec aria-label"}],["$","figcaption",null,{"className":"page_legend__2Sazr","children":"Code avec aria-label"}]]}],["$","h2","16",{"className":"page_h2__eJPAA","id":"les-bonnes-pratiques-pour-un-site-accessible","children":"Les bonnes pratiques pour un site accessible"}],["$","h3","17",{"className":"page_h3__b_P5w","id":"contraste-des-couleurs","children":"Contraste des couleurs"}],["$","p","18",{"className":"page_p__xHwOL","children":"Assurez-vous que le texte soit suffisamment lisible par rapport à l’arrière-plan pour les malvoyants."}],["$","p","19",{"className":"page_p__xHwOL","children":"Le contraste minimum recommandé est de 4.5:1 pour un texte standard."}],["$","p","20",{"className":"page_p__xHwOL","children":"Des outils comme Adobe Color ou WebAIM Contrast Checker peuvent vous aider."}],["$","figure","21",{"className":"page_figure__j7ScX","children":[["$","img",null,{"className":"page_image__QAchn","src":"/blog/accessibilityWeb/contrast.png","alt":"Capture d'écran d'Adobe Color"}],["$","figcaption",null,{"className":"page_legend__2Sazr","children":"Capture d'écran d'Adobe Color"}]]}],["$","h3","22",{"className":"page_h3__b_P5w","id":"utiliser-des-balises-html-smantiques","children":"Utiliser des balises HTML sémantiques"}],["$","p","23",{"className":"page_p__xHwOL","children":"Les balises sémantiques donnent une indication sur le contenu et structurent la page web."}],["$","p","24",{"className":"page_p__xHwOL","children":"Il faut utiliser les bonnes balises (
,