Mastodon: Ability to add alt text to images/media

[ZoeBijl]

Images must have text alternatives that describe the information or function represented by the images. This ensures that images can be used by people with various disabilities. The main technique to add alt text is via the alt attribute.

Twitter added the ability to add alt text to images earlier this year. Something in Mastodon would be great!

Some more information on alt text:

• Short note on coding alt text
• HTML 5.1 §4.7.5.1. Requirements for providing text to act as an alternative for images
• Web Content Accessibility Guideline 1.1 – Text Alternatives
• Web Accessibility Tutorials Images Concepts

[Gargron]

How does Twitter let you add alt text to images? I have never encountered it.

[ZoeBijl]

You have to turn it on in the settings though; which I wouldn’t recommend.

[BooDoo]

Twitter's implementation on the API side is kind of a rat's nest, for reference:

• POST chunks to media/upload and receive media_id
• POST JSON payload to media/metadata/create in form of:
  { media_id: media_id, alt_text: { text: "A description of the photo" } }
  and get no meaningful response
• POST to statuses/update with status and media_ids fields.

[Gargron]

Could potentially make POST /api/v1/media optionally accept an "alt" param straight away; though I don't know how it'd be handled in the UI.

[marrus-sh]

Since images are specified using <a style="background-image: url(…);"> and not <img> this would probably just use the aria-label attribute.

This also might provide an alternate means for including content warnings for images as in #239 – instead of just “Sensitive content: click to view” the alt text for the image could be displayed instead.

[ZoeBijl]

I would suggest to use <img alt=""> rather than the current implementation. If you need it clickable: <a href="wheatley.png"><img src="wheatley-thumb.png" alt="Wheatley from Portal 2"></a>.

[Gargron]

@MichielBijl Current implementation is for using background-size: cover to fit different-sized images into same-size containers.

[marrus-sh]

Here's a minimal alternate implementation that should allow you to use <img> elements instead, if that is desired:

HTML:

    <a class="image-container" href="imgsrc.png">
        <img class="post-image" src="imgsrc.png" alt="Example Image">
    </a>

CSS:

    *.image-container {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 110px;
        width: 100%;
        overflow: hidden;
    }
    *.post-image {
        display: block;
        width: 100%;
        flex: none;
    }

The flexbox centers the image within the container and then overflow: hidden chops off anything left outside.

EDIT: Using just height: 110px assumes that the resulting image will scale to > 110px tall. Using max-height: 110px means that for especially (vertically) narrow images, the height may be smaller than 110px but no extra space will be taken up. This means that images will not exceed the 100%/110px same-size container, but may be smaller. (Under this model, the left and right sides of an image will never be chopped off.)

[estln]

Hey all, since Mastodon has gotten way more popular lately, it'd be cool to see this become a thing so we aren't excluding blind/visually impaired people.

[Cassolotl]

Hello, I support accessibility for disabled folks.

[pwoolcoc]

@Gargron I would be willing to take this on, if you are interested in the feature.

[raingloom]

If this was done well, it would be a huuuge bonus for Mastodon imo, especially since most sites don't have this.

[pwoolcoc]

Ok, I haven't heard from @Gargron about this, but I think I'm just going to work on it anyway

[clarfonthey]

Bumping this; it would be great to do this!

Simply adding the description in the toot content itself isn't always ideal, because when there are multiple images it's harder to describe them than simply adding alt text.

[nightpool]

I'm interested in getting this implemented in theory, but implementing it with a bad UX would make the accessibility worse then if we hadn't implemented it all, since users wouldn't know whether to write image descriptions in the body of the toot or in the alt text.

The best UX here is one that had a clear, blank form for each image you upload (with a call to action explaining that it's for a description of the image). For sure each full view should show the description, and there should also be a way to view the descriptions on an image or set of images without going into fullview, or at least an indication that descriptions exist. Maybe a little "..." superimposed over the image, or a button below the image gallery that expands to show the descriptions?

@pwoolcoc are you still interested in working on this? otherwise would someone else be interested in taking this on?

[pwoolcoc]

@nightpool I've got the API side of this pretty much done, but I haven't touched the UI yet. I'm getting some tests together for the API addition and then I'll probably be opening a PR for that. After that is merged I will start prototyping some UI/UX stuff.

[Sylvhem]

Hello @pwoolcoc! Did you make any progress on this?

[pwoolcoc]

@Sylvhem hello! sorry for the super-late reply. I've made progress but nothing to open a PR for yet. It's been summer vacation time around here so I haven't had many spare cycles for this. I have a bit of a crunch at work next week but I will try to get at least the API endpoint ready to PR this weekend.

[ZoeBijl]

@pwoolcoc if you want any help with HTML/CSS let me know, can spare some time for this.

[contraexemplo]

I'd like to emphasize @nightpool's suggestion about indicating there is a description not only when adding it but when it's already posted. One of the things I really disliked on Twitter was how there is no way you could know if there is a description or not without turning the screen reader on or viewing the image info. It was a major complaint between some of my blind friends, mainly because this is a feature that was released opted out and Twitter didn't seem to publicize it as much as necessary — they even forget to use it on official accounts sometimes. So, in addition to help improve the tool's visibility for those who are not familiar, this also helps folks that are used to write descriptions to every image they boost but can't verify for sure if there's alt text or not.

Another thing I noticed is how there's no way to describe images on mobile.twitter.com (that personally I like more than the desktop version and even the official app because I'm visually impaired — navigation is way better). Making this tool accessible in every way possible is a must.

[averageunicorn]

Just commenting to emphasize that a quick way to read image descriptions visually (not only check if they exists) would be great. Preferably also a setting to always display them without the need to click anything.

For folks who need them despite using Mastodon visually, as I've seen some people say that this is a big issue for them with birbsite's way of doing this, the assumption that anyone who needs image descriptions for some reason will be using a screen reader anyway.