Follow

How can I easily tell (on a phone) if an image has alt text or not on Mastodon. Would be great if Mastodon visibly flagged images that don’t have alt text with a warning in the interface so we know not to boost posts that don’t have it.

@aral fedilab shows a red border around the image when uploading, which is a great indicator, maybe that's a solution or is a red border too invasive when browsing?

@aral long tap. The popup menu with options shows the alt text and the url on top.

@aral that's in chrome when the image is not opened. In firefox it shows only the url when the image is not opened and only the alt text if the image is opened.

@GidiKroon

Wow thats nice! Thanks for pointing this out, I didn't know!

@aral

@GidiKroon Ah, thanks. So on Safari on iOS, I have to tap to view the imagine in full and then long tap (the latter doesn’t work when imagine is in the post).

@aral speaking of which: I would really like to have an option to describe a picture when boosting a toot without image description

@aral Experimental POC in Stylus for Firefox I just tried:

```css
div.media-gallery img {
border-left:5px dashed red;
}
div.media-gallery img[alt] {
border-left:5px solid green;
}
```

#accessibility #Mastodon #images

@aral In iOS Safari, you can tap long on an image and if there is an alt text, it will show in the pop-up. This doesn't work in web views used in any other app than the native Safari app, including Add to Home Screen apps. I have used this method to read the alt text on xkcd comics.

@aral Ironically, I think there is no way sighted users can tell. I'd actually try making this request in their github repo. If you want, I could do it, and on Hometown github too. If you've made a issue suggestion on github I'd be happy to share it and comment in support of this.

@weirdwriter Hey Robert, thanks, would appreciate it if you could as I’m on a deadline to prep for today’s stream :)

@weirdwriter @aral@dragonscave.space there are custom styles to solve this (I have red borders on images without descriptions on my instance).
It requires admin to add these though, and the red border will only show up in native web UI, not third-party ones or apps.

@IngaLovinde Do you think you'd be able to obtain that CSS code? We'd love to add it on our instance.
@weirdwriter

code 

@Mayana @weirdwriter
```
/* indicate images without a description */
.media-gallery__item-thumbnail img:not([alt]) {
border: 2px solid red;
}
```

code 

@IngaLovinde @Mayana this will make the experience much better for those in our instance. This is such a great idea

code 

@IngaLovinde @weirdwriter Thank you very much! The code has been added; are you able to see the boarder around this uncaptioned image when viewing the post on our instance?
(The image is my avatar, described in my pinned posts.)
@storydragon can you do me a favor and confirm whether there's a red boarder around the attached image? If so, is it too distracting?

re: code 

@Mayana if I visit your post on your instance directly, I am not seeing the border, nor the actual CSS rule in the generated CSS.
I do see it in your custom.css though, but it looks like you included the triple backticks ( ```) at the start and end, which I think @IngaLovinde only meant as code separators/indicators.
Remove those, and I think it should be fine.
@weirdwriter @storydragon

re: code 

@FiXato Ah, whoops! Sorry, I don't know how CSS works and figured that an indication of the start and end of code was necessary. Should've figured it was just a code block. :ms_facepalm:
How about now?
@IngaLovinde

re: code 

@Mayana it works now, but only once I first click on the blurred image as it's marked as sensitive content due to the content warning.
I don't think there is a quick and easy solution around that with just CSS unfortunately.
@IngaLovinde

re: code 

@FiXato That's the intended behavior, and I see no need to change it.
This tweak is meant for warning people that an image they're about to boost isn't described. For them to want to boost it, they will have to unhide it first. If they leave it hidden, there's no need for the boarder.
I hope the read line doesn't clash with images *too* much, though.
@IngaLovinde

re: code 

@Mayana @FiXato For me it does not clash with the images at all! I wish I could get it to work on my phone (which does not show any red lines...)

re: code 

@Mayana
I would perhaps add:
box-sizing: border-box;
just below the border line; this would help ensure all the borders of the image are actually visible.
At least when it is a single image. When more than 1 undescribed image is added to a post, some of the borders aren't always visible.

If you also want the same borders around undescribed video and audio that has been attached to the toot, then the following might help:

/* indicate media without a description */
.media-gallery__item-thumbnail img:not([alt]), .audio-player__canvas:not([title]), .video-player video:not([title]) {
border: 2px solid red;
box-sizing: border-box;
}

(Though I have not been able to test the video one; I can add a reply with an undescribed video for that.)

If you want a bit more subtle effect, the 'red' could be replaced with:

rgba(255, 0, 0, 0.5)

Which would use a red with 50% opacity.

Or 'solid' could be replaced with 'dotted' or 'dashed' for a line that is, well, dotted or dashed, rather than a continuous solid one.

However, I am not a user of your instance, so I don't feel that is up to me.

I also can't judge how making it more subtle would affect others, though perhaps adding a dotted or slashed pattern to the border might help those with certain form(s) of colour-blindness?
@IngaLovinde

re: code 

Attached video is lacking a description on purpose to test a styling rule.

It shows a man, me, with a hat and two-pronged beard nodding twice towards the camera in approval of something. It's supposed to be a tad creepy. A greyscale and old-timey video filter has been added to it.

@Mayana
@IngaLovinde

re: code 

@Mayana
another undescribed video upload test; this one should have an audio track, and thus hopefully trigger a different video player style.

Manual description of video:
The boot sequence of an emulated Philips NMS 8250 MSX2 machine. A blue screen onto which a white on black MSX logo scrolls up from half-way the screen, with below it its amount of video and user ram. A beep is heard, and the MSX BASIC interpreter is briefly seen before the video ends.

@IngaLovinde

re: code 

@Mayana test confirmed. Though I just noticed I forgot to add the 'does not have description' selector to gifv example in the last code I gave you.

Here's the latest (and likely last) version of the CSS code, which should have that fixed:
gist.githubusercontent.com/FiX

And an example where the border is more subtle (1px wide, dashed, and half opacity red):
gist.githubusercontent.com/FiX

@IngaLovinde

re: code 

@FiXato Wow. You sir are absolutely awesome! Thank you very much!
Alright, changes applied. I went with a thicker dashed boarder so it's more noticeable for those that want to see it, but the more subtle red, just in case. I've no clue how much sense that makes, but hopefully it'll look fine.
Would you mind if I make a pinned post linking to these? It might help a few more masto admins discover it.
@IngaLovinde

re: code 

@Mayana as far as I can see, it all works now. :)
And go right ahead, and link all you want. :)
If it helps, here is the gist with both code examples: gist.github.com/FiXato/3de505b @IngaLovinde

re: code 

@Mayana @FiXato @IngaLovinde
Maybe the border can be even a little bit more thicker?
Though, I guess it is probably good enough as it is now. It is absolutely not distracting in any way.

re: code 

@storydragon Thicker? And here I was worried I should've made it 2px, instead.
OK, it's 3px now. Better?

re: code 

@storydragon Awesome! Thank you for your feedback. :ms_smile:

re: code 

@Mayana

Okay, so the attached video was apparently seen as video type that gets embedded as an animation, probably because it lacks audio, which apparently has a different css style:

/* indicate media without a description */
.media-gallery__item-thumbnail img:not([alt]),.audio-player__canvas:not([title]),.video-player video:not([title]), .media-gallery__gifv video
{
border: 2px solid red;
box-sizing: border-box;
}

@IngaLovinde

Sign in to participate in the conversation
Aral’s Mastodon

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!