Xavier Tannier [email protected] Accessibilité

Xavier [email protected]

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

http://www.accessiweb.org/

http://www.w3.org/WAI/

http://www.w3.org/Translations/WCAG20-fr/

Documents

Xavier Tannier [email protected] Accessibilité