Éviter les erreurs les plus fréquentes en accessibilité du Web

Paris-Web 2010

16 octobre 2010

Mise en garde!

Quand j'entends Denis Boudreau, j'ai l'impression d'entendre Gerra imiter Céline Dion et son mari René.

Présentation

Denis Boudreau

Avis :
Déposé intégralement sous licence Creative Commons BY-ND.

Permalien :
http://accessibiliteweb.com/presentations/2010/parisweb/atelier-erreurs-accessibilite/

2003-2010 : Sept années d'évaluations

Constat : 3 types de problèmes

Du point de vue technique

A mené à la catégorisation suivante (selon WCAG 2.0)

  1. Contenu non-textuel (1.1)
  2. Média temporel (1.2)
  3. Perception de la structure (1.3)
  4. Formulaires (1.3)
  5. Tableaux de données (1.3)
  6. Ordre de lecture (1.3)
  7. Caractéristiques sensorielles (1.3)
  8. Utilisation de la couleur (1.4)
  9. Contrastes visuels et sonores (1.4)
  10. Présentation visuelle du texte (1.4)
  11. Accessibilité au clavier (2.1)
  12. Délai de consultation ou d'interaction (2.2)
  13. Prévention des crises (2.3)
  14. Accès au contenu principal (2.4)
  15. Soutien à la navigation (2.4)
  16. Ordre de tabulation correct (2.4)
  17. Clarification de la fonction des liens (2.4)
  18. Définition de la langue (3.1)
  19. Sens des mots rares et abréviations (3.1)
  20. Simplification de la langue (3.1)
  21. Changements de contexte (3.2)
  22. Proposition de navigation cohérente (3.2)
  23. Prévention des erreurs (3.3)
  24. Compatibilité avec les outils (4.1)

Les problèmes les plus fréquents

Références

Règles pour l'accessibilité des contenus Web (WCAG) 2.0 :
http://www.w3.org/Translations/WCAG20-fr/

Les règles d'accessibilité 2.0 :
http://www.accessibiliteweb.org/bdc/directives/regles-wcag-2.0

Équivalents textuels

Affecte les personnes avec des limitations visuelles ou des limitations auditives.

Navigation au clavier

Affecte les personnes avec des limitations visuelles, motrices, et cognitives.

Structure des contenus

Affecte les personnes avec des limitations visuelles, motrices, et cognitives.

Recours aux couleurs

Affecte les personnes avec des limitations visuelles.

Utilisation des formulaires

Affecte les personnes avec des limitations visuelles, motrices et cognitives.

Du point de vue fonctionnel

Au-delà des aspects techniques

À consulter!
WebAIM - Accessibility & Compatibility (on SlideShare)

Conformité != accessibilité
Pour tous les goûts!
Les outils d'adaptation
Se substituer à de « vrais utilisateurs »?
Valeur des équivalents textuels

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?

Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.

À favoriser. alt="Stéphane Deschamps, Éric Daspet, Adrien Leygues."

À favoriser. alt="Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues."

À éviter. 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?
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
Exemples

Sans équivalent textuel et sans image, que reste t-il?

Une entrevue avec les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.

À éviter. <a href="fondateurs.php"><img src="fonds.png" alt="Stéphane Deschamps, Éric Daspet, Adrien Leygues." /></a>

À éviter. <a href="fondateurs.php"><img src="fonds.png" alt="" /></a>

À favoriser. <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>

Éviter la redondance
Exemple 1

Liens textuels et liens images adjacents

Les fondateurs de ParisWeb, Stéphane Deschamps, Éric Daspet et Adrien Leygues.

À éviter. <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>

À favoriser. <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.

À éviter. <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.

À favoriser. <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.

Dissimulation du contenu
Exemples

.dissimuler {position: absolute; top: -10px;}
.cacher {position: absolute; left: -9999px;}

Sans souris, point de salut!

Denis Boudreau (@dboudreau) Hover is dead. Most unusable to everything but the mouse. Dont rely on title attribute or onmouseover to display content. #a11ySummit

Cohérence de l'ordre de lecture
Exemple

Au-delà des apparences...

Liste d'universités
Université Bishop's Université Concordia Université Laval
Sherbrooke : (819) 822-9600 Montréal : (514) 848-2424 Québec : (418) 656-3333
Université McGill Université de Montréal Université du Québec
Montréal : (514) 398-4455 Montréal : (514) 343-6111 Québec : (418) 657-3551
Les limites de @title
Liens de contournement
Exemples

a#sauter {position:absolute; left:-9999px; top:auto;}
a#sauter:focus {position: static;}

Préserver le focus à la navigation
Exemple

a:focus, a:hover
{outline:1px; background:#ccc; text-decoration:underline;}

Du point de vue gestion

#epicFails! Faut-il se surprendre?

Prévenir plutôt que guérir

Pièges communs

L'approche d'AccessibilitéWeb

Accessibilité et chaîne de production

L'accessibilité s'intègre à chaque étape

Répartition des critères de succès de WCAG 2.0

Contrôle qualité (rondes itératives)

Gestion de projet

Exemple de grille

Exemple de grille de contrôle

Exploiter des grilles de contrôle

Une méthode itérative et « agile »

Au-delà des grilles de contrôle...

Les pires erreurs sont-elles techniques?

Conforme c'est bien... mais accessible, c'est mieux! Paris-Web. Les utilisateurs avant les standards! Conformité ne signifie pas accessibilité

Flickr : Street Protest TV

Suggestions de lecture

Répartir WCAG 2.0 dans votre chaîne de production Web :
http://accessibiliteweb.com/fr/accessibilite/repartitions/wcag20/

Conseils d'accessibilité :
http://accessibiliteweb.com/fr/accessibilite/conseils/

Merci de votre attention!

Denis Boudreau,
Président

Coopérative AccessibilitéWeb
1751 rue Richardson, bureau 6111
Montréal (Québec), Canada H3K 1G6
Téléphone : +1 877.315.5550

Courriel : info@accessibiliteweb.com
Web : www.accessibiliteweb.com
Blogue : www.accessiblogue.com
Twitter : @AccessibiliteWb / @dboudreau

Permalien :
http://accessibiliteweb.com/presentations/2010/parisweb/atelier-erreurs-accessibilite/