Inspecter chaque page humainement : activités
Sommaire des activités
[modifier | modifier le wikicode]- Naviguer au clavier ?
- Agrandir le texte
- Déconstruire la page web
- Tester les formulaires
- Auditer avec le RGAA
- Pertinence du titre de page
- Pertinence des alternatives aux images
- Pertinence des titres
- Pertinence des transcripts
- Auditer avec le RGAA
- First Easy Checks
- Aller plus loin avec la synthèse vocale
Il s’agit moins d’activités de mise en situation que de modes d’emploi pour savoir effectuer des tests, vous laissant libre de les appliquer sur les pages de votre choix.
Prérequis : poste équipé du navigateur Firefox complété du module « Web Developer Toolbar », à installer depuis cette adresse : http://chrispederick.com/work/web-developer/
Mise en situation
[modifier | modifier le wikicode]Nous allons effectuer quelques tests assez simples, pour lesquels il n’est pas nécessaire d’ausculter le code.
Ceux-ci peuvent s’effectuer sur n’importe quelle page web publiée en ligne. Et comme nous allons le voir, ils sont très simples à réaliser.
Prenez votre temps pour réaliser ces tests et n’hésitez pas à être curieux.
Naviguer au clavier
[modifier | modifier le wikicode]Question 1
[modifier | modifier le wikicode]Éloignez votre souris pour un temps et tentez de naviguer sur le site en n'utilisant que le clavier. Cachez-la dans un tiroir pour ne pas l’utiliser par réflexe.
1. Ouvrir la page à tester dans le navigateur Firefox
2. Comment naviguer au clavier dans la page ?
- La touche « tab » permet de sauter d’un lien à l’autre, d’un champ de formulaire à l’autre…
- Le raccourci « Shift+tab » permet de rebrousser chemin.
- La touche « enter » permet d’activer le lien ainsi atteint.
3. Chaque élément atteint (lien, champ de saisie, etc.) « s’allumant », vous devez pouvoir suivre du regard vos déplacements. Est-ce bien le cas ?
4. Les menus déroulants, en ruban, en accordéons, ainsi que les carrousels, etc. doivent être également manipulables au clavier, en utilisant éventuellement les flèches du pavé numérique. Sont-ils navigables ?
Remarque importante : il vous sera peut-être nécessaire de modifier les réglages de votre navigateur pour « utiliser les touches de navigation pour se déplacer à l'intérieur d'une page » car cette option est parfois désactivée par défaut sur Firefox.
Comment se passe l'expérience ? Le site doit être entièrement navigable et utilisable au clavier, sans la souris.
Si ce n’est pas le cas, le test est invalidé.
Exploration
[modifier | modifier le wikicode]Pour comparer, voici des exemples de sites où vous pouvez naviguer au clavier agréablement :
- http://www.dila.premier-ministre.gouv.fr
- http://www.gov.uk
- http://www.usa.gov
- http://www.cuisine-libre.fr
- http://www.lesintegristes.net/2009/09/13/hover-vs-active/
Agrandir le texte
[modifier | modifier le wikicode]Question 1
[modifier | modifier le wikicode]Objectif : vérifier que le texte reste lisible lorsque la taille des caractères est augmentée jusqu'à 200 %, au moins.
- Ouvrir la page à tester dans Firefox
- Dans le menu « Affichage », « Zoom », sélectionner « Zoom texte seulement » puis agrandir le texte six fois. C’est un « zoom textuel » qui s’applique alors, et non le « zoom graphique » devenu habituel : seul le texte est agrandi, pas l’habillage graphique de la page.
- Le texte de la page reste-t-il lisible ?
- Revenir à l’affichage « normal » puis réduire le texte six fois. Le texte de la page reste-t-il lisible ?
- Si oui, le test est validé, sinon le test est invalidé.
Déconstruire la page web
[modifier | modifier le wikicode]Mise en situation
[modifier | modifier le wikicode]Un premier test, assez amusant parce que souvent spectaculaire, consiste à déconstruire la page web consultée. La déconstruire ainsi pas à pas, permet deux choses :
- révéler comment elle est construite et donc apprécier si cela est bien fait ;
- simuler différentes situations de consultation et donc apprécier sa robustesse dans des conditions dégradées de consultation.
La question que vous devez vous poser à chaque étape est : « l’information reste-t-elle compréhensible ? »
Commencez par ouvrir la page à tester dans le navigateur Firefox.
Question 1
[modifier | modifier le wikicode]
Question 2
[modifier | modifier le wikicode]
Question 3
[modifier | modifier le wikicode]
Avant de poursuivre ou de recommencer l’un de ces tests, pensez à réactiver tout ce que vous venez de désactiver.
Tester les formulaires
[modifier | modifier le wikicode]Mise en situation
[modifier | modifier le wikicode]Choisissez une page web présentant un formulaire simple, par exemple un formulaire de contact, et ouvrez-la dans le navigateur Firefox.
Question 1
[modifier | modifier le wikicode]
Question 2
[modifier | modifier le wikicode]
Auditer avec le RGAA
[modifier | modifier le wikicode]Question 1
[modifier | modifier le wikicode]
Pertinence du titre de page
[modifier | modifier le wikicode]Vous avez précédemment vérifié la présence d’un titre de page, sur chaque page. Mais celui-ci est-il pertinent ?
- Ouvrir la page à tester dans Firefox
- Afficher le code source de la page, en pressant le raccourci-clavier « Ctrl+U »
- Dans le code source, repérer la balise <title>, qui contient le titre de page.
- Ce titre de la page est-il pertinent ?
Est-il unique dans le site ? - Si c’est le cas le test est validé, sinon le test est invalidé.
Pertinence des alternatives aux images
[modifier | modifier le wikicode]Vous avez précédemment vérifié la présence d’un attribut « alt » dans chaque image. Mais chaque alternative textuelle est-elle pertinente ?
- Ouvrir la page à tester dans Firefox
- Dans le menu « Images » de l’extension Web Developper, sélectionner « Afficher les attributs alt ».
- Les textes alternatifs sont-ils pertinents ?
- Si c’est le cas le test est validé, sinon le test est invalidé.
Pertinence des titres
[modifier | modifier le wikicode]Vous avez précédemment vérifié la présence de titres dans la page. Mais ceux-ci sont-ils utilisés de façon pertinente ?
- Ouvrir la page à tester dans Firefox
- dans le menu « Infos » de l’extension Web Developper, sélectionner « Plan du document »
- Le plan du document extrait les titres de la page : leurs intitulés sont-ils pertinents ? leur hiérarchie est-elle cohérente ? Leur lecture seule permet-elle de comprendre de quoi parle cette page ?
- Si c’est le cas le test est validé, sinon le test est invalidé.
Pertinence des transcripts
[modifier | modifier le wikicode]
Auditer avec le RGAA
[modifier | modifier le wikicode]Question 1
[modifier | modifier le wikicode]
First Easy Checks
[modifier | modifier le wikicode]Exploration
[modifier | modifier le wikicode]Si vous souhaitez aller plus loin dans l’évaluation autonome de l’accessibilité, vous pouvez consulter cette page de référence du W3C (en anglais) : « Easy Checks - A First Review of Web Accessibility » : http://www.w3.org/WAI/eval/preliminary
Aller plus loin avec la synthèse vocale
[modifier | modifier le wikicode]Exploration
[modifier | modifier le wikicode]Si vous souhaitez aller plus loin, utilisez une synthèse vocale. En effet, la meilleure façon de vérifier l’accessibilité des contenus de votre page est de la faire lire par une synthèse vocale.
De plus en plus d’ordinateurs en sont équipés nativement. C’est le cas des Macintosh et des iPhone, qui sont donc très appréciés des utilisateurs malvoyants.
Sur PC, Windows intègre un moteur de synthèse vocale, permettant de lire n’importe quel texte mais ne propose pas d'utilitaire pour le gérer facilement. Il vous faudra donc télécharger et installer un logiciel. Le plus courant est Jaws, mais il en existe d’autres, libres et gratuits.