Inspecter chaque page humainement : activités

< Retour au sommaire

Sommaire des activités

1. Naviguer au clavier ?
2. Agrandir le texte
3. Déconstruire la page web
4. Tester les formulaires
5. Auditer avec le RGAA
6. Pertinence du titre de page
7. Pertinence des alternatives aux images
8. Pertinence des titres
9. Pertinence des transcripts
10. Auditer avec le RGAA
11. First Easy Checks
12. 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

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

Question 1

É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

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

Question 1

Objectif : vérifier que le texte reste lisible lorsque la taille des caractères est augmentée jusqu'à 200 %, au moins.

1. Ouvrir la page à tester dans Firefox
2. 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.
3. Le texte de la page reste-t-il lisible ?
4. Revenir à l’affichage « normal » puis réduire le texte six fois. Le texte de la page reste-t-il lisible ?
5. Si oui, le test est validé, sinon le test est invalidé.

Déconstruire la page web

Mise en situation

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

Désactiver JavaScript :

1. Dans le menu « Désactiver » de l’extension Web Developper, sélectionner « Désactiver JavaScript > tout le JavaScript ».
2. Rafraîchissez la page.

Que se passe-t-il ? Les animations (carrousels, sliders et peut-être vidéo) se figent ou disparaissent…

L’information reste-t-elle compréhensible ?

Inutile de poursuivre les tests. Réactivez JavaScript et recommencez, pour l’intérêt de cette activité, à partir d'une autre page.

Il faudra apprécier leur accessibilité par des tests plus pointus, mais vous pouvez poursuivre les tests.

Passez au test suivant.

Question 2

Désactiver les images :

1. Dans le menu « Images » de l’extension Web Developper, sélectionner « Désactiver les images »

Que se passe-t-il ? Les images disparaissent et sont remplacées par leurs alternatives textuelles. C’est ainsi qu’une page s’affiche lorsque ses images n’ont pas eu le temps de charger, comme cela arrive avec une mauvaise connexion internet.

L’information reste-t-elle compréhensible ?

Passez au test suivant.

Question 3

Désactiver les styles CSS :

1. Dans le menu « CSS » de l’extension Web Developper, sélectionner « Désactiver les styles css > tous les styles ».

Que se passe-t-il ? La page s’affiche « nue », déshabillée des instructions de mise en forme visuelle. C’est ainsi qu’une page s’affiche lorsque ses styles n’ont pas eu le temps de charger, comme par exemple en basse connexion, comme cela vous est peut-être déjà arrivé en naviguant sur le Web.

L’information reste-t-elle compréhensible ?

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

Mise en situation

Choisissez une page web présentant un formulaire simple, par exemple un formulaire de contact, et ouvrez-la dans le navigateur Firefox.

Question 1

Tester les erreurs

Commencez par valider le formulaire, vierge, sans effectuer la moindre saisie. Que se passe-t-il ?

Question 2

Tester les labels

Qu’il s’agisse d’un champ textuel, d’un bouton radio ou de cases à cocher, chaque champ doit être associé à une consigne, appelée « label » (= étiquette). Ce label doit être cliquable. Le cliquer permet d’activer le champ associé.

• Cliquez le label d’un champ texte.
  Que se passe-t-il ?
• Cliquez le label d’un bouton radio.
  Que se passe-t-il ?

Auditer avec le RGAA

Question 1

Reprenons la liste de critères et tests du RGAA.

Parmi les manipulations précédentes, lesquelles utilisez-vous pour effectuer chacun des tests suivants du référentiel :

Test 10.3.1 :

Test 10.7.1 :

Test 11.4.1 :

Pertinence du titre de page

Vous avez précédemment vérifié la présence d’un titre de page, sur chaque page. Mais celui-ci est-il pertinent ?

1. Ouvrir la page à tester dans Firefox
2. Afficher le code source de la page, en pressant le raccourci-clavier « Ctrl+U »
3. Dans le code source, repérer la balise <title>, qui contient le titre de page.
4. Ce titre de la page est-il pertinent ?
   Est-il unique dans le site ?
5. Si c’est le cas le test est validé, sinon le test est invalidé.

Pertinence des alternatives aux images

Vous avez précédemment vérifié la présence d’un attribut « alt » dans chaque image. Mais chaque alternative textuelle est-elle pertinente ?

1. Ouvrir la page à tester dans Firefox
2. Dans le menu « Images » de l’extension Web Developper, sélectionner « Afficher les attributs alt ».
3. Les textes alternatifs sont-ils pertinents ?
4. Si c’est le cas le test est validé, sinon le test est invalidé.

Pertinence des titres

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 ?

1. Ouvrir la page à tester dans Firefox
2. dans le menu « Infos » de l’extension Web Developper, sélectionner « Plan du document »
3. 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 ?
4. Si c’est le cas le test est validé, sinon le test est invalidé.

Pertinence des transcripts

Rendez-vous sur les pages suivantes et appréciez la pertinence des descriptions détaillées et transcriptions textuelles proposés. À votre avis, lesquels doivent être corrigés ?

	a) « L'accessibilité : une priorité du Gouvernement » (25/09/2014) sur le site gouvernement.fr : http://www.gouvernement.fr/partage/1765-5j5q-neuville-jour-1
	b) « Le veuvage : rompre le silence » sur le site dialogueetsolidarite.asso.fr : http://www.dialogueetsolidarite.asso.fr/le-veuvage-et-le-deuil/le-veuvage-rompre-le-silence
	c) « Les chiffres clés » sur le site dondorganes.fr : http://www.dondorganes.fr/016-les-chiffres-cles

Auditer avec le RGAA

Question 1

Reprenons la liste de critères et tests du RGAA.

Parmi les manipulations précédentes, lesquelles utilisez-vous pour effectuer chacun des tests suivants du référentiel :

Test 8.6.1 :

Test 1.3.1 :

Test 9.1.2 :

First Easy Checks

Exploration

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

Exploration

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.

< Précédent | Suivant >