💾 Archived View for unbon.cafe › lejun › posts › 20221121_styleAltText.gmi captured on 2023-03-20 at 18:03:38. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-01-29)
-=-=-=-=-=-=-
L’étiquette veut que Mastodon soit un espace plus inclusif que Twitter en terme d’accessibilité et pour cela l’usage de texte alternatif aux contenus médias est fortement recommandé. Difficile de parler d’un élément qui par défaut n’est pas visible, c’est pourquoi j’ai souhaité mettre en évidence son absence lors de ma navigation Internet – il serait possible de vivre l’expérience au maximum en supprimant tout contenu de ce type, mais c’est pas l’objectif ici. J’aime particulièrement le texte alternatif tant il permet d’économiser en données échangées et donne le point de vue de la personne partageant le contenu. Je suis parti d’un code donné dans le cadre d’une utilisation de Mastodon sur l’extension Firefox Stylus pour essayer de l’étendre à la navigation Internet en général – j’en ai également profité pour réduire sa taille et le rendre à mon sens plus logique. Le code est fonctionnel bien que présentant des limites d’origine inconnue.
Le premier code a été partagé par S.Deschamps sur le Fediverse à ce sujet :
div.media-gallery img,
.zoomable-image img {
outline: 5px dashed yellow;
outline-offset: -5px;
}
div.media-gallery img[alt],
.zoomable-image img[alt] {
outline: none;
}
Dans l’ordre, il ajoute une bordure jaune sur toutes les images, pour ensuite la supprimer lorsqu’un texte alternatif existe. Bien que fonctionnel, trois points me dérangent à savoir :
Au lieu de faire appel à Stylus, il est possible de configurer des règles CSS à la racine du navigateur pour contrôler son affichage. Bien que Stylus permette un contrôle CSS à la volée, ça reste une couche logicielle supplémentaire qui n’apporte pas grand avantage pour qui ne joue pas régulièrement avec de la mise en page. J’ai tenté naïvement de bourrer le code dans le userChrome.css – que j’utilise pour réduire le nombre d’options affichées dans le menu contextuel [2]. Sans succès évidemment puisque userChrome est destiné aux modifications de l’interface du navigateur et non du contenu qu’il affiche, celui-ci est encadré par userContent.css. Un test rapide peut être réalisé à l’aide de :
body {background: pink; !important;}
Depuis la version 69 de Firefox, les fichiers chrome userChrome.css et userContent.css ne sont, par défaut, pas pris en charge. Il est nécessaire de modifier le booléen `toolkit.legacyUserProfileCustomizations.stylesheets` dans les paramètres.
La vérification étant faite, il devrait être possible d’utiliser le code proposé plus haut – en pratique ça coince.
Le code initial agit en deux temps, la différence en terme de performance est sûrement marginale, mais la logique me chiffonait et j’ai choisi une solution plus élégante. Plutôt que d’appliquer la bordure à toutes les images puis de la supprimer en présence de texte alternatif (soit deux recherches et deux effets), j’ai utilisé `:not()` qui semble être l’inverseur logique en CSS. Ainsi, il suffirait d’une seule étape où l’effet est appliqué sur les images n’ayant pas de texte alternatif (soit une recherche et un effet). On réduit ainsi le code en :
div.media-gallery img:not([alt]),
.zoomable-image img:not([alt]) {
outline: 5px dashed yellow;
outline-offset: -5px;
}
Par curiosité, j’ai également ajouté les cas où l’attribut existe mais est laissé vide – et modifié en une syntaxe qui me paraît plus pratique car moins incrémentée :
div.media-gallery img:not([alt]), img[alt=""], .zoomable-image img:not([alt]){
outline: 5px dashed yellow;
outline-offset: -5px;
}
Une conséquence collatérale étant que les images ayant un texte alternatif volontairement vide car considérées comme décoratives sont également mis en évidence.
Tel quel, le code renvoie un message d’erreur que j’ai contourné sans réellement comprendre en définissant un @rule. Le test userContent permet pourtant de s’en passer, et se limite à indiquer le corps des pages. La règle @ utilisée est `@-moz-document`, à choisir j’aurais instinctivement utilisé `@-document` pour que la solution ne soit pas propre au moteur Gecko, mais celle-ci serait dépréciée. Et j’ai explicitement ajouté – est-ce nécessaire ? – vouloir que mon code s’applique à tout contenu visité – tout contenu ayant une url pour être précis.
@-moz-document url-prefix() {
div.media-gallery img:not([alt]), img[alt=""], .zoomable-image img:not([alt]) {
outline: 5px dotted red;
outline-offset: -5px;
}
}
[1] CSS Stylus pour mettre en évidence l’absence de alt-text