View
110
Download
2
Category
Preview:
Citation preview
Xavier Tannierxavier.tannier@limsi.fr
Accessibilité
Programmation Web
AccessibilitéXavier Tannier
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.
2
Programmation Web
AccessibilitéXavier Tannier
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)
3
Programmation WebXavier 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. PerceptibleL'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 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
5
Programmation Web
AccessibilitéXavier Tannier
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>
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 l’attribut « 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 (<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é
8
Programmation Web
AccessibilitéXavier Tannier
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.
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– 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 %
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
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
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, 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é
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 d’accé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 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)
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 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
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 WebXavier Tannier
Accessibilité
Si on résume
Problèmes visuels
Textes bien contrastés avec le fond
Textes gros et/ou faciles à agrandirPages 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
L’essentiel
20
• 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
Programmation Web
AccessibilitéXavier Tannier
L’essentiel
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 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
Programmation Web
AccessibilitéXavier Tannier
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/
22
Recommended