+ Autorisation d’exploitation :
+ Vous pouvez utiliser les images de cette page pour l’éducation à l’accessibilité et sa sensibilisation si vous :
+ 1. Incluez l’URI w3.org/WAI/fundamentals/components/ en évidence à proximité de l’image, et
+ 2. Incluez l’attribution à l’artiste, l’éditeur, et la mention de copyright dans tous les travaux publiés ou diffusés :
Image par Michael Duffy, depuis : Essential Components of Web Accessibility. Éditrice S. L. Henry. Copyright W3C ® (MIT, ERCIM, Keio, Beihang). w3.org/WAI/fundamentals/components/
+ Pour plus d’informations, voir Using WAI Materials (en anglais).
+
Date : Mis à jour le 14 mars 2024.
+Rédaction : Shawn Lawton Henry. Graphiste : Michael Duffy.
+--- + +{::nomarkdown} +{% include box.html type="start" h="2" title="Résumé" class="full" %} +{:/} + +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. + +Elle fournit les bases pour comprendre les différents standards d’accessibilité produits par l’Initiative pour l’accessibilité du Web (WAI) du W3C. + +{::nomarkdown} +{% include box.html type="end" %} +{:/} + +{::nomarkdown} +{% include_cached toc.html type="start" title="Contenu de la page" class="simple" %} +{:/} + +{::options toc_levels="2" /} + +- This text will be replaced by the TOC. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + + +## Introduction {#intro} +{:.no_toc} + +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 : + +- **du contenu** – l’information contenue dans une page web ou une application web, y compris : + - de l’information primaire telle que du texte, des images et des sons, + - du code ou du balisage qui définit la structure, la présentation… ; +- **des navigateurs web, des lecteurs de média**, et d’autres « agents utilisateurs » ; +- **une technologie d’assistance**, dans certains cas – lecteurs d’écran, claviers alternatifs, contacteurs, logiciel de numérisation… ; +- les connaissances, l’expérience et dans certains cas les stratégies d’adaptation **des utilisateurs** pour l’utilisation du Web ; +- **des créateurs** – concepteurs, graphistes, codeurs, auteurs… y compris des créateurs handicapés et des utilisateurs qui contribuent ; +- **des outils de création** – logiciels de création de sites web ; +- **des outils d’évaluation** – outils d’évaluation de l’accessibilité web, validateurs HTML ou CSS… + +## Comment les composantes s’articulent {#relate} + +{% assign longdesc_url = "/fundamentals/components/examples/fr/#relate" | relative_url %} +{% include image.html src="relate.fr.png" alt="Illustration montrant comment les composantes s’articulent" longdesc=longdesc_url %} + +Les **créateurs** web utilisent généralement **des outils de création** et des outils d’évaluation pour créer du **contenu** web. + +**Les personnes** ("**utilisateurs**") utilisent des **navigateurs web, des lecteurs de média, des technologies d’assistance,** ou d’autres "**agents utilisateurs**" pour obtenir ou interagir avec le **contenu**. + +## Interdépendances entre les composantes {#depend} + +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 : + +- les **spécifications techniques** traitent des équivalents textuels (par exemple, HTML définit l’attribut d’équivalent textuel (`alt`) pour l’élément image (`img`)) ; +- **les règles WAI** ([WCAG, ATAG, UAAG décrites ci-dessous](#guidelines)) définissent comment mettre en place les équivalents textuels dans la perspective de l’accessibilité pour les différentes composantes ; +- les **créateurs** fournissent la formulation appropriée de l’équivalent textuel ; +- les **outils de création** permettent, facilitent et promeuvent la fourniture d’un équivalent textuel dans une page web ; +- les **outils d’évaluation** sont utilisés pour faciliter la vérification de la présence d’équivalents textuels ; +- les **agents utilisateurs** fournissent des interfaces à destination des êtres humains et des machines pour l’équivalent textuel ; +- les **technologies d’assistance** fournissent un accès aux êtres humains à l’équivalent textuel suivant différentes modalités ; +- les **utilisateurs** savent comment obtenir l’équivalent textuel depuis leur agent utilisateur ou leur technologie d’assistance ou les deux, selon que de besoin. + +### Le cycle de mise en œuvre + +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. + +{% include image.html src="cycle.fr.png" alt="" %} + +- Quand **les navigateurs web, les lecteurs de média, les technologies d’assistance, et les autres agents utilisateurs** 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 **contenu** ; +- Quand les créateurs veulent implémenter une fonctionnalité d’accessibilité dans leur **contenu**, ils sont plus susceptibles d’exiger que leur **outil de création** en rende simple la mise en œuvre ; +- Quand **les outils de création** rendent simple la mise en œuvre d’une fonctionnalité, les créateurs sont plus susceptibles de la mettre en œuvre dans leur **contenu** ; +- Quand une fonctionnalité d’accessibilité est mise en œuvre dans **la plupart des contenus**, les créateurs et les utilisateurs sont plus susceptibles d’exiger que les **agents utilisateurs** la prennent en charge. + +### Quand une composante est déficiente + +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. + +{% assign longdesc_url = "/fundamentals/components/examples/fr/#weak" | relative_url %} +{% include image.html src="bridge.fr.png" alt="Illustration de ce qui arrive quand une composante est déficiente" longdesc=longdesc_url %} + +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 : + +- 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 ; +- 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é. + +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. + +## Règles et autres standards {#guidelines} + +L’Initiative pour l’accessibilité du Web ([WAI](https://www.w3.org/WAI/)) du World Wide Web Consortium ([W3C](https://www.w3.org/)) développe des **standards d’accessibilité du Web** pour différentes composantes : + +- [les Règles pour l'accessibilité des outils d'édition (ATAG)](/standards-guidelines/atag/) traite des outils de création ; +- [les Règles pour l'accessibilité des contenus Web (WCAG)](/standards-guidelines/wcag/) traite du contenu web, et est utilisé par les créateurs, outils de création et outils d’évaluation de l’accessibilité ; +- [les Règles pour l'accessibilité des agents utilisateurs (UAAG)](/standards-guidelines/uaag/) traite des navigateurs et lecteurs de média, y compris certains aspects des technologies d’assistance. + +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 spécifications techniques de W3C {% include_cached different.html %} (HTML, CSS, SVG, SMIL, etc.). W3C développe aussi des spécifications techniques qui traitent directement d’accessibilité, dont : + +* la suite des spécifications [ARIA, les applications Internet riches accessibles](/standards-guidelines/aria/), 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. + +{% assign longdesc_url = "/fundamentals/components/examples/fr/#guide" | relative_url %} +{% include image.html src="specs.fr.png" alt="Illustration montrant les règles pour les différentes composantes" longdesc=longdesc_url %} + +Pour plus d’informations, consultez [[Vue d’ensemble des standards d’accessibilité du W3C +]](/standards-guidelines/). diff --git a/content/wai-components-example.fr.md b/content/wai-components-example.fr.md new file mode 100644 index 0000000..8074f8b --- /dev/null +++ b/content/wai-components-example.fr.md @@ -0,0 +1,77 @@ +--- +# Translation instructions are after the "#" character in this first section. They are comments that do not show up in the web page. You do not need to translate the instructions after #. + +title: Descriptions des illustrations de « Composantes essentielles de l'accessibilité du Web » +lang: fr +parent: /fundamentals/components/ # Do not change this +last_updated: 2024-03-19 # Put the date of this translation YYYY-MM-DD (with month in the middle) + +translators: + - name: "Rémi Bétin" +contributors: + - name: "@code-elegant" + +github: + repository: w3c/wai-components + path: 'content/wai-components-example.fr.md' # Add the language shortcode to the middle of the filename, for example content/index.fr.md + +permalink: /fundamentals/components/examples/fr # Add the language shortcode to the end; for example /path/to/file/fr +ref: /fundamentals/components/examples/ # Do not change this +--- + +{::nomarkdown} +{% include_cached toc.html type="start" title="Contenu de la page" class="simple" %} +{:/} + +{::options toc_levels="2" /} + +- This text will be replaced by the TOC. +{:toc} + +{::nomarkdown} +{% include_cached toc.html type="end" %} +{:/} + +Cette page décrit les illustrations présentées dans le document [[Composantes essentielles de l’accessibilité du Web]](/fundamentals/components/) et les diapositives [Composantes essentielles de l’accessibilité du Web](https://www.w3.org/WAI/intro/components-slides). + +## Description de l’illustration « Comment les composantes s’articulent » {#relate} + +{% include image.html src="relate.fr.png" alt="" %} + +Illustration comprenant des graphiques étiquetés de cadres, de contenus et de personnes. Centrés en haut, se trouvent un diagramme circulaire, une image, un formulaire et un texte, étiquetés « contenu ». En partant du bas à gauche, une ligne connecte les « développeurs » aux « outils de création » et aux « outils d'évaluation », jusqu'au « contenu » tout en haut. En partant du bas à droite, une ligne connecte les « utilisateurs » aux « navigateurs, lecteurs de média » et aux « technologies d'assistance », jusqu'au « contenu » tout en haut. + +## Description de l’illustration « Quand une composante est déficiente » {#weak} + +{% include image.html src="bridge.fr.png" alt="" %} + +Illustration comprenant des graphiques étiquetés de cadres, de contenus et de personnes. Centrés en haut, se trouvent un diagramme circulaire, une image, un formulaire et un texte, étiquetés « contenu ». En partant du bas à gauche, une ligne connecte les « développeurs » au « contenu » tout en haut, en contournant les « outils de création ». En partant du bas à droite, une ligne connecte les « utilisateurs » au « contenu » tout en haut, en passant par de multiples « navigateurs, lecteurs de média » et « technologies d'assistance ». + +## Description de l’illustration « Des règles pour les différentes composantes » {#guide} + +{% include image.html src="specs.fr.png" alt="" %} + +Illustration comprenant des graphiques étiquetés de cadres, de contenus et de personnes. Centrés en haut, se trouvent un diagramme circulaire, une image, un formulaire et un texte, étiquetés « contenu ». En partant du bas à gauche, une ligne connecte les « développeurs » aux « outils de création » et aux « outils d'évaluation », jusqu'au « contenu » tout en haut. En partant du bas à droite, une ligne connecte les « utilisateurs » aux « navigateurs, lecteurs de média » et aux « technologies d'assistance », jusqu'au « contenu » tout en haut. En dessous se trouvent les « règles pour l'accessibilité » qui incluent les « ATAG » avec une flèche pointant vers les « outils de création » et aux « outils d'évaluation » ; les « WCAG » qui pointent vers le « contenu » ; et les « UAAG » qui pointent vers les « navigateurs, lecteurs de média » et les « technologies d'assistance ». Tout en bas, les « spécifications techniques (HTML, ARIA, CSS, SVG, SMIL, etc.) » forment une base, avec une flèche vers le haut pointant vers les règles pour l'accessibilité. + +{% comment %} + +@@ commenting out - image was used in presentation that is not on new site - leaving here in case we want to resurrect it in the future. @@ + +## Interdependencies Between Components, Example Illustration Description {#example-alt} + +{% include image.html src="relate-example.jpg" alt="" %} + +Illustration with labeled graphics of boxes, content, and people. at the +top center "content" and underneath it is a logo and a box with: +`
`.
+coming up from the bottom left, a line connects “developers” through
+“authoring tools” and “evaluation tools” to “content” at the top.
+between the “developer” and “authoring tools” is a dialog box titled:
+Image Tag Accessibility Attributes, a field titled: Alternative Text
+filled in with: Web Accessibility Initiative logo. coming up from the
+bottom right, a line connects “users” to “browsers, media players” and
+“assistive technologies” to “content” at the top. just up from the
+“user” is a speech bubble saying: Web Accessibility Initiative logo and
+a yellow box with: Web Accessibility Initiative logo. at the bottom is:
+`1.1 Provide a text equivalent for every non-text element`
+
+{% endcomment %}
\ No newline at end of file