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.

Follow

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>