Click here to read the english version

Outil d'évaluation de l'accessibilité Web (et plus).

• Auteur : Tanaguru
• Projet : Tanaguru Webextension (Firefox et Chrome)
• Date de rédaction du document : 26/02/2018
• Date de mise à jour du document : 30/07/2021

• Installer la webextension
• Utiliser la webextension
• Ecrire un test
• Mettre à jour le numéro de version

1. Télécharger ou cloner le projet ici : répertoire du projet
2. Pour installer la webextension, vous aurez besoin de télécharger et installer Node.js. Page de téléchargement de Node.js
3. Installer les dépendances du projet et effectuer le "build" :
   • accéder au dossier racine du projet avec un terminal (powershell, git bash...) ou ouvrez le projet avec votre éditeur de code et lancez le terminal.
   • envoyez ces 2 commandes dans le terminal :

npm install
npm run-script build

4. Installation sur Firefox

Pour installer la webextension, dans la barre d’adresse de Firefox 57 ou supérieur, saisissez « about:debugging ». La page « Modules » s’affiche :

Sur cette page, activez le lien « Ce Firefox ».

Sur cette page, activez le bouton « Charger un module temporaire ». Une boîte de dialogue de fichier s’affiche alors. Depuis cette boîte, sélectionnez sur votre disque local, le fichier « manifest.json » dans le dossier "/webextension/dist/firefox/tanaguru-rgaa4-firefox-1.3.0" pour la version RGAA ou "/webextension/dist/firefox/tanaguru-wcag-firefox-1.3.0" pour la version WCAG. Cette sélection termine l’installation de la webextension.

Note : la webextension est installée temporairement. C’est-à-dire qu’elle sera désinstallée à la fermeture de Firefox.

5. Installation sur Chrome

Dans la barre d'adresse du navigateur Chrome, tapez ceci : chrome://extensions

La page des extensions s'affiche. Sur cette page activez le mode développeur puis cliquez sur le bouton "charger l'extension non empaquetée".

Une boite de dialogue de fichier s'affiche.

Depuis cette boîte, sélectionnez sur votre disque local, le dossier "/webextension/dist/chrome/tanaguru-rgaa4-chrome-1.3.0" pour la version RGAA ou "/webextension/dist/chrome/tanaguru-wcag-chrome-1.3.0" pour la version WCAG. Cette sélection termine l’installation de la webextension.

Une fois, l’installation réalisée, un bouton « Tanaguru » apparait dans la barre d’outils du navigateur. Ce bouton permet à l’utilisateur via l’affichage d’une fenêtre popup de connaître la version de la webextension, la procédure pour démarrer les tests et l'accès au lien permettant de consulter le site de Tanaguru pour plus d’informations.

Pour démarrer les tests, rendez-vous sur la page à analyser.

Ouvrez l'outil de développement. (raccourci clavier : ctrl+maj+i)

Accès à l'outil de développement sur Firefox : « Menu > Outils supplémentaires > Outils de développement web»

Accès à l'outil de développement sur Chrome : « Menu > Plus d'outils > Outils de développement»

Puis dans l'outil de développement activez l’onglet « Tanaguru ».

Activez le bouton « Analyser cette page ». Selon la « complexité » du DOM de la page à analyser, un message peut vous demander si vous souhaitez « Arrêter le script » ou « Patienter » (choisissez cette option pour continuer). Les résultats s’affichent enfin en lieu et place du bouton « Analyser cette page ».

Chaque résultat est accompagné de trois boutons :

• « Mettre en évidence sur la page » permet d’appliquer une présentation particulière afin de faire ressortir visuellement l’élément sur la page ;
• « Révéler dans l'inspecteur » permet d'identifier et de sélectionner le nœud HTML correspondant dans l’inspecteur de la page ;
• « À propos de cet élément » permet de consulter et récupérer les différentes informations propres à l'élément (comme par exemple les représentations XPath et CSS).

Mise à jour de la syntaxe d'écriture d'un test (30/07/2021).

L’écriture d’un test RGAA s’effectue depuis le fichier Javascript « /src/references/rgaa4.js ».

L’écriture d’un test WCAG s’effectue depuis le fichier Javascript « /src/references/wcag.js ».

La fonction createTanaguruTest vous permet de créer un nouveau test.

Cette fonction prend en paramètre un objet JSON permettant de définir les différentes caractéristiques du test.

createTanaguruTest({});

Par exemple, si vous souhaitez lister tous les liens possédant un attribut target=“_blank“ :

createTanaguruTest({
	lang: 'fr',
	name: "Liens s'ouvrant dans des nouvelles fenêtres.",
	query: 'a[href][target="_blank"]:not([role])',
	mark: { attrs: ['target'] },
	tags: ['a11y', 'links'],
	ressources: { 'rgaa': ['13.2.1'] }
});

Note : l'absence des propriétés expectedNbElements et explanations fait que le test sera indiqué comme à expertiser.

Par exemple, si vous souhaitez vérifier que les attributs title sur les liens sont bien renseignés :

createTanaguruTest({
	lang: 'fr',
	name: 'Liens avec attributs title vides.',
	query: 'a[href][title]:not([role])',
	filter: function (item) {
		return item.getAttribute('title').trim().length == 0;
	},
	expectedNbElements: 0,
	explanations: {
		'passed': "Cette page ne contient pas d'éléments a avec attributs title vides.",
		'failed': "Des éléments a avec attributs title vides sont présents dans la page."
	},
	mark: { attrs: ['title'] },
	tags: ['a11y', 'links'],
	ressources: { 'rgaa': ['6.2.1', '6.2.2', '6.2.3'] }
});

Le numéro se décompose comme ceci: x.y.z Avec x = nouvelle fonctionnalité, y = mise à jour, z = correction

A chaque nouvelle version on liste brièvement ce que change la nouvelle version.