No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README
_locales
devtools
popup
ressources
.gitignore
LICENSE
README.md
manifest.json

README.md

Tanaguru Webextension

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

A propos

  • Auteur : Romain Gervois ;
  • Projet : Tanaguru Webextension (Firefox, pour le moment) ;
  • Date de rédaction du document : 26/02/2018.

Installer la webextension

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 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 ». 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.

Utiliser la webextension

Une fois, l’installation réalisée, un bouton « Tanaguru » apparait dans la barre d’outils de Firefox. 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 d’aller consulter le site de Tanaguru pour plus d’informations.

Pour démarrer les tests, rendez-vous sur la page à analyser puis, si l’outil de développement n’est pas déjà affiché, allez dans « Outils > Développement Web > Outils de développement » puis 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).

Écrire un test

Mise à jour de la syntaxe d'écriture d'un test (06/11/2018).

L’écriture d’un test s’effectue depuis le fichier Javascript « /ressources/scripts/tests.js ».

Fonction createTanaguruTest

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({});

Caractéristiques du test

Propriété Description Valeur attendue
lang Langue de rédaction du test. String.
name Intitulé du test. String.
query Sélecteurs CSS permettant de définir l'échantillon. String.
filter Fonction de filtrage permettant de restreindre l'échantillon. Function.
expectedNbElements Nombre d'éléments attendus dans l'échantillon (précis ou compris entre deux bornes) permettant de valider ou d'invalider le test. Integer ou Object (avec propriétés min (Integer), max (Integer) ou les deux).
explanations Explications associées aux statuts du test. Object (avec propriétés passed (String) et failed (String)).
mark Expression régulière permettant de mettre en surbrillance des passages de code dans l'interface des résultats. String.
tags Étiquettes associées aux champs. Note : il ne s'agit pas des intitulés d'étiquettes mais d'identifiants d'étiquettes (i18n). Array de String.
ressources Ressources associées aux tests. Object (chaque propriété identifiant une ressource et valorisée par un Array de String).

Remarque importante : l'appel à la fonction createTanaguruTest devra être fait avant l'appel de la fonction de chargement des tests (loadTanaguruTests();) afin que le test soit executé et chargé dans l'interface de la webextension.

Exemples de test

Liens s'ouvrant dans des nouvelles fenêtres

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: '(target="_blank")',
	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.

Liens avec attributs title vides

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: '(title="(?:(?!").)*")',
	tags: ['a11y', 'links'],
	ressources: { 'rgaa': ['6.2.1', '6.2.2', '6.2.3'] }
});