Accessibilité web : passer toutes les pages en lettres majuscules

J’ai rencontré sur un groupe consacré aux killis une personne mal-voyante qui ne peut accéder quasiment que aux textes écrits en majuscules. J’ai donc créé un petit hack qui lui permettra d’accéder depuis son navigateur (elle utilise chrome) à pratiquement n’importe quel contenu, que le site visité soit en majuscules ou minuscules.

Dans cet article, je détaille pour elle la procédure à utiliser, et j’en profite pour partager en fin d’article quelques éléments clé de l’accessibilité numérique.

Passer toutes les sites en majuscules avec le navigateur chrome

Ci après la procédure pour installer une extension et ajouter un script qui permettra de passer par-dessus la mise en page de la majorité des sites et transformer l’ensemble des pages en lettres majuscules.

Installation extension Custom Stylesheet & Script

Téléchargez et installez l’extension chrome Custom Stylesheet & Script puis activez la.

Accéder aux paramètres de l’extension

Accédez aux paramètres, en cliquant en haut à droite du navigateur et sélectionnez paramètres

Accéder aux extensions installées

Dans le volet gauche de la page paramètres, cliquez sur Extensions

Accéder à la configuration de l’extension Custom Stylesheet and Script

Sélectionnez l’extension Custom Stylesheet and Script et cliquez sur Details

Paramétrage de l’extension

Vérifiez que l’extension soit activée ; je vous recommande également de l’activer pour les fenêtres en navigation privée.

Options de l’extension

Accédez aux options de l’extension en scrollant vers le bas et en sélectionnant le menu Options d’extension

Le menu Options d’extension ouvre une fenêtre contenant 2 panneaux vides

Ajout d’un script

Ajoutez dans le panneau Javascript (le panneau de droite), le scritpt suivant :

window.addEventListener("load", function(event) {
console.log("All resources finished loading!");
console.log(document.styleSheets);
var css = body {text-transform: uppercase !important;} ;
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
});

Et voilà !

Fermez la fenêtre et commencez à naviguer : tous les sites devraient passer intégralement en lettres majuscules !

Quelques remarques sur l’accessibilité numérique

Je ne suis pas que hacker et aquariophile, je suis aussi très impliqué dans plusieurs secteurs du numérique, dont le logiciel libre, la sécurité civile et l’accessibilité numérique.

L’un des principes de base de l’accessibilité numérique est de permettre une égalité pour toutes les personnes dans l’accession aux contenus. L’accessibilité numérique est une démarche inclusive, le but étant de permettre à l’ensemble des publics d’accéder à la totalité des contenus.

Accessibilité numérique, des fausses bonnes idées

Une fausse bonne idée répandue est de répondre ponctuellement à une situation précise pour faciliter l’accessibilité d’une personne particulière ou d’un handicap particulier.

Par exemple en écrivant d’emblée les textes en majuscules pour permettre à la personne à qui j’ai dédiée ce hack et cet article d’accéder à ces contenus. Cela lui permettrait effectivement d’y accéder mais en même temps, cela empêcherait de nombreux publics — par exemple les non voyants qui utilisent une tablette braille ou une synthèse vocale d’y accéder— et surtout même pour la personne visée, cela reviendrait à créer un ghetto, car elle ne pourrait accéder qu’à un sous ensemble de contenus.

“Éviter les successions de mots écrits tout en majuscules.”

association Valentin Haüy avec les aveugles et les malvoyants

J’ai même déjà visité des sites dont les auteurs pensaient avoir eu un bonne idée pour permettre l’accès de leur site au non voyants, en déclenchant automatiquement une version oralisée du texte lors de l’ouverture de la page : c’était agaçant pour la majorité des utilisateurs et empêchait aux non voyants d’y accéder car cela entrait en conflit avec leur synthèse vocale ! …

Les zones des cartes COVID-19 sont inaccessibles à une grande portion de la population !

Les daltoniens représentent environ 4 % de la population mondiale. Donc les cartes avec des zones en couleur, comme celles publiées par le gouvernement pour le déconfinement par région après la 1ère vague de l’épidémie de Covid sont inaccessibles pour plus de 2 500 000 personnes en France, sans compter les autres troubles de la vision !

Les bonnes pratiques en accessibilité numérique

La bonne pratique en accessibilité numérique, que ce soit au niveau du développement des sites ou du formatage des contenus est de permettre à l’ensemble des publics d’accéder à la même version de contenu et aux contenus en intégralité.

Il existe de nombreux outils, —certains comme l’accentuation de contraste ou le grossissement généralisé des polices de caractères sont déjà inclus dans votre système d’exploitation—, qui permettent de modifier à la volée le contenu pour l’adapter aux différentes situations de handicap des visiteurs.

La solution que j’ai réalisée ici pour une personne particulière est extrêmement simple et peut fonctionner pour pratiquement n’importe quel site : il s’agit d’un script javascript qui injecte sur tous les sites visités une directive de mise en page qui surcharge le format de texte et la mise en page d’origine en passant les polices de texte en lettres capitales. Donc, au lieu de la contraindre à n’accéder que à une portion de contenus sur une minorité de sites, elles devrait pouvoir accéder à l’ensemble des sites du web.

Le groupe Accessiweb et le RGAA

Je me suis très tôt intéressé aux problématiques d’accessibilité web et, depuis 2004, j’ai rejoins le groupe de travail Accessiweb qui rassemble des experts certifiés en accessiblité numérique pour définir des standards de développement et d’écriture des contenus et évaluer l’accessibilité des sites web.

Aujourd’hui les travaux du Groupe de Travail Accessiweb sont intégrés dans le Référentiel Global de l’Accessibilité pour les Administrations (RGAA) qui fournit un référentiel technique avec des points de contrôle pour s’assurer du niveau d’accessibilité d’une ressource web

Sources et ressources

• QA Stack : Changer le CSS par défaut de Google Chrome
• Extension Chrome Custom Stylesheet & Scrip
• Braillenet et le GTA : Groupe de travail AccessiWeb
• Ma page Groupe de Travail Accessiweb : Fiche GTA IPEOS
• Association AVH : Accessibilité des documents texte
• Romy Tetue : Illisible carte du déconfinement