Comment une personne malvoyante voit un site internet ?

Travailler pour l'accessibilité numérique au quotidien permet de comprendre le mode d'usage d'internautes in situ.

Comment une personne malvoyante va visualiser un site web ? De différentes manières puisque chaque cas est unique.
À l'occasion de tests réalisés en 2022 en partenariat avec la société Applause, j'ai pu constater que la conformité « légale » est mise à mal dans un contexte réel.

Et c'est là que l'on peut confronter la théorie et la pratique.
C'est parlant, instructif et ça replace les choses au centre du sujet : l'utilisateur final.

Exemple in situ

Cette vidéo, d'une durée de 46 secondes, donne un aperçu effectif de la configuration du terminal.
On peut constater trois choses importantes :

1. Bien que seulement malvoyant, le testeur utilise un lecteur d'écran ;
2. Son terminal est configuré en mode contrasté et mode sombre (darkmode) ;
3. Une feuille de styles (CSS) personnalisée est appliquée.

Mettez le son !
Ne soyez pas surpris, la vidéo n'est pas accélérée.

Le débit utilisé étant impressionnant, je ne peux évidemment pas fournir de sous-titres pour cette vidéo.
En plus de cela, je ne parle pas le portugais brésilien… 😊

Passons les détails sur le lecteur d'écran, tout en gardant en tête qu'un contenu trop verbeux peut aussi poser des problèmes.

Par contre, la configuration du terminal en mode contrasté est intéressante. En effet, c'est une configuration courante pour les malvoyants et nous avons tendance à ne pas trop en tenir compte.
Les référentiels d'accessibilité parlent bien d'obligation de taux de contrastes suffisants, mais il semble que ce ne soit pas toujours suffisant, pour le coup.

Adapter le contraste

Sachant qu'il est très simple techniquement de détecter cette configuration précise, pourquoi ne pas en tenir compte à la conception ?
L'utilisation de la requête media CSS @media (prefers-contrast: more|no-preference) peut permettre de délivrer des adaptations efficaces en association avec les variables CSS.

Essayez sur ce site en configurant votre terminal en affichage contrasté.
Vous allez voir, c'est magique !

Au passage, ça peut éviter d'installer de fausses solutions, du type surcouche d'accessibilité improbable.

Adapter les animations

De la même manière, la requête media @media (prefers-reduced-motion: reduce|no-preference) prendra en compte la configuration des animations.
Comme le contraste, ce critère est géré sur ce site. Essayez…

La CSS utilisateur

Comme nous le voyons, l'interface a « un peu changé » par rapport au site d'origine.

Le testeur a utilisé une feuille de styles « personnalisée », configurée pour surcharger la mise en forme du contenu. Notamment, un fond noir, des liens en jaune et du texte en blanc.
Amis designers, désolé pour vous… 😊

Pour tester, voici un exemple de styles personnalisés pour malvoyants.

@charset "UTF-8";
:root {
    font-size: 110% !important;
    background-color: black !important;
}

body {
    font-family: "Arial Black", Arial, Helvetica, sans-serif !important;
    background-color: black !important;
}

body * {
    font-family: inherit !important;
    font-size: inherit !important;
    color: white !important;
    background-color: black !important;
    background-image: none !important;
    letter-spacing: .1em;
    word-spacing: .5em;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

[class*="background"] {
    background-color: black;
    background-image: none;
}

::before, ::after {
    background-color: initial !important;
}

:any-link, button {
    color: yellow !important;
    text-decoration: underline !important;
    text-underline-position: under !important;
}

svg {
    fill: white !important;
}

:root :focus-within, header, footer, main, a, button, [role] {
    background-color: black !important;
    background-image: none !important;
    color: white !important;
}

:root :focus {
    outline-offset: 5px !important;
    outline: double 3px chartreuse !important;
    background-color: black !important;
    color: white !important;
}

label, label *, input, select, textarea {
    background-color: white !important;
    color: black !important;
}

h1, h2, h3, h4, h5 {
    font-size: 200% !important;
    color: yellow;
}

Ces styles prendront le pas sur la version fournie par le site internet.

Pour appliquer cette configuration, il faut utiliser l'extension Stylus, pour Firefox et Chrome/Edge.

Safari permet de le faire plus simplement dans ses paramètres. Copier le code ci-dessus, créer un fichier local-css.css sur votre ordinateur, puis appliquer dans les préférences.

Ce petit test permet de se faire une idée concrète de ce à quoi va ressembler un site donné.
Comme ici nous sommes joueurs, un aperçu de cette même page.

L'idée n'est pas d'avoir une interface totalement iso, mais au moins de s'assurer que les contenus restent « visibles » et utilisables.

Conclusion

Pour tout dire, la conclusion que j'en retire personnellement, est que ce que nous pensons être bien pour d'autrui n'est pas forcément la vraie vie des personnes concernées.
Nous devons suivre des règles qui cadrent certaines choses, mais devons aussi savoir les enfreindre pour rendre utilisable ce qui est conçu.
Et surtout, surtout, surtout : tester et re tester !

Pour ma part, j'applique ce mot juste de Paul Valéry :

Un homme compétent est un homme qui se trompe selon les règles.

Ça marche aussi pour les filles hein !

Bon courage, j'y retourne !…