Accessibilité

1. Accessibilité

2. Introduction • Prérequis : • HTML • Contenu : Ce cours est composé de morceaux choisis des règles pour l’accessibilité des contenus Web (WCAG) édictées par le W3C, et du référentiel général d’accessibilité pour les administrations (RGAA) mis en place pour l’État français.

3. Qu’est-ce que l’accessibilité ? • Rendre les contenus et les services du Web accessibles aux personnes ayant des capacités diminuées : • Handicapés : visuels, auditifs, moteurs, cognitifs, etc. • Personnes âgées • Une très large palette de critères à prendre en compte • Un droit national (loi de 2005) et international (convention relative aux droits des personnes handicapées, ONU, 2006) • Une norme évaluée par des organismes spécialisées (niveaux A, AA, AAA, B, C)

4. Les principes généraux 1. Perceptible L'information et les composants de l'interface utilisateur doivent être présentés à l'utilisateur de façon à ce qu'il puisse les percevoir 2. Utilisable Les composants de l'interface utilisateur et de navigation doivent être utilisables 3. Compréhensible Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles 4. Robuste Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance

5. 1. Perceptible • Règle 1.1 : Les équivalents textuels : proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié. • Utiliser l’attribut « alt » des images et des vidéos • Ajouter des légendes • Si le contenu non-textuel est un champ d’entrée, ajouter des étiquettes textuelles • Si le contenu est un CAPTCHA, fournir un autre moyen de remplir son objectif • Si le contenu n’est pas informatif, faire en sorte qu’il soit ignoré par le matériel d’assistance

6. 1. Perceptible • Règle 1.1 (suite) • Si des images sont (partiellement) cliquables, l’élément <map> est utilisé et des informations textuelles sont fournies dans l’attribut « alt » de l’élément <area>

7. 1. Perceptible • Règle 1.2 : Média temporel : proposer des versions de remplacement aux médias temporels. • Utiliser l’attribut « alt » des contenus audios et vidéos • Ajouter des descriptions textuelles suffisantes de ces contenus • Ajouter des sous-titres aux vidéos

8. 1. Perceptible • Règle 1.3 : Adaptable : créer un contenu qui puisse être présenté de différentes manières sans perte d'information ni de structure (par exemple avec une mise en page simplifiée) • Utiliser un balisage sémantique approprié pour des modifications de mise en page • Utilise le balisage HTML (<title>, <h1>..<h6>) pour indiquer la structure (et pas seulement par facilité de mise en forme) • Séparer le contenu de la structure dans le code • Proposer un texte exprimant la même information qu’un contenu non-textuel (dans le texte ou avec l’attribut « longdesc ») • Lorsque l’ordre de présentation du contenu affecte sa signification, s’assurer que l’ordre de lecture correct peut être déterminé par un programme informatique adapté

9. 1. Perceptible • Règle 1.3 (suite) • Utiliser la balise <th> pour les tableaux, ainsi que les attributs « id » et « headers » pour associer les cellules et les en-têtes • Ne pas utiliser les tableaux pour la mise en page, préférer les CSS. N’utiliser les tableaux que pour les informations réellement tabulaires.

10. 1. Perceptible • Règle 1.4 : Distinguable : faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan • S’assurer que l’information véhiculée par des différences de couleurs est également disponible par un texte ou par d’autres indices visuels • S’assurer d’un contraste visuel suffisant entre le premier plan et l’arrière-plan, et entre les différentes informations • Si du son est présent sur une page pendant plus de 3 secondes, un mécanisme est disponible pour l’arrêter ou contrôler le volume • Tout texte peut être redimensionné jusqu’à au moins 200 %

11. 2. Utilisable • Règle 2.1 : Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier. • Il est possible de parcourir les formulaires de façon linéaire et logique avec l’utilisation des tabulations • Aucun rythme de frappe particulier n’est exigé à l’utilisateur • Il est possible d’entrer et de sortir de tout champ de saisie

