Avoid using `<figcaption>` for image alternative text

[yamanoku]

Problem

Currently, in Post.tsx lines 219-223, <figcaption> is being used as the alternative text for images.

hollo/src/components/Post.tsx

Lines 219 to 223 in 7f69716

	medium.description && medium.description.trim() !== "" ? (
	<figure>
	<Medium medium={medium} />
	<figcaption>{medium.description}</figcaption>
	</figure>

However, <figcaption> should be used as a caption (description) for the image, not as alternative text. Alternative text is used to convey the content of the image to users who cannot visually perceive it. On the other hand, a caption is meant to supplementarily explain the content of the image.

In this state, screen reader users might have both the image's alt text and <figcaption> element read aloud twice, redundantly.

Example Case

• Example post

Suggestion

Images using only <Medium medium={medium} />, without using <figure> and <figcaption> elements.

{post.media.length > 0 && (
  <div>
    {
      post.media.map((medium) => (
        <Medium medium="{medium}" />
      ))
    }
  </div>
)}

[aliceif]

Is there any chance of access to alt text in some way - primarily on mobile browsers coming back?

I am not asking for a revert of the figure/caption change, I understand that the way things were had problems for non-sighted users, but alt text the way it tends to be used on the Fediverse often is a useful resource even for people for whom the image is shown by their browser. Having no access to it on mobile browsers (on desktop you can peek it in the HTML source which while inconvenient at least is a way) due to it being unreachable is, in my eyes, a mistake.

[dahlia]

Thank you, @aliceif, for your valuable feedback. To address the issue of making alt text accessible on mobile browsers, we can consider the following solutions:

1. Implement a tooltip that displays the alt text when a user hovers over the image or taps on it (for touch devices).
2. Display the alt text as a visible caption below or above the image, ensuring it does not interfere with the image's visual presentation.
3. Use an image overlay that appears when the image is clicked or tapped, displaying the alt text in a readable format.

These solutions aim to maintain the accessibility of alt text for all users, including those using mobile browsers. Let us know your thoughts on these approaches. /cc @yamanoku

[yamanoku]

@dahlia @aliceif
Thank you for your suggestions. I appreciate your effort to make alt text accessible on mobile browsers.

However, I believe that using <figcaption> to describe the alternative text is not the correct way to use HTML. Therefore, I don't think it's a good idea to revert to the previous implementation.

I'm currently considering an alternative solution using the <details> element to display the alt text below the image when it's available. This would allow users who need the alt text to access it, while keeping it hidden by default for those who don't.

While tooltips and overlays are also options, I'm concerned that they might compromise accessibility. I believe that using pure HTML is the best approach to ensure accessibility for all users.

[dahlia]

I'm currently considering an alternative solution using the <details> element to display the alt text below the image when it's available. This would allow users who need the alt text to access it, while keeping it hidden by default for those who don't.

That's a good idea! 👍

[yamanoku]

Thank you! I will create a pull request with that approach.

[dahlia]

@yamanoku's fix (#110) will be shipped with Hollo 0.6.0.