Accessibility guide for developers/fr

L’accessibilité est importante pour nos utilisateurs et nous pouvons l’améliorer si nous prenons en compte quelques idées et règles de base. L’accessibilité est difficile dans la mesure où il n’existe pas de normes techniques fixes et universellement acceptées qui fonctionnent réellement de manière cohérente et pour tous les utilisateurs. Cette page ne répertorie ni ne discute des problèmes d’accessibilité spécifiques dans MediaWiki. Elle tente de se concentrer sur les choix technologiques et les choses à faire et à ne pas faire pour éviter les problèmes d’accessibilité.

En termes de développement, je pense que ceci devrait être notre livre de règles :


 * Essayez d’activer nos utilisateurs (et cela signifie tous).
 * Essayez de contourner les problèmes d’accessibilité si cela est possible, mais pas à tout prix.
 * Nous devrions utiliser une approche d’amélioration progressive plutôt que de tolérance aux pannes.
 * Mettre en œuvre des choses qui sont technologiquement solides.



Fonctionnement de l'accessibilité
Quelques concepts importants que vous devez garder à l’esprit.



Des mesures d’accessibilité sous de nombreuses formes
L’accessibilité concerne une variété de choses, veuillez considérer ce qui suit :


 * Quelque chose doit être compréhensible : c’est-à-dire textuellement, visuellement, logiquement et en complexité.
 * Certains utilisateurs ont besoin d'un lecteur d'écran pour interagir, mais d'autres ont tout autant, sinon plus besoin: d'une loupe, d'un contraste plus élevé, d'un moteur de synthèse vocale, de paramètres CSS personnalisés ou d'un type particulier de clavier/d'appareil de saisie.
 * Il doit être accessible ; la réactivité, l’abordabilité, l’emplacement, la langue, le matériel, etc.

En résumé, l’accessibilité n’est pas seulement l’accessibilité du clavier, ou seulement l’accessibilité du lecteur d’écran. Nous nous concentrons souvent sur ces deux, car ils sont facilement négligés traditionnellement. Mais ces problèmes peuvent également être résolus et constituent souvent la base de tout autre type d’améliorations possibles.

Certains problèmes d’accessibilité ont tendance à être des problèmes de conception de produits, de choix stratégiques, de public cible, etc. Comme ces domaines sont plus difficiles à saisir dans des règles écrites qui s’appliquent universellement à l’écosystème MediaWiki, ils sortent du cadre de ce document.



Navigation au clavier
C’est ce que nous appelons la navigation au clavier, mais ce que cela signifie vraiment, c’est : ne vous fiez pas à un dispositif de pointage (tactile, souris).


 * La navigation au clavier consiste à manipuler le focus et à exécuter des actions avec votre clavier.
 * Les éléments qui sont tabulables sont focalisables, mais tout ce qui est focalisable n'est pas tabulable.
 * Tout ce que vous pouvez faire avec une souris devrait être possible avec un clavier.
 * Les informations relatives à la navigation au clavier peuvent être utilisées par les lecteurs d'écran pour améliorer leur expérience.



Lecteur d'écran

 * Un lecteur d'écran utilise un 'curseur' différent, qui parcourt habituellement la structure logique du DOM (Document Object Model).
 * Le focus tend à suivre le curseur du lecteur d'écran et réciproquement mais ce sont deux choses différentes.
 * Vous pouvez garder la trace de l'élément ciblé en définissant une expression en direct dans Chrome
 * Un lecteur d'écran utilise les APIs d' 'accessibilité', que vous pouvez considérer comme étant la vue d'entrée / sortie par dessus le DOM initial.
 * ARIA sont des annotations DOM qui étendent ou orientent la manière dont la logique DOM est modifiée dans les APIs d'accessibilité. Ce n'est pas une alternative à la réécriture d'un nouveau code HTML et JavaScript. La navigation au clavier se fait simplement dans l'ordre logique du DOM ! Pour en savoir plus sur ARIA voir les explications sur w3.org et sur MDN.
 * Un lecteur d'écran n'est pas limité à la navigation dans la structure logique du DOM, mais c'est le fonctionnement par défaut.
 * Un lecteur d'écran peut lire par exemple ce qui se trouve sous le pointeur de la souris.
 * VoiceOver pour iOS utilise un curseur d'écran dirigé par le positionnement du pouce et les mouvements sur l'écran tactile.
 * La plupart des logiciels lecteurs d'écran possèdent des modes de navigation supplémentaires, où vous pouvez lister et naviguer parmi des zones prédéfinies, ou par un sommaire auto-généré, ou encore à l'aide de 'signets' utilisateur définis à l'intérieur d'une page.
 * Du point ci-dessus des méthodes de navigation multiples, suit : Il y a un début et une fin, mais aussi la gauche, la droite, le haut et le bas. Vous ne devez pas trop compter sur eux dans votre communication, mais vous ne devez pas non plus nier complètement leur existence. Ne confondez pas les capacités visuelles de l'utilisateur avec la conscience spatiale que le lecteur d'écran pourrait être en mesure de lui transmettre. Exemple :
 * Une longue phrase [image] l’image ci-dessus montre...
 * une longue phrase [image][image] l’image de gauche montre, l’image de droite montre...
 * une longue phrase [image][image] l’image de droite montre, l’image de gauche montre...
 * Une longue phrase [image][image] l’image ci-dessus montre...
 * une longue phrase [image][image][image] l’image de gauche montre, l’image de droite montre...
 * une longue phrase [image][image] quelque chose de totalement différent. l’image de gauche montre, l’image de droite montre...



