SlideShare une entreprise Scribd logo
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 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
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 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
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
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
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
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
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
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
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
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
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 42
http://qelios.net

Contenu connexe

Plus de Qelios

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Qelios
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
Qelios
 
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Qelios
 
Rendre un portail accessible - journée Accessibilité de l’ADULOA
Rendre un portail accessible - journée Accessibilité de l’ADULOARendre un portail accessible - journée Accessibilité de l’ADULOA
Rendre un portail accessible - journée Accessibilité de l’ADULOA
Qelios
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Qelios
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Qelios
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du web
Qelios
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expert
Qelios
 
WCAG et l’accessibilité du Web
WCAG et l’accessibilité du WebWCAG et l’accessibilité du Web
WCAG et l’accessibilité du Web
Qelios
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Qelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
Qelios
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
Qelios
 

Plus de Qelios (12)

Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapesParis Web 2013 - Atelier, rendre une application accessible en quatre étapes
Paris Web 2013 - Atelier, rendre une application accessible en quatre étapes
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
 
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
Mesure de la conformité WCAG 2.0 via le référentiel AccessiWeb 2.2 avec HTML5...
 
Rendre un portail accessible - journée Accessibilité de l’ADULOA
Rendre un portail accessible - journée Accessibilité de l’ADULOARendre un portail accessible - journée Accessibilité de l’ADULOA
Rendre un portail accessible - journée Accessibilité de l’ADULOA
 
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à fairePrioriser les chantiers d'accessibilité numérique quand tout est à faire
Prioriser les chantiers d'accessibilité numérique quand tout est à faire
 
Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012Accessibilité des CMS: présentation Qelios au CMSDay 2012
Accessibilité des CMS: présentation Qelios au CMSDay 2012
 
Aria au pays du web
Aria au pays du webAria au pays du web
Aria au pays du web
 
Get the most out of your accessibility expert
Get the most out of your accessibility expertGet the most out of your accessibility expert
Get the most out of your accessibility expert
 
WCAG et l’accessibilité du Web
WCAG et l’accessibilité du WebWCAG et l’accessibilité du Web
WCAG et l’accessibilité du Web
 
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4AllMipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
Mipaw: Model for a Progressive Implementation of Web Accessibility - Web4All
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web (FEAN 2012)
 
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du WebMIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
MIPAW: Modèle d’Implémentation Progressive de l’Accessibilité du Web
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 

Dernier (7)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 

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

  • 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
  • 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