Accessibilité du Web

Méthodes d'évaluation rapide

Conférence Romande sur l’Accessibilité du Web – Lausanne – Avril 2013

A v a n t – p r o p o sRappel !

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

Démonstration

de manipulations avec la Web developper toolbar

Exemples

De méthodes d'évaluation rapides

A v a n t – p r o p o sRappel !

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

Méthodes d'évaluations rapides

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> personnalisé -> IMG3. Entourer -> personnalisé -> A4. 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

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> personnalisé -> IFRAME3. Info-> afficher les attributs TITLE

Rechercher

- Les IFRAMES sans attribut TITLE

Evaluer

- Les titres données aux IFRAMES

Méthodes d'évaluations rapides

Navigation

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> tableaux -> TABLEAUX3. Entourer -> tableaux -> CAPTION4. Entourer -> tableaux -> CELLULES5. 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

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> personnalisé -> A3. Entourer -> personnalisé-> IMG4. Images -> Afficher les attributs ALT

Rechercher

- Les liens vides- Les liens-images vides

Méthodes d'évaluations rapides

Navigation

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> personnalisé -> A3. Info -> Afficher les attributs TITLE

Rechercher

- Les TITLE inutiles

Evaluer

- La pertinences des TITLES

Méthodes d'évaluations rapides

Navigation

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer-> indiquer les balises3. Entourer -> personnalisé -> A4. Entourer -> personnalisé-> IMG5. Images -> Afficher les attributs ALT6. 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

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

Images

Cadres

Tableau

Liens

Structure

Formulaire

Paramètres

1. CSS -> désactiver CSS2. Entourer -> personnalisé -> FORM3. Entourer-> personnalisé -> LABEL4. Images -> afficher les attributs ALT

Vérifier

- La présence des labels pour les champs de formulairesEn 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

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

Merci de votre attention

Qelios – Accessibilité Numérique

04 68 85 25 42http://qelios.net