Éviter les erreurs les plus fréquentes en accessibilité du Web
Paris-Web 2010
16 octobre 2010
Mise en garde!
2003-2010 : Sept années d'évaluations
- Plus de 850 évaluations de sites Web
- Différents projets ou différents clients
- Évaluations techniques et fonctionnelles
- Intégration progressive :
- Selon les standards en vigueur au Québec
Constat : 3 types de problèmes
- Des tendances lourdes
- Des problèmes importants
- Besoin d'encadrement aux niveaux :
- technique
- fonctionnel
- gestion
- Comment améliorer le portrait?
Du point de vue technique
A mené à la catégorisation suivante (selon WCAG 2.0)
- Contenu non-textuel (1.1)
- Média temporel (1.2)
- Perception de la structure (1.3)
- Formulaires (1.3)
- Tableaux de données (1.3)
- Ordre de lecture (1.3)
- Caractéristiques sensorielles (1.3)
- Utilisation de la couleur (1.4)
- Contrastes visuels et sonores (1.4)
- Présentation visuelle du texte (1.4)
- Accessibilité au clavier (2.1)
- Délai de consultation ou d'interaction (2.2)
- Prévention des crises (2.3)
- Accès au contenu principal (2.4)
- Soutien à la navigation (2.4)
- Ordre de tabulation correct (2.4)
- Clarification de la fonction des liens (2.4)
- Définition de la langue (3.1)
- Sens des mots rares et abréviations (3.1)
- Simplification de la langue (3.1)
- Changements de contexte (3.2)
- Proposition de navigation cohérente (3.2)
- Prévention des erreurs (3.3)
- Compatibilité avec les outils (4.1)
Équivalents textuels
Affecte les personnes avec des limitations visuelles ou des limitations auditives.
- Balise
<img> et attributs associés
- Rendre en texte les contenus non-textuels?
- Un équivalent textuel?
- Un texte de remplacement?
- Une description?
Navigation au clavier
Affecte les personnes avec des limitations visuelles, motrices, et cognitives.
- Parcours au clavier :
- vérifier l'ordre des contenus
- valider l'ordre de tabulation
- assurer le repérage du focus
- Gestionnaires d'événements
- Indépendance face aux périphériques?
- Compatible avec l'accessibilité?
Structure des contenus
Affecte les personnes avec des limitations visuelles, motrices, et cognitives.
- Rôle unique des balises HTML
- En-têtes de section
<h1> à <h6>
- Listes
<ul> et <ol>
- Respect de la sémantique HTML?
Recours aux couleurs
Affecte les personnes avec des limitations visuelles.
- Info transmise que par la couleur
- Contrastes visuels inadéquats
- Perception sensorielle unique?
Utilisation des formulaires
Affecte les personnes avec des limitations visuelles, motrices et cognitives.
- Organisation du formulaire
- Ordre de tabulation correct
<label for="">, <input id="">...
- Regroupements avec
<fieldset>, <legend>
- Subdivisions des blocs avec
<hx>
- Proximité des étiquettes et des champs
- Prise en charge des erreurs?
Du point de vue fonctionnel
- Compatibilité au-delà des standards
- Éclairer les zones grises
- Détecter l'indétectable
- « Voir » avec ses oreilles
- Tester, tester, tester...
Au-delà des aspects techniques
- L'accessibilité, plus que des cases à cocher
- une démarche bi-directionnelle
- Les listes de contrôle assurent les bases :
- ne sont que des outils
- ne garantissent pas l'accessibilité
À consulter!
WebAIM - Accessibility & Compatibility (on SlideShare)
Conformité != accessibilité
- Quel est l'objectif poursuivi?
- Rejoindre le plus grand nombre?
- Répondre à des exigences?
- Éviter les poursuites?
Pour tous les goûts!
- Des sites conformes, oui mais :
- totalement inaccessibles
- techniquement accessibles
- fonctionnellement accessibles
- Comment bien faire les choses?
Les outils d'adaptation
- Identifier et combler les lacunes
- Utiliser ou simuler les mêmes outils :
- lecteurs d'écran (au choix!)
- progiciels de grossissement
- extensions dans les navigateurs
Se substituer à de « vrais utilisateurs »?
- Tester au-delà des critères de succès
- Peut-on prétendre les handicaps?
- Connaître ses limites de testeur
- Faire appel aux bonnes personnes
- Faire intervenir de « vrais » utilisateurs?
Valeur des équivalents textuels
- Comment bien saisir la valeur d'un
@alt?
- Assez mal défini dans WCAG 2.0
- Rarement une description de l'image
- Court, axé sur le contenu ou la fonction
Question Quiz!
Quel @alt pour cette loupe? 
Bonnes pratiques pour l'utilisation de @alt :
HTML5: Techniques for providing useful text alternatives
Exemple
Quelle est l'information réellement pertinente?
alt="Stéphane Deschamps, Éric Daspet, Adrien Leygues."
alt="Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues."
alt="Montage photo en noir et blanc de trois magnifiques barbus dans la trentaine. Le premier, songeur, contemple une scène hors-champ à sa gauche en se mordillant nerveusement la lèvre inférieure. Celui du centre fixe amicalement la caméra, en souriant avec confiance. Le troisième regarde vers sa droite, un engageant sourire en coin."
Note :
Trop d'information tue l'information...
Images décoratives ou informatives?
- Distinguer les deux types d'images :
- demande un certain jugement
- Minimum acceptable (
alt="") :
- images décoratives dans le HTML
- cacher une image aux lecteurs d'écran
Exemple
Décorative ou informative? Tout dépend du contexte!
Photo d'une borne de vélos en usage libre, à Paris (Flickr : Florence.S).
Décorative, si destinée à faire joli dans un texte portant sur la vie de quartier parisienne. Gagnerait à être intégrée au HTML avec un @alt vide (alt="") ou dans la CSS car elle n'apporte aucune information supplémentaire pertinente.
Informative, si destinée à appuyer un article portant sur les Vélibs. Gagnerait à être intégrée au HTML avec un @alt bien renseigné pour décrire textuellement la photo en question (en support au contenu).
alt="Une nouvelle borne Vélib pour les résidants de l'arrondissement."
Image comme seul contenu d'un lien
@alt primordial dans ce contexte
- Sans image, quel reste t-il de l'hyperlien?
- La valeur du
@alt compense l'image
- Un
@alt représentant d'abord la fonction
- Reprend au moins le contenu textuel
- Assure la compréhension du mécanisme
Exemples
Sans équivalent textuel et sans image, que reste t-il?
<a href="fondateurs.php"><img src="fonds.png" alt="Stéphane Deschamps, Éric Daspet, Adrien Leygues." /></a>
<a href="fondateurs.php"><img src="fonds.png" alt="" /></a>
<a href="fondateurs.php"><img src="fonds.png" alt="Une entrevue avec les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues." /></a>
Un @alt laissé vide dans un lien équivaut à :
<a href="commander.php"></a>
Exemple 1
Liens textuels et liens images adjacents
Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.
<a href="/fondateurs.php"><img src="fonds.png" alt="Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues." /></a> <a href="/fondateurs.php">Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.</a>
<a href="/fondateurs.php"><img src="fonds.png" alt="" /> Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.</a>
Exemple 2
Images accompagnées d'une légende
Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.
<img src="fonds.png" alt="Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues." /> Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.
<img src="fonds.png" alt="" /> Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.
Note :
Faire gaffe aux légendes venant se placer entre deux morceaux de contenu et qui pourraient en altérer/modifier la compréhension.