Règles du développement
Il existe plusieurs normes en matière d'accessibilité et, honnêtement, la plupart d'entre elles, bien qu'elles permettent d'identifier les problèmes, présentent des lacunes importantes en ce qui concerne les solutions techniques (elles présentent un taux élevé de "solutions de rechange laides"). Cela a suscité une grande controverse au sein des communautés. En tant que tel, nous devrions identifier les choses non controversées que nous devrions simplement toujours (ou jamais) faire et pourquoi. Il est beaucoup plus facile d'atteindre certains objectifs si nous séparons les éléments non controversés des éléments controversés.



Utiliser ou fournir toujours

 * Élément HTML sémantique approprié
 * Utilisez les éléments HTML conformément à leur finalité. Par exemple :
 * Utilisez et non  ou  ou  avec un gestionnaire de clics
 * Si vous ressentez le besoin de mettre quelque chose en gras, demandez-vous s’il n’est pas plus approprié d’utiliser un en-tête ou un élément


 * Structure logique des titres
 * Toutes les pages doivent toujours présenter une structure de titres logique et cohérente. Les titres sont l'un des principaux outils de navigation utilisés par les utilisateurs de lecteurs d'écran.
 * Il ne doit pas y avoir d’espace dans l’imbrication des niveaux de cap. (Donc, pas de 1 $.)
 * Les titres doivent être descriptifs
 * Les titres doivent être uniques à leur propre niveau. (Il ne devrait pas y avoir deux H3 avec le même contenu sous la même section H2)
 * Il devrait y avoir des une séparation entre la navigation et le contenu


 * attribut pour les images avec des valeurs significatives
 * Si une image est décorative, utilisez une valeur vide explicite pour l'attribut alt ; mieux encore, transformez-la en image de fond CSS.
 * L’alt image est généralement prioritaire sur l’attribut title des images et même sur l’attribut title des liens qui enveloppent une image.


 * pour les liens
 * Elles sont généralement affichées sous forme d'infobulles
 * N’utilisez des titres que s’ils diffèrent du texte du lien.
 * La plupart des titres de liens ne sont pas réellement prononcés par les lecteurs d’écran, à moins que le lecteur d’écran n’ait été explicitement configuré de cette façon.


 * Attributs,   et
 * L’utilisation de  et   permet de sélectionner une voix appropriée dans les lecteurs d’écran, de choisir la bonne correction orthographique dans les navigateurs, etc.


 * Contraste suffisant
 * Vérifiez vos couleurs pour suffisante de contrastées. Pour le texte, un contraste plus élevé est nécessaire pour un texte plus petit (en raison de l’anticrénelage).


 * Mise au point pour la navigation au clavier
 * Do not remove outline from focusable elements unless you define your own outline for the  state.
 * Don't use  otherwise.
 * If you define any pseudo class, like  or , please also define a   style.


 * Keyboard navigation
 * Interactive elements of a page should be navigable by keyboard. Please make sure tab key navigation is enabled in your browser and allows you to control each interactive element without making use of a pointing device.
 * Use  to make elements keyboard accessible, which are not keyboard accessible implicitly (Anything but, , , , , , ).
 * In this case also add a keydown handler responding to Enter (keyCode 13) and space (keyCode 32).
 * Use  to remove elements from accessibility. (use this on links that are labels for the action inside an  for instance)
 * Elements that are implicitly keyboard accessible will forward enter/space keydown to the click handler


 * Dialogs etc.

When not taking good care of accessibility, dialogs are some of the most inaccessible elements for screen reader and keyboard users. Spend some time on this.


 * The element that opens the dialog should have
 * The dialog itself should have
 * When opening the dialog, remember last focused element and shift focus to the first focusable tabbable element inside the dialog
 * When the dialog is modal, make it impossible to interact with the rest of the page
 * Capture clicks outside the dialog and ignore them or let them dismiss the dialog
 * Make sure you cannot tab to links or input elements outside of dialog
 * Make elements outside of the dialog unreachable for screen reader, by using aria-hidden
 * Make sure there is a close mode (Esc key and a focusable close button with a descriptive title)
 * Closing should return the (keyboard) focus to the original focus point that you stored when you opened the dialog. For screen readers to return to the same point, be sure to specify the right owner of the dialog, if you have not inserted the dialog in DOM order.
 * Read up: Aria modals, Aria modal dialog, ARIA nonmodal dialog, ARIA tooltips.
 * Read up: Aria modals, Aria modal dialog, ARIA nonmodal dialog, ARIA tooltips.


 * WCAG 2.1 guidelines
 * Follow wherever possible
 * And its accompanying documents:
 * A guide to understanding and implementing Web Content Accessibility Guidelines 2.0
 * WCAG 2.1 supplement
 * Techniques and Failures for Web Content Accessibility Guidelines 2.0
 * WCAG 2.1 supplement