12. 2. Utilisable • Règle 2.2 : Délai suffisant : laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu. • Si des limites de temps sont prévues, l’utilisateur peut les supprimer ou les ajuster avant de les rencontrer • Tout dispositif de déplacement, clignotement ou défilement peut être interrompu ou masqué, sauf s’il s’agit d’un élément essentiel à l’activité

13. 2. Utilisable • Règle 2.3 : Crises : ne pas concevoir de contenu susceptible de provoquer des crises. • Pas plus de trois flashs en une seconde (ou sous les seuils préconisés)

14. 2. Utilisable • Règle 2.4 : Navigable : fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site. • Ajouter des liens en haut de la page permettant d’accéder aux contenus distants • Présenter des titres aux pages et aux sections principales • Conserver le focus visible

15. 3. Compréhensible • Règle 3.1 : Lisible : rendre le contenu textuel lisible et compréhensible. • La langue de la page ou d’un passage peut être déterminée automatiquement (utiliser les attributs de langue des balises et des méta-données) • Un mécanisme est disponible pour apporter la définition des mots rares et des abréviations (utiliser l’élément <dl> ou des liens vers un glossaire) • Proposer un résumé simple aux contenus nécessitant une capacité de lecture plus avancée que le premier cycle de l’enseignement secondaire (collège)

16. 3. Compréhensible • Règle 3.2 : Prévisible : faire en sorte que les pages apparaissent et fonctionnent de manière prévisible. • Quand un composant reçoit le focus, il ne doit pas initier de changement de contexte (utiliser l’événement « activate » plutôt que « focus ») • Les mécanismes de navigation sont similaires dans l’ensemble du site (ordre et présentation) • Des composants ayant la même fonctionnalité sont identifiés de la même façon • Un changement de contexte n’est initié qu’à la demande de l’utilisateur, ou bien ce changement de contexte peut être désactivé par celui-ci

17. 3. Compréhensible • Règle 3.3 : Assistance à la saisie : aider l'utilisateur à éviter et à corriger les erreurs de saisie. • Si des champs de saisie sont obligatoires ou demandent un format spécifique, un texte explique clairement ces nécessités • Des suggestions sont proposées après une erreur • Une aide contextuelle est disponible

18. 4. Robuste • Règle 4.1 : Compatible : optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance. • La page Web est valide et conforme aux standards • Les attributs « title », « alt », « name » des boutons, images, liens, éléments de formulaires sont remplis

19. Si on résume Problèmes visuels Textes bien contrastés avec le fond Textes gros et/ou faciles à agrandir Pages compatibles avec des lecteurs d’écran Problèmes auditifs Retranscription (sous-titres) du contenu audio et vidéo Problèmes moteurs Accès par matériel spécialisé Problèmes cognitifs Faire simple et clair

20. L’essentiel • Structure : Créez du HTML valide et respectueux des standards • Images et animations : Utilisez l’attribut « alt» • Images cliquables : Utilisez l’élément <map> et décrivez les zones actives • Navigation : Facilitez le déplacement du focus au clavier, le saut de blocs avec des liens clairs • Multimédia : Fournissez des légendes, des transcriptions, des descriptions, des sous-titres • Liens hypertextes : Utilisez des énoncés pertinents hors contexte (pas « cliquez ici ») 20

21. L’essentiel • Organisation: Utilisez des têtes de section, des listes, une structure cohérente • Figures et diagrammes : Décrivez-les dans la page ou avec l’attribut « longdesc» • Scripts, applets, plug-ins : Fournissez une alternative • Cadres : Utilisez NOFRAMES (en fait, n’utilisez pas les cadres) • Tableaux : Utilisez la balise <tr> et les attributs « id » et « headers », facilitez la lecture ligne par ligne, résumez. • Validez (voir www.w3c.org/TR/WCAG) 21

22. Liens • Accessiweb : http://www.accessiweb.org/ • Web Accessibility Initiative : http://www.w3.org/WAI/ • Règles pour l’accessibilité du contenu Web (WCAG) : http://www.w3.org/Translations/WCAG20-fr/