Follow

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 cc @somnius ? could we add this?

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.

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.

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.

CSS Style For Identifying Undescribed Media 

@Mayana @IngaLovinde @FiXato
Maybe applications can add it too?
Or at least give an option for it for users that want it.
@sengi_app
@Tusky

CSS Style For Identifying Undescribed Media 

@storydragon Hmm. @IngaLovinde and @FiXato are of course free to correct me, but I don't think the same CSS trick will work for apps. They will likely have to think of their own code. But it would definitely be lovely if there was an option like this, as well as a reminder for captioning your own media! :eyeless_smile:
@sengi_app @Tusky

re: CSS Style For Identifying Undescribed Media 

@Mayana @storydragon yeah, CSS is unlikely to be useful for most native applications.

The Android client I am using, #Fedilab, at least shows an eye symbol in the top-left corner of media, which is coloured white for media with descriptions, and red for those without.

I don't think it supports warning when boosting or posting media without a description though, but I haven't thoroughly checked as I do most of my posting via my desktop browser.

CSS Style For Identifying Undescribed Media 

@Mayana
Yeah, for most apps it should be made so that it works for the app because they don't all work with CSS and HTML since they aren't webpages...
But maybe for @sengi_app it could work, if they change something. I mean, now the alt is part of the image link (which is in the middle of the image), as 'title' though I don't know of a way to then get the border around the image...
And the title tag also exists for images without alt, but then it is just emtpy....
@IngaLovinde @FiXato @Tusky

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>