[Usability] Rethink flow for adding (alt-text to) images

[danyowdee]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When creating a new Toot/post, the current flow/UI for adding an image overlays a text field directly over a cropped version of the image in order to add alt-text.

This has multiple severe usability shortcomings:

1. The insertion marker of the text field is routinely outside the viewport, so you don’t know where the next key stroke ends up.
2. The text field has no background colour, so the white text is illegible on top of images with a light area towards the bottom.
3. The image isn’t fully visible when composing the alt text, which is an obvious problem when trying to describe an image with several details.
4. Moving the text cursor around is cumbersome and all sorts of broken, once you try to moving past the currently visible part of the text.
5. The text field is limited to typing a single line. This is unfit for the purpose — the input element should be a text view!

Expected Behavior

1. When composing the alt-text, the entire image is visible.
2. The element receiving and displaying text input does not overlay the image. If the element overlays the image, (which is a bad idea because the text will at times obscure important details of the image you are trying to describe) it has a background providing sufficient contrast.
3. The element receiving and displaying text input allows multi-line text entry.
4. The insertion marker can reliably be re-positioned inside the text input element.

Steps To Reproduce

1. On iPhone, create a new Toot.
2. Attach the following image:
   (Source: https://home.social/@[email protected])
3. Attempt to describe the image, including the text in the image.

Environment

- Device: iPhone 13
- OS: iOS 16.2
- Version: 1.4.8
- Build:

Anything else?

No response

[wayneca]

This bug prevents users from including an "alt" text description for an image that they insert in a toot. Many users who are visually impaired depend on those alternate text descriptions being read to them. This bug makes it difficult or impossible to do the right thing for accessibility when including an image using the iOS Mastodon app.

On an iPad Air. if I insert an image, I can't see the text that I would need to select and type into it at the same time, either with or without an attached keyboard. The text region that must be selected and typed into is outside the part of the image that is displayed. It also can't be seen if that region of the image is white.

#864 addresses the same problem and it has initial code for a possible fix.

I hope the person assigned the issue marks it as a high priority accessibility bug.