Renowify : Votre allié pour un web plus accessible
Outil d'aide à l'amélioration de l'accessibilité des sites web en suivant le référentiel RAWeb 1.1.
L'extension Renowify est disponible dans le catalogue d'extension Chrome et Firefox.
Cette extension a été initialement créée pour vérifier des points d'accessibilité des sites AEM mis en place par l'état Luxembourgeois.
Présentation et utilisation
L'extension propose les fonctionnalités suivantes :
- Execution automatique d'une centaine de tests unitaires et génération d'un récapitulatif dans la barre latérale.
- Plusieurs outils sont disponibles pour vérifier manuellement certains critères d'accessibilité.
Pour utiliser la vérification sur une page de votre site, il suffit de consulter une page dans votre navigateur et de cliquer sur l’extension Chrome Renowify.
Liste des outils disponible dans l'extension Chrome
- Textes alternatifs d'images
- Forcer l'affichage du focus
- Afficher les changements de langue
- Modifier les espacements de caractères
- Afficher les niveaux hierarchiques des titres
- Afficher les attributs Autocomplete
- Afficher les attributs Tableau
- Afficher les 'title' des liens
- Afficher les contenus masqués
- Cacher les images de background et les dégradés.
Liste des catégories de tests unitaire
- Couleur et contraste
- Images
- Liens
- Formulaire et Autocomplete
- Element Obligatoire
- Structure de l'information
- Configuration des composants AEM
- Tableau
- Navigation
- Balises/attributs obsolètes
- Changement de langue
- Boutons
- Rédacteur
- Titres
- Sécurité
Le dépôt GitHub contient les fichiers du projet et sa documentation technique.
Configuration
Il est possible de filtrer pour n'executer que certains tests unitaires :
- Vérification uniquement du contenu saisi par le rédacteur
- Affichage uniquement des Erreurs (Non-conformité au RAWeb)
- Affichage des Erreurs, alertes et bonnes pratiques
Dans les options, il est possible de sélectionner son profil d'utilisateur et de renseigner des licences (pour des tests plus approfondit basés sur Wave et lighthouse).
Utilisation alternative
Vous avez aussi la possibilité de cloner le repository GitHub, puis d'installer Renowify sous forme de Bookmarklet ou sous forme d'extension Chrome locale. Vous pouvez également utiliser Cypress ou Selenium pour interagir avec le script.
Bookmarklet
L'installation sous forme de bookmarklet est simple d'utilisation : à l'activation, les tests unitaires sont executés et le récapitulatif est affiché dans la barre latérale.
Avec cette option, il n'est pas possible de filtrer les résultats des tests unitaires ni d'activer les outils de vérification manuel.
Pour installer, il suffit de faire un clic droit sur votre barre de favoris et sélectionner "Ajouter un favori" puis copier-coller la ligne ci-dessous dans le champ URL :
<a class="bookmarklet" href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='VOTRE_DOSSIER/a11y_renowify/scripts/script_bookmarklet.js';})();" title="Renowify">Renowify</a>Extension Chrome Locale
L’extension Chrome locale permet d’exécuter les tests unitaires et d’y ajouter vos propres tests.
Pour cela, saisir chrome://extensions/ dans la barre d’adresse, activer le mode développeur, cliquer sur « Charger l’extension non empaquetée », puis sélectionner le répertoire où le dépôt a été cloné.
Cypress / Selenium
Il est possible d'executer les tests unitaires de Renowify depuis Cypress ou Selenium afin de parcourir rapidement un ensemble de page. Je vais prochainement faire un article sur ce sujet.
Collaborer
N'hésitez pas à me remonter les problèmes, faux-positifs ou vos suggessions d'améliorations directement sur GitHub