CSS et accessibilité

On parle d'inclusivité, mais soyons honnête, peu de site web tiennent compte des technologies qui servent à mettre en place cette inclusivité pour les handicapés. L'inclusivité Woke, oui, le LGBT, la représentation des ethnies, oui, les malvoyants, non. Pourquoi ? Parce que cela ne se voit pas, évidemment.

Certains malvoyants ont besoin d'un contraste des couleurs élevé, d'autres d'une limitation des animations, d'autres encore que l'on évite les transparences. Tout cela est géré en CSS avec des @media.

J'utilisais pas mal le @media, pour modifier la CSS lorsque l'on imprime une page web. On peut par exemple enlever la barre de navigation et le rooter pour gagner du papier. On peut même justifier se travail pour des raisons écologiques.

@media print {

nav,

footer,

section.hero,

body *.no-print {

display:none !important;

}

}

Avec l'arrivé du mode dark d'Apple (repris partout maintenant), un nouveau @media est apparut :

@media (prefers-color-scheme: dark) {

html {

--text-color: #f8f8f8;

--secondary-text-color:#d8d8d8;

--bg-color: #0a0a0a;

--bg-color2: #323232;

--shadow-color: rgba(55, 55, 55, 0.25);

}

}

Ainsi, on change l'affichage selon le mode (clair ou sombre) choisi dans l'outil Réglages :

Toujours dans l'outil Réglages, vous avez les réglages d'accessibilité qui permettent notamment de réduire les animations, d'augmenter le contraste et de réduire la transparence.

Tous ces éléments ont leur @media :

@media (prefers-reduced-motion: reduce) {

.nav-transparent { transition: none; }

}

@media (prefers-reduced-transparency: reduce) {

.nav-transparent { background-color: var(--primary-color); }

}

@media (prefers-contrast: more) {

html

{

--primary-color: black;

--secondary-color: darkgray;

--text-color: black;

--bg-color: white;

}

}

Avec relativement peu de travail, on arrive donc à prendre en compte ces particularités. Évidemment, votre illustrateur/designer ne comprendra pas qu'il n'est pas grave que votre site soit "moche" si plus de personnes peuvent l'utiliser. Si vous avez la chance d'avoir un artiste compréhensif, cela peut même être bien dans toutes les conditions.

En-tout-cas, si vous voulez un site "inclusif", vous ne pouvez pas faire l'impasse sur ces technologies. Un site "parfait" fonctionnerait aussi avec une machine braille ou en vocal, et contiendrait des modes de saisies alternatives, mais cela demande aussi de penser le HTML pour ajouter des infos. 

Une autre amélioration, plus difficile, est de laisser la taille des caractères du système, afin de prendre en compte les réglages de grands caractères pour les malvoyants, mais cela fait en général sauter les structures de cadres des sites, il faut alors être obligatoirement avec une gestion des textes pouvant passer les uns sous les autres. On devrait aussi laisser la fonte de caractère du système qui peut être choisie par l'utilisateur pour des raisons d'accessibilité, mais on touche là, à l'identité de l'entreprise...

Tout n'est pas possible, mais comme d'habitude en informatique, on doit quand même faire de son mieux.