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

1. Accessibilité du Web
Méthodes d'évaluation rapide
Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013

2. A v a n t – p r o p o s
Rappel !
Les outils de test automatiques
sont utiles mais limités :
- Uniquement la présence
- 20 % des tests
- Beaucoup de faux-positifs
Les outils de tests
automatiques ne
peuvent rien nous
dire sur
l'accessibilité
d'un contenu.
Disposer de méthodes permettant d'évaluer rapidement
l'accessibilité d'un site est important dans plusieurs situations :
 En phase initiale, par exemple pour déterminer la meilleure
stratégie pour aborder l'accessibilité
 En phase d'accompagnement pour pouvoir interagir
rapidement avec les développements en cours.
 En phase de production pour évaluer ou valider rapidement les
contenus produits en interne ou proposés par des tiers
 En phase de qualification de contenus ou d'outils de
production produits par des prestataires extérieurs.
Les méthodes proposées ici s'appuient 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 d'autres barres
d'outils

3. Démonstration
de manipulations avec la
Web developper toolbar

4. Exemples
De méthodes d'évaluation rapides

5. A v a n t – p r o p o s
Rappel !
Le mode CSS désactivé n'est pas
un mode de consultation.
En revanche c'est un excellent
mode pour tester l'accessibilité
des contenus.
Le mode CSS désactivé offrent beaucoup d'avantages :
 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. Méthodes d'évaluations rapides
Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> personnalisé -> IMG
3. Entourer -> personnalisé -> A
4. Images -> afficher les attributs ALT
Rechercher
- Les images sans attribut ALT
- Les liens-images avec des attributs ALT nul (alt="")
- Les liens adjacents de description longue ou la présence
d'une description longue adjacente
Evaluer
- Les alternatives d'images porteuses d'information
- Les images de décoration
Navigation

7. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> personnalisé -> IFRAME
3. Info-> afficher les attributs TITLE
Rechercher
- Les IFRAMES sans attribut TITLE
Evaluer
- Les titres données aux IFRAMES
Méthodes d'évaluations rapides
Navigation

8. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> tableaux -> TABLEAUX
3. Entourer -> tableaux -> CAPTION
4. Entourer -> tableaux -> CELLULES
5. Entourer -> personnalisé-> TH
Rechercher
- Les tableaux de données sans titre
- Les tableaux de données sans cellule d'en-tête
- L'absence de cellule d'en-tête ou d'élément CAPTION
pour les tableaux de mise en forme
Evaluer
- La pertinence des titres de tableaux
- La linéarisation des tableaux de mise en forme
Méthodes d'évaluations rapides
Navigation

9. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> personnalisé -> A
3. Entourer -> personnalisé-> IMG
4. Images -> Afficher les attributs ALT
Rechercher
- Les liens vides
- Les liens-images vides
Méthodes d'évaluations rapides
Navigation

10. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> personnalisé -> A
3. Info -> Afficher les attributs TITLE
Rechercher
- Les TITLE inutiles
Evaluer
- La pertinences des TITLES
Méthodes d'évaluations rapides
Navigation

11. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer-> indiquer les balises
3. Entourer -> personnalisé -> A
4. Entourer -> personnalisé-> IMG
5. Images -> Afficher les attributs ALT
6. Entourer -> personnalisé -> P
Evaluer
- Le contexte des liens si les intitulés seuls ne sont pas
suffisamment explicites.
Si aucun contexte de lien n'est jugé suffisant :
- 1. Entourer -> entourer les titres H1-H6
- 2. évaluer la présence d'un TITLE pertinent en survolant
avec la souris.
- La présence de liens identiques
Méthodes d'évaluations rapides
Navigation

12. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. Info -> afficher le plan du document
Vérifier
- La présence d'un titre H1 au moins
- L'absence de titre manquant dans la hiérarchie des titres
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> entourer les titres H1-H6
Evaluer
- La présence des titres nécessaire à la structuration de
l'information.
- Note : ce test peut également être effectué CSS activé
pour une meilleure évaluation
Méthodes d'évaluations rapides
Navigation

13. Images
Cadres
Tableau
Liens
Structure
Formulaire
Paramètres
1. CSS -> désactiver CSS
2. Entourer -> personnalisé -> FORM
3. Entourer-> personnalisé -> LABEL
4. Images -> afficher les attributs ALT
Vérifier
- La présence des labels pour les champs de formulaires
En cas d'absence de label vérifier la présence d'un title
pertinent en survolant le champ avec la souris.
- La présence d'un FIELDSET (cadre autour de champs
regroupés) si nécessaire
- La présence d'une légende (LEGEND), texte à cheval sur un
fieldset
Evaluer
- La pertinence des labels ou des titles
- La pertinence des noms des boutons de soumission (ou du title
associé) ou des alternatives des boutons de type image.
- La cohérence des labels de champs de même nature répétés
plusieurs fois dans la page.
Méthodes d'évaluations rapides
Navigation

14. Images
Cadres
Tableau
Liens
Structure
Formulaire
Navigation
Paramètres
1. CSS -> désactiver CSS
Vérifier
- La présence de liens d'accès rapides
- Le fonctionnement des liens d'accès rapides
Méthodes d'évaluations rapides

15. Merci de votre attention
Qelios – Accessibilité Numérique
04 68 85 25 42
http://qelios.net