CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="fr" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739541174349523255"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739541174349523255"> <title> Composantes essentielles de l’accessibilité du Web | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Composantes essentielles de l’accessibilité du Web" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="fr" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/fundamentals/components/fr" /> <meta property="og:url" content="https://www.w3.org/WAI/fundamentals/components/fr" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Composantes essentielles de l’accessibilité du Web" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Composantes essentielles de l’accessibilité du Web","url":"https://www.w3.org/WAI/fundamentals/components/fr"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-composantes-essentielles-de-l-accessibilité-du-web "> <nav aria-label="Liens d’évitement et sélecteur de langue" id="controls" class="default-grid"> <ul> <li><a href="#main">Aller directement au contenu</a></li> <li class="opt"><a href="/WAI/meta/customize/">Changer la taille ou la couleur du texte</a></li> <li class="opt languagelist"> <strong>Cette page en :</strong> <ul class="languagelistul"><li><a style="text-transform: capitalize;" href="/WAI/fundamentals/components/" lang="en" dir="auto" translate="no">English</a></li><li><strong style="text-transform: capitalize;">français</strong></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/components/ko" lang="ko" dir="auto" translate="no">한국어</a></li> <li><a style="text-transform: capitalize;" href="/WAI/fundamentals/components/pl" lang="pl" dir="auto" translate="no">polski</a></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">Toutes les traductions <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Afficher la personnalisation, les langues et les traductions' data-hidetext='Cacher les options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Afficher la personnalisation, les langues et les traductions</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Stratégies, standards, ressources pour un Web accessible aux personnes en situation de handicap.</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Recherche:</span> <input id="header-search" type="search" name="q" placeholder="Recherche" aria-label="Recherche"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Lancer la recherche" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Navigation principale" lang="fr"><ul><li><a lang="fr" href="/WAI/fundamentals/fr"><span>Fondamentaux de l'accessibilité</span></a></li><li><a lang="fr" href="/WAI/planning/fr"><span>Organisation & politiques</span></a></li><li><a lang="fr" href="/WAI/design-develop/fr"><span>Concevoir & développer</span></a></li><li><a lang="fr" href="/WAI/test-evaluate/fr"><span>Tester et évaluer</span></a></li><li><a lang="fr" href="/WAI/teach-advocate/fr"><span>Former et promouvoir</span></a></li><li><a lang="fr" href="/WAI/standards-guidelines/fr"><span>Standards/<wbr>Règles</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Chemin de fer" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="fr" href="/WAI/fundamentals/fr"><span>Fondamentaux de l'accessibilité</span></a></li><li><a lang="fr" href="/WAI/fundamentals/components/fr" aria-current="page"><span>Composantes de l'accessibilité du Web</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="fr" href="/WAI/fundamentals/fr" class="page-link"><span>Fondamentaux de l'accessibilité</span></a></li><li> <a lang="fr" href="/WAI/fundamentals/accessibility-intro/fr" class="page-link"><span>Introduction à l'accessibilité du web</span></a><ul><li> <a lang="fr" href="/WAI/videos/standards-and-benefits/fr" class="page-link"><span>Vidéo : introduction</span></a></li></ul></li><li> <a lang="en" href="/WAI/people/" class="page-link"><span>Accessibility is About People</span></a><ul><li> <a lang="fr" href="/WAI/perspective-videos/fr" class="page-link"><span>Vidéos d'illustration</span></a><ul><li> <a lang="fr" href="/WAI/perspective-videos/keyboard/fr" class="page-link"><span>Compatibilité avec le clavier</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/contrast/fr" class="page-link"><span>Couleurs bien constratées</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/layout/fr" class="page-link"><span>Mise en page et design clairs</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/speech/fr" class="page-link"><span>Synthèse vocale</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/controls/fr" class="page-link"><span>Liens, boutons et composants assez grands</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/captions/fr" class="page-link"><span>Sous-titres de vidéo</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/customizable/fr" class="page-link"><span>Texte personnalisable</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/voice/fr" class="page-link"><span>Reconnaissance vocale</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/understandable/fr" class="page-link"><span>Contenu compréhensible</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/notifications/fr" class="page-link"><span>Notifications et retours</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/fr" class="page-link"><span>Comment les personnes handicapées utilisent le web</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/" class="page-link"><span>Quelques utilisateurs du Web</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-one/" class="page-link"><span>Ade's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-two/" class="page-link"><span>Ian's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-three/" class="page-link"><span>Lakshmi's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-four/" class="page-link"><span>Lexie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-five/" class="page-link"><span>Sophie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-six/" class="page-link"><span>Dhruv's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-seven/" class="page-link"><span>Marta's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-eight/" class="page-link"><span>Stefan's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-nine/" class="page-link"><span>Elias' Story</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/abilities-barriers/fr" class="page-link"><span>Des capacités et des points bloquants variés</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/auditory/" class="page-link"><span>Auditory</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/cognitive/" class="page-link"><span>Cognitive and Learning</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/physical/" class="page-link"><span>Physical</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/speech/" class="page-link"><span>Speech</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/visual/" class="page-link"><span>Visual</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/tools-techniques/fr" class="page-link"><span>Outils et techniques</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/perception/" class="page-link"><span>Perception</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/presentation/" class="page-link"><span>Presentation</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/input/" class="page-link"><span>Input</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/navigation/" class="page-link"><span>Interaction</span></a></li></ul></li><li> <a lang="en" href="/WAI/older-users/" class="page-link"><span>Older Users and Accessibility</span></a><ul><li> <a lang="en" href="/WAI/older-users/developing/" class="page-link"><span>How WCAG 2 Applies</span></a></li><li> <a lang="en" href="/WAI/older-users/literature/" class="page-link"><span>Literature Review</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-usability-inclusion/" class="page-link"><span>Accessibility, Usability, Inclusion</span></a></li></ul></li><li> <a lang="fr" href="/WAI/fundamentals/components/fr" aria-current="page" class="page-link"><span>Composantes de l'accessibilité du Web</span></a></li><li> <a lang="fr" href="/WAI/fundamentals/accessibility-principles/fr" class="page-link"><span>Principes d’accessibilité</span></a></li><li> <a lang="en" href="/WAI/research/" class="page-link"><span>Research</span></a><ul><li> <a lang="en" href="/WAI/research/user-requirements/" class="page-link"><span>User Requirements</span></a></li><li> <a lang="en" href="/WAI/research/ai2023/" class="page-link"><span>AI and Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/courses/" class="page-link"><span>Digital Accessibility Courses</span></a><ul><li> <a lang="en" href="/WAI/courses/foundations-course/" class="page-link"><span>W3C Foundations Online Course</span></a></li><li> <a lang="en" href="/WAI/courses/list/" class="page-link"><span>Course List</span></a></li></ul></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Langues/Traductions</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><a href="/WAI/fundamentals/components/" lang="en" dir="auto" translate="no">English (original)</a></li><li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">français</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/components/ko" dir="auto" translate="no" lang="ko">한국어</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/fundamentals/components/pl" dir="auto" translate="no" lang="pl">polski</a></li></ul><p><a href="/WAI/translations/#fr">Autres ressources en français</a></p> <p><a href="/WAI/translations/">Toutes les traductions</a></p> <p><a href="/WAI/about/translating/">Traduire les ressources de WAI</a></p> </nav> </div> <main id="main" lang="fr"> <header> <h1> Composantes essentielles de l’accessibilité du Web </h1></header> <section id="translation-info" class="doc-note-box doc-note-translation"> <h2 class="visuallyhidden"><span lang="en">About this translation</span></h2> <p>Cette traduction faite par des volontaires peut ne pas refléter les intentions de <a href="/WAI/fundamentals/components/">l’original en anglais</a>.</p> <p><strong>Traduction :</strong> @code-elegant. Contribution : Rémi Bétin. <br />L’Initiative pour l’Accessibilité du Web (WAI) remercie les traducteurs, et accueille volontiers d’autres <a href="/WAI/about/translating/">traductions</a>.</p></section><aside class="box box-full"><header class="box-h box-h-full"> <h2> Résumé </h2></header><div class="box-i"> <p>Cette page montre comment l’accessibilité dépend de l’articulation harmonieuse de nombreuses composantes, et comment des améliorations de certaines pourraient améliorer sensiblement l’accessibilité du Web.</p> <p>Elle fournit les bases pour comprendre les différents standards d’accessibilité produits par l’Initiative pour l’accessibilité du Web (<abbr lang="en" title="Web Accessibility Initiative">WAI</abbr>) du <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>.</p> </div></aside> <nav class="box box-simple box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple box-h-simple"> Contenu de la page</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#relate" id="markdown-toc-relate">Comment les composantes s’articulent</a></li> <li><a href="#depend" id="markdown-toc-depend">Interdépendances entre les composantes</a></li> <li><a href="#guidelines" id="markdown-toc-guidelines">Règles et autres standards</a></li> </ul> </div> </nav> <h2 id="intro" class="no_toc">Introduction</h2> <p>Il est essentiel que des composantes distinctes et multiples du développement web et de l’interaction utilisateur s’articulent convenablement pour que le Web soit accessible aux personnes handicapées. Ces composantes incluent :</p> <ul> <li><strong>du contenu</strong> – l’information contenue dans une page web ou une application web, y compris : <ul> <li>de l’information primaire telle que du texte, des images et des sons,</li> <li>du code ou du balisage qui définit la structure, la présentation… ;</li> </ul> </li> <li><strong>des navigateurs web, des lecteurs de média</strong>, et d’autres « agents utilisateurs » ;</li> <li><strong>une technologie d’assistance</strong>, dans certains cas – lecteurs d’écran, claviers alternatifs, contacteurs, logiciel de numérisation… ;</li> <li>les connaissances, l’expérience et dans certains cas les stratégies d’adaptation <strong>des utilisateurs</strong> pour l’utilisation du Web ;</li> <li><strong>des créateurs</strong> – concepteurs, graphistes, codeurs, auteurs… y compris des créateurs handicapés et des utilisateurs qui contribuent ;</li> <li><strong>des outils de création</strong> – logiciels de création de sites web ;</li> <li><strong>des outils d’évaluation</strong> – outils d’évaluation de l’accessibilité web, validateurs HTML ou CSS…</li> </ul> <h2 id="relate">Comment les composantes s’articulent</h2> <div class="img-card"><img src="/WAI/content-images/components/relate.fr.png" alt="Illustration montrant comment les composantes s’articulent" /><p><a href="/WAI/fundamentals/components/examples/fr#relate">Description longue de l'image</a></p></div> <p>Les <strong>créateurs</strong> web utilisent généralement <strong>des outils de création</strong> et des outils d’évaluation pour créer du <strong>contenu</strong> web.</p> <p><strong>Les personnes</strong> (“<strong>utilisateurs</strong>”) utilisent des <strong>navigateurs web, des lecteurs de média, des technologies d’assistance,</strong> ou d’autres “<strong>agents utilisateurs</strong>” pour obtenir ou interagir avec le <strong>contenu</strong>.</p> <h2 id="depend">Interdépendances entre les composantes</h2> <p>Il y a des interdépendances cruciales entre les composantes ; c’est-à-dire que les composantes doivent s’articuler correctement pour que le web soit accessible. Par exemple, pour les équivalents textuels aux images :</p> <ul> <li>les <strong>spécifications techniques</strong> traitent des équivalents textuels (par exemple, HTML définit l’attribut d’équivalent textuel (<code class="language-plaintext highlighter-rouge">alt</code>) pour l’élément image (<code class="language-plaintext highlighter-rouge">img</code>)) ;</li> <li><strong>les règles WAI</strong> (<a href="#guidelines">WCAG, ATAG, UAAG décrites ci-dessous</a>) définissent comment mettre en place les équivalents textuels dans la perspective de l’accessibilité pour les différentes composantes ;</li> <li>les <strong>créateurs</strong> fournissent la formulation appropriée de l’équivalent textuel ;</li> <li>les <strong>outils de création</strong> permettent, facilitent et promeuvent la fourniture d’un équivalent textuel dans une page web ;</li> <li>les <strong>outils d’évaluation</strong> sont utilisés pour faciliter la vérification de la présence d’équivalents textuels ;</li> <li>les <strong>agents utilisateurs</strong> fournissent des interfaces à destination des êtres humains et des machines pour l’équivalent textuel ;</li> <li>les <strong>technologies d’assistance</strong> fournissent un accès aux êtres humains à l’équivalent textuel suivant différentes modalités ;</li> <li>les <strong>utilisateurs</strong> savent comment obtenir l’équivalent textuel depuis leur agent utilisateur ou leur technologie d’assistance ou les deux, selon que de besoin.</li> </ul> <h3 id="le-cycle-de-mise-en-œuvre">Le cycle de mise en œuvre</h3> <p>Quand les fonctionnalités d’accessibilité sont effectivement mises en œuvre dans une composante, les autres composantes sont plus susceptibles de les mettre en œuvre elles aussi.</p> <p><img src="/WAI/content-images/components/cycle.fr.png" alt="" /></p> <ul> <li>Quand <strong>les navigateurs web, les lecteurs de média, les technologies d’assistance, et les autres agents utilisateurs</strong> fournissent une fonctionnalité d’accessibilité, les utilisateurs sont plus susceptibles de l’exiger et les créateurs sont plus susceptibles de l’implémenter dans leur <strong>contenu</strong> ;</li> <li>Quand les créateurs veulent implémenter une fonctionnalité d’accessibilité dans leur <strong>contenu</strong>, ils sont plus susceptibles d’exiger que leur <strong>outil de création</strong> en rende simple la mise en œuvre ;</li> <li>Quand <strong>les outils de création</strong> rendent simple la mise en œuvre d’une fonctionnalité, les créateurs sont plus susceptibles de la mettre en œuvre dans leur <strong>contenu</strong> ;</li> <li>Quand une fonctionnalité d’accessibilité est mise en œuvre dans <strong>la plupart des contenus</strong>, les créateurs et les utilisateurs sont plus susceptibles d’exiger que les <strong>agents utilisateurs</strong> la prennent en charge.</li> </ul> <h3 id="quand-une-composante-est-déficiente">Quand une composante est déficiente</h3> <p>Si une fonctionnalité d’accessibilité n’est pas mise en œuvre dans une composante, il y a peu de motivation pour les autres composantes pour l’implémenter s’il n’en résulte pas une expérience utilisateur accessible. Par exemple les créateurs n’implémenteront probablement pas une fonctionnalité d’accessibilité que les outils de création ne fournissent pas et que la plupart des navigateurs et des technologies d’assistance ne mettent pas en œuvre systématiquement.</p> <div class="img-card"><img src="/WAI/content-images/components/bridge.fr.png" alt="Illustration de ce qui arrive quand une composante est déficiente" /><p><a href="/WAI/fundamentals/components/examples/fr#weak">Description longue de l'image</a></p></div> <p>Si une composante a une faible prise en compte de l’accessibilité, d’autres composantes peuvent parfois compenser cela au travers de « contournements » qui nécessitent beaucoup plus d’effort et ne sont pas positifs pour l’accessibilité en général. Par exemple :</p> <ul> <li>les créateurs peuvent avoir plus de travail pour compenser des lacunes dans les fonctionnalités d’accessibilité des outils de création ; par exemple en codant du balisage directement plutôt que grâce à un outil ;</li> <li>les utilisateurs peuvent avoir plus de travail pour compenser des lacunes dans les fonctionnalités d’accessibilité des navigateurs, des lecteurs de média, et de la technologie d’assistance ; et le manque d’accessibilité du contenu ; par exemple en utilisant différents navigateurs ou technologies d’assistance pour surmonter différents problèmes d’accessibilité.</li> </ul> <p>Cependant dans la plupart des cas les contournements ne sont pas mis en œuvre et le résultat reste décevant en matière d’accessibilité. De plus un support défaillant de l’accessibilité dans une composante ne peut parfois pas toujours être raisonnablement compensé par les autres composantes ; le résultat étant l’inaccessibilité, rendant impossible pour certaines personnes handicapées l’utilisation d’un site, d’une page ou d’une fonctionnalité en particulier.</p> <h2 id="guidelines">Règles et autres standards</h2> <p>L’Initiative pour l’accessibilité du Web (<abbr lang="en" title="Web Accessibility Initiative"><a href="https://www.w3.org/WAI/">WAI</a></abbr>) du <span lang="en">World Wide Web Consortium</span> (<a href="https://www.w3.org/">W3C</a>) développe des <strong>standards d’accessibilité du Web</strong> pour différentes composantes :</p> <ul> <li><a href="/WAI/standards-guidelines/atag/fr">les Règles pour l’accessibilité des outils d’édition (<abbr lang="en" title="Authoring Tool Accessibility Guidelines">ATAG</abbr>)</a> traite des outils de création ;</li> <li><a href="/WAI/standards-guidelines/wcag/fr">les Règles pour l’accessibilité des contenus Web (<abbr lang="en" title="Web Content Accessibility Guidelines">WCAG</abbr>)</a> traite du contenu web, et est utilisé par les créateurs, outils de création et outils d’évaluation de l’accessibilité ;</li> <li><a href="/WAI/standards-guidelines/uaag/" hreflang="en">les Règles pour l’accessibilité des agents utilisateurs (<abbr lang="en" title="User Agent Accessibility Guidelines ">UAAG</abbr>) (en anglais)</a> traite des navigateurs et lecteurs de média, y compris certains aspects des technologies d’assistance.</li> </ul> <p>Ces règles d’accessibilité reposent sur le socle des spécifications techniques fondamentales du Web, et sont développées en coordination avec toutes les <a href="https://www.w3.org/TR/">spécifications techniques de W3C </a> (HTML, CSS, SVG, SMIL, etc.). W3C développe aussi des spécifications techniques qui traitent directement d’accessibilité, dont :</p> <ul> <li>la suite des spécifications <a href="/WAI/standards-guidelines/aria/" hreflang="en"><abbr lang="en" title="Accessible Rich Internet Applications">ARIA</abbr>, les applications Internet riches accessibles (en anglais)</a>, qui définit une façon de créer des applications web plus accessibles aux personnes handicapées. Elle facilite notamment le développement de contenu dynamique et de contrôles d’interface utilisateur avancés avec Ajax, HTML, JavaScript et les technologies associées.</li> </ul> <div class="img-card"><img src="/WAI/content-images/components/specs.fr.png" alt="Illustration montrant les règles pour les différentes composantes" /><p><a href="/WAI/fundamentals/components/examples/fr#guide">Description longue de l'image</a></p></div> <p>Pour plus d’informations, consultez <a href="/WAI/standards-guidelines/fr">Standards d’accessibilité du W3C – Vue d’ensemble</a>.</p> <aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Aider à améliorer cette page </h2></header><div class="box-i"><p>Merci de partager vos idées, vos suggestions ou vos commentaires par courriel à la liste archivée publiquement <a href="mailto:wai@w3.org?body=%5Bajoutez%20un%20objet%20d%E2%80%99email%20appropri%C3%A9%5D%0A%0A%5Bvotre%20commentaire%20ici...%5D%0A%0AJ%E2%80%99accepte%20que%20ceci%20soit%20partag%C3%A9%20sur%20une%20liste%20de%20diffusion%20archiv%C3%A9e%20publiquement.">wai@w3.org</a> ou via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Bajoutez%20un%20objet%20d%E2%80%99email%20appropri%C3%A9%5D%0A%0A%5Bvotre%20commentaire%20ici...%5D%0A%0AJ%E2%80%99accepte%20que%20ceci%20soit%20partag%C3%A9%20sur%20une%20liste%20de%20diffusion%20archiv%C3%A9e%20publiquement." class="button"><span>Courriel</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/fundamentals/components/index.fr.md " class="button"><span>Cloner et modifier sur GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&title=[fr]%20&wai-resource-id=wai-components&wai-url=https://www.w3.org/WAI/fundamentals/components/fr" class="button"><span>Nouveau ticket sur GitHub</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Retour en haut de page</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Version en anglais actualisée le :</strong> 2024-03-14. (Date de la traduction : 2024-03-19).</p><p> <strong>Autorisation d’exploitation :</strong> Vous pouvez utiliser les images de cette page pour l’éducation à l’accessibilité et sa sensibilisation si vous :<br> 1. Incluez l’URI <strong><span class="changed">w3.org/WAI/fundamentals/components/</span> <em>en évidence</em></strong> à proximité de l’image, et <br> 2. Incluez l’attribution à l’artiste, l’éditeur, et la mention de copyright dans tous les travaux publiés ou diffusés :<br><cite>Image par Michael Duffy, depuis : Essential Components of Web Accessibility. Éditrice S. L. Henry. Copyright W3C <sup>®</sup> (MIT, ERCIM, Keio, Beihang). w3.org/WAI/fundamentals/components/</cite><br> Pour plus d’informations, voir <a href="https://www.w3.org/WAI/about/using-wai-material/" lang="en" hreflang="en">Using WAI Materials (en anglais)</a>. </p> <p><strong>Rédaction :</strong> <a href="https://www.w3.org/People/Shawn" lang="en" hreflang="en">Shawn Lawton Henry</a>. Graphiste : Michael Duffy.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Stratégies, standards et ressources pour rendre le Web accessible aux personnes en situation de handicap.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739541174349523255"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739541174349523255"></script> <script> svg4everybody(); </script> <script src="/WAI/assets/scripts/lang/fr.js?1739541174349523255"></script> </body> </html>