CSS Style For Identifying Undescribed Media 

Recently, several users expressed a desire for a way to quickly check if the images in the toot they were about to boost were described. It would be nice if Mastodon itself offered warnings for that, as well as for forgetting to describe media in your own posts, but until then, this is actually one problem admins can fix on our own!
All you need to do is go into the site settings and add a bit of CSS code that will display a red border around any undescribed media. There are two examples available, depending on how subtle or noticeable you want the border to be; experiment and see what you like!
gist.github.com/FiXato/3de505b
Thanks to @IngaLovinde for thinking of the starting code and @FiXato for improving on it! They did all the work here; I am just sharing this along.
Open this post in a new tab and look at the image to see how this can look like. The example image is my avatar, described in another pinned post.

CSS Style For Identifying Undescribed Media 

@Mayana I can spread this around to some other instances too if you'd like.

CSS Style For Identifying Undescribed Media 

@Superfreq I tagged the three admins that I am mutuals with. I'm not sure it'd be right to reach out to admins I don't have any connection with, because while accessibility is wonderful, this is just a tiny little thing, and what they decide to do with their instance is in the end up to them.
If you are connected to any admins personally, then go for it! If not, I'm not sure we should be too intense in our outreach, especially because adding red borders around undescribed media implies it is somehow worse, which ... well, it's true for us, but it's not ideal for neurodivergent people who sometimes genuinely can't add descriptions, and shouldn't be made to feel nobody will boost their posts because of it. :ms_thinking:

CSS Style For Identifying Undescribed Media 

@Mayana Hmm.. I see what you're saying, though since it's up to them as you said, it wouldn't be allot different from contacting them about a security fix or something. As someone at a conference once said (and it stuck with me) accessibility problems should be considered an outage, they stop users from accessing parts of your service.
The neuroD thing is a bit trickier though. Harp puts a pinned post about it on her profile, but someone just seeing the boost wouldn't necessarily bother checking that.
If it were me, I'd probably just copy paste a small disclaimer at the end of posts with undescribed images, or ask them to read my pinned post about it.
We can also do our part by spreading awareness along with the other things we say about described media... Ask admins to mention it if they make an update post ETC.

CSS Style For Identifying Undescribed Media 

@Superfreq True ... although this change in itself does not make anything more accessible. It might just encourage some people to change things, maybe. I'm still not all that comfortable with reaching out to admins, but if you'd like to, I can't stop you.
Yeah, it's a tricky subject. I need to think about how to maybe get an interesting discussion about it started once I get some sleep.

Follow

CSS Style For Identifying Undescribed Media 

@Mayana I won't include your name or the instance name in any messages I send, just encase it's as frowned upon as you worry it will be.

· · Web · 1 · 0 · 0

CSS Style For Identifying Undescribed Media 

@Superfreq You can if you want. But I'm not the one that made these things anyway. I'm just the one that decided to advertise them.

Sign in to participate in the conversation

A fun, happy little Mastodon/Hometown instance. Join us by the fire and have awesome discussions about things, stuff and everything in between! Admins: @Talon and @Mayana.

<svg xmlns="http://www.w3.org/2000/svg" id="hometownlogo" x="0px" y="0px" viewBox="25 40 50 20" width="100%" height="100%"><g><path d="M55.9,53.9H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,53.9,55.9,53.9z"/><path d="M55.9,58.2H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,58.2,55.9,58.2z"/><path d="M55.9,62.6H35.3c-0.7,0-1.3,0.6-1.3,1.3s0.6,1.3,1.3,1.3h20.6c0.7,0,1.3-0.6,1.3-1.3S56.6,62.6,55.9,62.6z"/><path d="M64.8,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C66,54.4,65.4,53.9,64.8,53.9z"/><path d="M60.4,53.9c-0.7,0-1.3,0.6-1.3,1.3v8.8c0,0.7,0.6,1.3,1.3,1.3s1.3-0.6,1.3-1.3v-8.8C61.6,54.4,61.1,53.9,60.4,53.9z"/><path d="M63.7,48.3c1.3-0.7,2-2.5,2-5.6c0-3.6-0.9-7.8-3.3-7.8s-3.3,4.2-3.3,7.8c0,3.1,0.7,4.9,2,5.6v2.4c0,0.7,0.6,1.3,1.3,1.3 s1.3-0.6,1.3-1.3V48.3z M62.4,37.8c0.4,0.8,0.8,2.5,0.8,4.9c0,2.5-0.5,3.4-0.8,3.4s-0.8-0.9-0.8-3.4C61.7,40.3,62.1,38.6,62.4,37.8 z"/><path d="M57,42.7c0-0.1-0.1-0.1-0.1-0.2l-3.2-4.1c-0.2-0.3-0.6-0.5-1-0.5h-1.6v-1.9c0-0.7-0.6-1.3-1.3-1.3s-1.3,0.6-1.3,1.3V38 h-3.9h-1.1h-5.2c-0.4,0-0.7,0.2-1,0.5l-3.2,4.1c0,0.1-0.1,0.1-0.1,0.2c0,0-0.1,0.1-0.1,0.1C34,43,34,43.2,34,43.3v7.4 c0,0.7,0.6,1.3,1.3,1.3h5.2h7.4h8c0.7,0,1.3-0.6,1.3-1.3v-7.4c0-0.2,0-0.3-0.1-0.4C57,42.8,57,42.8,57,42.7z M41.7,49.5h-5.2v-4.9 h10.2v4.9H41.7z M48.5,42.1l-1.2-1.6h4.8l1.2,1.6H48.5z M44.1,40.5l1.2,1.6h-7.5l1.2-1.6H44.1z M49.2,44.6h5.5v4.9h-5.5V44.6z"/></g></svg>