À ne pas faire

 * There is common advice to use  to push something (often the labels of icon buttons) out of the viewport for visual users and still have it in the accessibility DOM.  is variant of this. This is BAD advice.
 * This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. ( If needed,  is preferred over   to avoid this ).
 * VoiceOver on mobile is unable to use this text as a fallback, since it is a 'positional' screen reader. You cannot move your finger over this text and thus the text will not be read either. (aria-label is often the better choice).
 * Lastly, this enlarges the render surface needed to calculate the final webpage and this can impact performance on mobile devices.
 * Insightful overview of 'hide text offscreen' tricks are given by Jonathan Snook.
 * Things should not be repeated often. If you have a 100 links on a page that can open a dialog, then don't add 100 labels to those 100 links telling the user that it can be used to open a dialog. Telling a user how to use/what to do with the interface is a good thing, doing it consistently is simply annoying. Find a different way to explain it once (an  might be an idea in this case ?).
 * with an onclick handler. VO reads such JS as "internal link Hide". Use a proper button, or, with 'Space' and 'Enter' key handlers in the onclick. But no href attribute.
 * Do not nest interactive functionality inside another interactive element (links or buttons inside links). This confuses screen readers.

Eviter

 * Unicode symbols
 * Most assistive technologies are not good with symbols. Therefore, try to avoid characters such as ↑, →‎ or more complex characters, because many screen reader won't understand them. If they are required, try to wrap with a span element with the title attribute, so that the title attribute can communicate the implicit meaning within the context to the reader.


 * Small fonts
 * Legibility is preferred. If you make something so small that it is hard to read, do you even need it to begin with? Also avoid small fonts with low or mediocre contrast values (even if they fall inside the WCAG guidelines, small sizes require more explicit contrast then large sizes, especially with anti aliasing enabled).


 * Unusually large fonts
 * If you make text much larger than normal, it can become similarly hard to read (unless it's very short). This applies mostly to body text, or anything that takes up more than a couple lines. But the larger the text is, the more lines it will take up.


 * tabIndex > 0
 * DOM order is preferred wherever possible. DOM order provides context for the actions.


 * Workaround
 * Traditionally, accomplishing 'full' accessibility has required a lot of workarounds for html itself, the browsers and even specific screenreader software. However these workarounds often come with side effects, make use of bugs or unspecified behavior and inevitably create technical debt.
 * MediaWiki, because of the users it seeks to serve, the amount of code, it's (lack) of funding, etc tends to prefer future proof code over code that easily breaks. As such it generally avoids workarounds even if that might sometimes limit the accessibility we can deliver. Decisions on this are often influenced by the relative audience of the feature in MediaWiki. If something is ubiquitous for all users a workaround is more warrented than if the feature affected is only used by a tiny part of the audience (for instance, reading a page vs modifying the configuration of the installation).

Considérez

 * ARIA Roles
 * If a div or span behaves like an actual button use . also   and
 * Be careful with roles. For instance, don't add  to a  element, since the  element has an implicit , which will be overwritten. Instead use nested elements. Similarly for  which has an implicit
 * If a button creates a popupdialog, use.
 * Use  for contexts where this is not fully logical by itself (so everywhere except for labels in forms and headers in tables).
 * Avoid tables for layout purposes and test on smaller screen widths.
 * hide stuff: https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/
 * skip/jump to links



Voir aussi

 * Wikimedia Design Style Guide: Accessibility principles
 * Open bugs and feature requests related to the accessibility in MediaWiki and other Wikimedia software
 * W3C Web Accessibility Initiative: Tips for Getting Started
 * W3C Web Accessibility Initiative: Web Accessibility Evaluation Tools List
 * Firefox Developer Tools: Accessibility Inspector
 * Chrome Developer Tools: Accessibility features
 * Accessibility and usability cleanup
 * Blogposts
 * Steps Towards an Accessible Web Form
 * Understanding WCAG Level
 * Software
 * WAVE, a Web accessibility evaluation tool
 * Accessibility simulation on MediaWiki. Experience a page as a color blind person would experience it.
 * https://www.deque.com/axe/ browser extension for accessibility auditing a page
 * https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ webapp for accessibility auditing. See also https://www.powermapper.com/tests/
 * University of Cambridge - Impairment simulator software (Microsoft Windows only)
 * Guides by 3rd parties
 * Designing accessible services by UK Home Office
 * Inclusive Design by Microsoft