Upload
qelios
View
1.122
Download
1
Embed Size (px)
DESCRIPTION
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é.
Citation preview
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