Accessibilité du Web: méthodes d'évaluation rapide

1,614 views
1,510 views

Published on

Les techniques d'évaluation rapide de l'accessibilité numérique sont utiles à toutes les phases du projet: diagnostic, production, recette, vérification en continu...
Cette présentation de Jean-Pierre Villain, réalisée à la CRAW 2013, en tandem avec sa fille Shanni (15 ans) pour démontrer la simplicité des techniques, révèle quelques-unes des méthodes permettant d'optimiser le rendement d'un auditeur accessibilité.

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
  • Bonjour Vincent, et merci pour ce commentaire.
    Les titles de liens ont gagné du galon dans les WCAG2... On les y considère comme une des possibilités de créer un 'contexte' de lien pour le rendre plus explicite que par son seul contenu textuel.
    Dans la notion de pertinence, on va tester avant tout son utilité. Un title n'est pas pertinent s'il est vide, redondant, ou sans rapport avec le lien (cas fréquent des liens copiés-collés, puis modifiés au niveau des href et contenus, en oubliant de changer le title!). Il y a cependant des cas où rendre le texte du lien seul totalement explicite est problématique, et où le title sera le seul contournement satisfaisant. Je pense par exemple à une liste de documents téléchargeables dans une colonne étroite; les informations de format et de poids vont alourdir l'affichage au point de le rendre perturbant, et dans ce cas-là le title peut aider.
    Bien sûr ce n'est pas une panacée. Mais si on a décidé de le faire (en son âme et conscience!), alors il faut le faire correctement. C'est ce que vérifie ce test.
    ^ON
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Très intéressant et très utile comme première approche très concrète de l'évaluation.

    Je me demande pourquoi tu t'intéresses à la pertinence des attributs title pour les liens? J'ai toujours considéré les titles des liens (entre autres) comme inutiles en accessibilité? Aurais-je raté une évolution récente?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,614
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
36
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Accessibilité du Web: méthodes d'évaluation rapide

  1. 1. Accessibilité du WebMéthodes dévaluation rapideConférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013
  2. 2. A v a n t – p r o p o sRappel !Les outils de test automatiquessont utiles mais limités :- Uniquement la présence- 20 % des tests- Beaucoup de faux-positifsLes outils de testsautomatiques nepeuvent rien nousdire surlaccessibilitédun contenu.Disposer de méthodes permettant dévaluer rapidementlaccessibilité dun site est important dans plusieurs situations : En phase initiale, par exemple pour déterminer la meilleurestratégie pour aborder laccessibilité En phase daccompagnement pour pouvoir interagirrapidement avec les développements en cours. En phase de production pour évaluer ou valider rapidement lescontenus produits en interne ou proposés par des tiers En phase de qualification de contenus ou doutils deproduction produits par des prestataires extérieurs.Les méthodes proposées ici sappuient uniquement sur uneévaluation humaine en utilisant :- La web developer toolbar pour firefox- Le mode CSS désactivéCes méthodes sont reproductibles en utilisant dautres barresdoutils
  3. 3. Démonstrationde manipulations avec laWeb developper toolbar
  4. 4. ExemplesDe méthodes dévaluation rapides
  5. 5. A v a n t – p r o p o sRappel !Le mode CSS désactivé nest pasun mode de consultation.En revanche cest un excellentmode pour tester laccessibilitédes contenus.Le mode CSS désactivé offrent beaucoup davantages : Accès direct au contenu et la structure Affichage des contenus dynamiques masqués pas CSS Ordre réel du contenu Facilité dévaluation
  6. 6. Méthodes dévaluations rapidesImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> personnalisé -> IMG3. Entourer -> personnalisé -> A4. Images -> afficher les attributs ALTRechercher- Les images sans attribut ALT- Les liens-images avec des attributs ALT nul (alt="")- Les liens adjacents de description longue ou la présencedune description longue adjacenteEvaluer- Les alternatives dimages porteuses dinformation- Les images de décorationNavigation
  7. 7. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> personnalisé -> IFRAME3. Info-> afficher les attributs TITLERechercher- Les IFRAMES sans attribut TITLEEvaluer- Les titres données aux IFRAMESMéthodes dévaluations rapidesNavigation
  8. 8. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> tableaux -> TABLEAUX3. Entourer -> tableaux -> CAPTION4. Entourer -> tableaux -> CELLULES5. Entourer -> personnalisé-> THRechercher- Les tableaux de données sans titre- Les tableaux de données sans cellule den-tête- Labsence de cellule den-tête ou délément CAPTIONpour les tableaux de mise en formeEvaluer- La pertinence des titres de tableaux- La linéarisation des tableaux de mise en formeMéthodes dévaluations rapidesNavigation
  9. 9. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> personnalisé -> A3. Entourer -> personnalisé-> IMG4. Images -> Afficher les attributs ALTRechercher- Les liens vides- Les liens-images videsMéthodes dévaluations rapidesNavigation
  10. 10. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> personnalisé -> A3. Info -> Afficher les attributs TITLERechercher- Les TITLE inutilesEvaluer- La pertinences des TITLESMéthodes dévaluations rapidesNavigation
  11. 11. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer-> indiquer les balises3. Entourer -> personnalisé -> A4. Entourer -> personnalisé-> IMG5. Images -> Afficher les attributs ALT6. Entourer -> personnalisé -> PEvaluer- Le contexte des liens si les intitulés seuls ne sont passuffisamment explicites.Si aucun contexte de lien nest jugé suffisant :- 1. Entourer -> entourer les titres H1-H6- 2. évaluer la présence dun TITLE pertinent en survolantavec la souris.- La présence de liens identiquesMéthodes dévaluations rapidesNavigation
  12. 12. ImagesCadresTableauLiensStructureFormulaireParamètres1. Info -> afficher le plan du documentVérifier- La présence dun titre H1 au moins- Labsence de titre manquant dans la hiérarchie des titresParamètres1. CSS -> désactiver CSS2. Entourer -> entourer les titres H1-H6Evaluer- La présence des titres nécessaire à la structuration delinformation.- Note : ce test peut également être effectué CSS activépour une meilleure évaluationMéthodes dévaluations rapidesNavigation
  13. 13. ImagesCadresTableauLiensStructureFormulaireParamètres1. CSS -> désactiver CSS2. Entourer -> personnalisé -> FORM3. Entourer-> personnalisé -> LABEL4. Images -> afficher les attributs ALTVérifier- La présence des labels pour les champs de formulairesEn cas dabsence de label vérifier la présence dun titlepertinent en survolant le champ avec la souris.- La présence dun FIELDSET (cadre autour de champsregroupés) si nécessaire- La présence dune légende (LEGEND), texte à cheval sur unfieldsetEvaluer- La pertinence des labels ou des titles- La pertinence des noms des boutons de soumission (ou du titleassocié) ou des alternatives des boutons de type image.- La cohérence des labels de champs de même nature répétésplusieurs fois dans la page.Méthodes dévaluations rapidesNavigation
  14. 14. ImagesCadresTableauLiensStructureFormulaireNavigationParamètres1. CSS -> désactiver CSSVérifier- La présence de liens daccès rapides- Le fonctionnement des liens daccès rapidesMéthodes dévaluations rapides
  15. 15. Merci de votre attentionQelios – Accessibilité Numérique04 68 85 25 42http://qelios.net

×