[Accessibility] Hovertext for image descriptions is insufficient

[Cassolotl]

image descriptions should be made available in the same formatting as the text of posts.

on-hover is not good enough, not everyone who needs an image description uses a screen reader and not everyone who needs an image description can read hover text.

Source

---

• I searched or browsed the repo’s other issues to ensure this is not a duplicate.

[ghost]

we'll expand on this idea a bit since sometimes when we point the issue out people ask us for details, but basically - hover text is hard to invidually style for people who need custom stylings for their browser (for example, overriding fonts, making text larger, etc. hover text is also very difficult (almost impossible?) to view without a mouse.

a potential nice way to handle this could be a "view image description(s)" button underneath a post, that can be optional (if turned off, the image descriptions just are written beneath the images). ideally the image description text would be very similar to the post's general text (same font and size and everything).

[hughrun]

This seems like a pretty reasonable request to me, just wondering about implementation - I wouldn't want to see this become "image description is always visible to all users".

@Fidgetcetera what do you mean by 'beneath'? Do you mean on a new line below the image, or rendered on a layer below the image so it's not visible?

Is the proposal that the button would basically be a toggle to show the description in place of the image? Could it (additionally?) be a user setting so that they always see the description by default rather than the image?

[clayote]

When you click an image, currently, you get a modal with the image displayed at full size. How about simply displaying the image description there as well?

[ghost]

@hughrun
"rather than" is not a great idea, since for some people they can see the image, but cannot make out or discern all the details, and would prefer to see both at the same time. we meant on a new line, beneath image(s). we aren't really UI designers here, so we're not sure if the best way would be placed beneath each individual image of multi-image posts, or just at the end of the post after the images, or what.

[ghost]

@LogicalDash that might be a bit better, but an option to view it just alongside the normal post text would also be great.

[hughrun]

Multi-image posts can (should) have a different description for each image, so it would either need to be a description under each image or multiple descriptions at the end of the post something like
Image 1: tabby cat

Image 2: black cat

[ryliejamesthomas]

FWIW in the Android client I use (Subway Tooter) the descriptions are always shown under the image sand it really isn't intrusive, and in fact a good reminder to add them, and a good way of normalising the practice.

[trwnh]

Tumblr also showed image descriptions in their lightbox. Mastodon should consider doing the same.

[Kansattica]

As I noted in the pull request, it'd be fairly easy to have the alt text appear under the image in the lightbox. The PR shouldn't be merged as- someone who understands the code better should have the image scale down to make room for the alt text.

[ryliejamesthomas]

It seems a bit odd to me that people should have to click on an image before they have an idea of what it is?

[ZoeBijl]

Any updates on this? Is there something people can help with?

[nightpool]

@ZoeBijl the linked pull needs to address the feedback from scottohara: #9754 (review), as well as visual design improvements.

From a broader perspective, shouldn't it be the responsibility of the user agent to provide an accessible, customizable display of title text? Even mobile browsers have title text display these days, I don't think it's unreasonable to ask desktop browsers to improve their accessibility in this area.

[ZoeBijl]

Even mobile browsers have title text display these days

Do you have an example of that? In Safari on iOS 13.2 I only see this when I long press on the image. And then it only works on images in the dialog/carousel view. On desktops it’s only available if you’re using a mouse. So keyboard and touch users are out of luck. This short note on the title attribute by Steve Falkner is a good read.

tl;dr: If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.

The browser landscape being what it is, I think it makes a lot more sense to make our software more usable rather than to wait for user agents to do so. This is an issue that can be fixed with a few lines of HTML and CSS. Why wouldn’t we?

[Kansattica]

I don't know enough about Mastodon's frontend code or modern accessible HTML to be able to address the comments on that PR, but I'd be happy to work with or hand it off to someone who does.

For what it's worth, my mobile browser (Chrome on a Pixel 2) doesn't even show alt text when long pressing on an image- there's no way I know of to see alt text without opening the HTML or using an app.

Mastodon just added that big, fancy new UI for composing alt text- what good is it if we don't let people see it?

[evalarumbe]

Mastodon just added that big, fancy new UI for composing alt text- what good is it if we don't let people see it?

Alt text does plenty of good for accessibility and SEO even when it isn't visible, as long as it's available to screen readers and search engine crawlers in the source.

Other posts in this thread make a good case for making the text more available visually as well, but it's a separate issue.

In case it helps, here's an article on alt text best practices that's a little friendlier to read than the spec.

[Sonstwer]

Hi,
i like it, that on twitter there's a small "ALT" icon in a corner, which is clickable. Therefore i can just take one look and see if there are image alt texts. I prefer to only share pictures with picture description for accessibility reasons and therefore a way of seeing if pics include them without having to click them would be really nice.
i would also love it if there was an option to automatically open them beneath pictures or show "NO ALT" tags if pics don't have them (that is the functionality i use on twitter with the browser plugin "Alt or Not" - https://www.abitofaccess.com/alt-or-not

[alexlehner86]

Hi, i like it, that on twitter there's a small "ALT" icon in a corner, which is clickable. Therefore i can just take one look and see if there are image alt texts. I prefer to only share pictures with picture description for accessibility reasons and therefore a way of seeing if pics include them without having to click them would be really nice. i would also love it if there was an option to automatically open them beneath pictures or show "NO ALT" tags if pics don't have them (that is the functionality i use on twitter with the browser plugin "Alt or Not" - https://www.abitofaccess.com/alt-or-not

I would love to have this feature in Mastodon as well. It's great that we can already add alt text to images when we compose a toot. But a lot of users don't know about their importance for accessibility, especially for screen reader users. Furthermore, everyone will benefit if you can a) see right away if an image has alt text and b) view the alt text by activating a button. For people with sight, the alt text can direct your attention to details of the image you overlooked or did not pay attention to.

So, if I can help in any way in implementing this, please tell me! 😊

[pkiff]

New to Mastodon and totally new to its codebase, but It occurs to me that there may be a couple things worth discussing here before someone (not likely me!) begins to code or mock up an example of how this feature might be implemented.

• This is a significant UI/UX change that should be considered in the context of the overall design system (assuming there is one?).
• Posts with an image may already contain an icon overlaid on top of the image to "Hide image". The alt icon or activation element will need to be clear and unambiguous when it is shown alongside that one. Or maybe users might want to be able to view the alt text automatically for hidden images and have an option to display the image. Maybe it will be better to have a link or activation button that sits BELOW the image rather than overlaid on top of it. This set of interface actions should be built (or not) alongside and in tight coordination with the building of potential show-alt-text function.
• Consideration of how to integrate an alt text toggle into posts that use the content spoiler/warning feature is also needed. In particular, will there be too many toggles? And can all these toggles work correctly when nested?
• There is a significant code and structure difference between a pop-up modal style of alt-text display (like what appears on Twitter) vs. one where alt text is simply revealed or not inline. This choice may also affect whether there can be a preference setting that allows alt text to be shown all the time on all images if desired.

Not sure where to start with these steps, but thought perhaps that starting off with some discussion of what the desired outcomes are along with how those outcomes work (or don't) with pre-existing features and design trends in Mastodon would be worthwhile.

[Sonstwer]

There are more things to consider IMHO

1. There is an upcoming new version. It will add the feature to edit posts
   (though at the time of writing the test versions cannot edit image descriptions)
2. if image descriptions will be editable, it might be a good idea to add a button to add image descriptions afterwards.

so i don't know how and when the new version will be ready, but it will of course affect this topic as well.