This content originally appeared on Thoughts From Eric and was authored by Eric Meyer
Some time ago, I published user styles to visually highlight images on Twitter that didn’t have alt text — this was in the time
before the “ALT” badge and the much improved accessibility features
Twitter deployed in the pre-Musk era.
With the mass Mastodon migration currently underway in the circles I frequent, I spend more time there, and I missed the quick visual indication of images having alt text, as well as my de-emphasis styles for those images that don’t have useful alt text. So I put the two together and wrote a new user stylesheet, which I apply via the Stylus browser extension. If you’d like to also use it, please do so!
/* ==UserStyle==
@name mastodon.social - 12/14/2022, 9:37:56 AM
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Styles images posted on mastodon.social based on whether or not they have alt text.
@author @Meyerweb@mastodon.social, https://meyerweb.com/
==/UserStyle== */
@-moz-document regexp(".*\.social.*") {
.media-gallery__item-thumbnail img:not([alt]) {
filter: grayscale(1) contrast(0.5);
}
.media-gallery__item-thumbnail img:not([alt]):hover {
filter: none;
}
.media-gallery__item-thumbnail:has(img[alt]) {
position: relative;
}
.media-gallery__item-thumbnail:has(img[alt])::after {
content: "ALT";
position: absolute;
bottom: 0;
right: 0;
border-radius: 5px 0 0 0;
border: 1px solid #FFF3;
color: #FFFD;
background: #000A;
border-width: 1px 0 0 1px;
padding-block: 0.5em 0.4em;
padding-inline: 0.7em 0.8em;
font: bold 90% sans-serif;
}
}Because most of my (admittedly limited and sporadic) Mastodon time is
spent on mastodon.social, the styles I wrote are attuned to
mastodon.social’s markup. I set things up so these styles should be
applied to any *.social site, but only those who use the
same markup mastodon.social uses will get the benefits. pinafore.social,
for example, has different markup (I think they’re using Svelte).
You can always adapt the selectors to fit the markup of whatever Mastodon instance you use, if you’re so inclined. Please feel free to share your changes in the comments, or in posts of your own. And with any luck, this will be a temporary solution before Mastodon adds these sorts of things natively, just as Twitter eventually did.
Addendum: It was rightly pointed out to me that Firefox does not, as of this writing, support :has() by default. If you want to use this in Firefox, as I do, set the layout.css.has-selector.enabled flag in about:config to true.
Have something to say to all that? You can add a comment to the post, or email Eric directly.
This content originally appeared on Thoughts From Eric and was authored by Eric Meyer
Eric Meyer | Sciencx (2022-12-14T19:48:00+00:00) Highlighting Image Accessibility on Mastodon. Retrieved from https://www.scien.cx/2022/12/14/highlighting-image-accessibility-on-mastodon/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.