Xavier Tannier Accessibilité

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

Programmation Web Accessibilité Xavier Tannier Quest-ce que laccessibilité ? 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) 3

Programmation Web Xavier Tannier Accessibilité 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 3. Compréhensible Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles 2. Utilisable Les composants de l'interface utilisateur et de navigation doivent être utilisables 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 4

Programmation Web Accessibilité Xavier Tannier 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 lattribut « alt » des images et des vidéos – Ajouter des légendes – Si le contenu non-textuel est un champ dentrée, ajouter des étiquettes textuelles – Si le contenu est un CAPTCHA, fournir un autre moyen de remplir son objectif – Si le contenu nest pas informatif, faire en sorte quil soit ignoré par le matériel dassistance 5

Programmation Web Accessibilité Xavier Tannier 1. Perceptible Règle 1.1 (suite) – Si des images sont (partiellement) cliquables, lélément est utilisé et des informations textuelles sont fournies dans lattribut « alt » de lélément 6

Programmation Web Accessibilité Xavier Tannier 1. Perceptible Règle 1.2 : Média temporel : proposer des versions de remplacement aux médias temporels. – Utiliser lattribut « alt » des contenus audios et vidéos – Ajouter des descriptions textuelles suffisantes de ces contenus – Ajouter des sous-titres aux vidéos 7

Programmation Web Accessibilité Xavier Tannier 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 (,.. ) 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 quun contenu non-textuel (dans le texte ou avec lattribut « longdesc ») – Lorsque lordre de présentation du contenu affecte sa signification, sassurer que lordre de lecture correct peut être déterminé par un programme informatique adapté 8

Programmation Web Accessibilité Xavier Tannier 1. Perceptible Règle 1.3 (suite) – Utiliser la balise 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. Nutiliser les tableaux que pour les informations réellement tabulaires. 9

Programmation Web Accessibilité Xavier Tannier 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 – Sassurer que linformation véhiculée par des différences de couleurs est également disponible par un texte ou par dautres indices visuels – Sassurer dun contraste visuel suffisant entre le premier plan et larriè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 larrêter ou contrôler le volume – Tout texte peut être redimensionné jusquà au moins 200 % 10

Programmation Web Accessibilité Xavier Tannier 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 lutilisation des tabulations – Aucun rythme de frappe particulier nest exigé à lutilisateur – Il est possible dentrer et de sortir de tout champ de saisie 11

Programmation Web Accessibilité Xavier Tannier 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, lutilisateur 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 sil sagit dun élément essentiel à lactivité 12

Programmation Web Accessibilité Xavier Tannier 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) 13

Programmation Web Accessibilité Xavier Tannier 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 daccéder aux contenus distants – Présenter des titres aux pages et aux sections principales – Conserver le focus visible 14

Programmation Web Accessibilité Xavier Tannier 3. Compréhensible Règle 3.1 : Lisible : rendre le contenu textuel lisible et compréhensible. – La langue de la page ou dun 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 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 lenseignement secondaire (collège) 15

Programmation Web Accessibilité Xavier Tannier 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 lensemble 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 nest initié quà la demande de lutilisateur, ou bien ce changement de contexte peut être désactivé par celui-ci 16

Programmation Web Accessibilité Xavier Tannier 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 17

Programmation Web Accessibilité Xavier Tannier 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 18

Programmation Web Xavier Tannier Accessibilité 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 19

Programmation Web Accessibilité Xavier Tannier Lessentiel 20 Structure : Créez du HTML valide et respectueux des standards Images et animations : Utilisez lattribut « alt » Images cliquables : Utilisez lélément 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

Programmation Web Accessibilité Xavier Tannier Lessentiel 21 Organisation : Utilisez des têtes de section, des listes, une structure cohérente Figures et diagrammes : Décrivez-les dans la page ou avec lattribut « longdesc » Scripts, applets, plug-ins : Fournissez une alternative Cadres : Utilisez NOFRAMES (en fait, nutilisez pas les cadres) Tableaux : Utilisez la balise et les attributs « id » et « headers », facilitez la lecture ligne par ligne, résumez. Validez (voir 21

Programmation Web Accessibilité Xavier Tannier Liens Accessiweb : Web Accessibility Initiative : Règles pour laccessibilité du contenu Web (WCAG) :