Allow users to display `alt` texts to extend support for UAAG Guideline 1.1: Alternative content

[gautierchomel]

Thorium support for alternative content can be enhanced regarding alt texts, currently rendered by default in TTS only. There should be a way for the user to be informed about the presence of alt texts and to display them.

The proposal is to add a detail element to the image view modal.

Below are rules references.

---

UAAG 1.1.1 Render Alternative Content :

The user can choose to render any type of recognized alternative content that is present for a content element. (Level A)

• Abbr are rendered in a tooltip when they get focus.
• Users can access `alt` text through TTS. However, that support can be enhanced by providing the `alt` text in the image viewing modal.
• The video player allows activating subtitles if they are available. Embed players are the responsibility of the ebook content creator.

---

UAAG 1.1.2 Indicate Unrendered Alternative Content :

The user can specify that indicators be displayed along with rendered content when recognized unrendered alternative content is present.

• Abbr are indicated by a dotted underline.
• alt text are not indicated. See Issue #3139: Allow users to display alt texts.
• The video player indicates the presence of subtitles if they are available. Embed players are the responsibility of the ebook content creator.

[danielweck]

Related:

edrlab/r2-navigator-js#76

#1717

#3139

#1983

#1974

Bonus headache :)

<span role="img" aria-label="redacted text">&#160;&#160;&#160;&#160;</span>

[gautierchomel]

Based on the first test implementation in #3357.

Template proposal

<figure>
<img href="..." alt "...">
<figcaption>{ content of figcaption }</figcaption>

<p id="alttext" aria-hidden="true">{ content of alt }</p> <!-- hidden from AT to avoid repetition -->
<p id="aria-labelledby">{ content of the element with id referenced in labelledby }</p> <!-- hidden from AT to avoid repetition -->
<p id="aria-describedby">{ content of the element with id referenced in describedby }</p>
<p id="aria-details">{ content of the element with id referenced in aria-details }</p>
</figure>

Explanations

• There should be only one of alt or labelledby in publications.
• There should be only one of describedby or details in publications.
• The good practice in production is to make all those contents explicits alone, so we shall not add verbosity.
• Using list would add semantics that does not match the intent, and most cases will have only one or two elements.

Example

<!-- Main content -->
<figure>
<img id="img1" src="figure1.png" alt="Schematic of the device" aria-details="extdesc-1">
<figcaption>figure 1</figcaption>
<a id="extdesc-1" href="extended-descriptions.xhtml#desc-img1">Extended description</a>
</figure>

Would render as

<figure>
<img id="img1" src="figure1.png" alt="Schematic of the device" aria-details="extdesc-1">
<figcaption>figure 1</figcaption>
<p id="alttext" aria-hidden="true">Schematic of the device</p>
<p id="aria-details"><a id="extdesc-1" href="extended-descriptions.xhtml#desc-img1">Extended description</a></p>
</figure>

Considerations

• We discussed using details/summary with the alt content as the summary, but this seems risky because:

  • it does not explicitly describe the action attached to activating the summary;
  • there is no explicit limit on alt length (we may end up with a large summary);
  • it would require aria-hidden on the image itself.

• In the near future, we hope to have two new ARIA roles to securely identify the extended description and display it there instead of the link.

  • This is described by the Explainer: Extended Descriptions for Publications and the Web.
  • A POC EPUB is available to test implementation.

[arthur-lemeur]

This proposal seems complicated to me regarding its implementation in the dialog, the image is in its own component which handle the zoom in/out and the informations displayed are in their own component too, elsewhere in the code. An html rendering like your proposition doesn't not seem possible in the current state.

[gautierchomel]

I see. Then, we should keep only the p' like :

<p id="figcaption">{ content of figcaption }</p>
<p id="alttext" aria-hidden="true">{ content of alt }</p> <!-- hidden from AT to avoid repetition -->
<p id="aria-labelledby">{ content of the element with id referenced in labelledby }</p> <!-- hidden from AT to avoid repetition -->
<p id="aria-describedby">{ content of the element with id referenced in describedby }</p>
<p id="aria-details">{ content of the element with id referenced in aria-details }</p>

[gautierchomel]

Files for testing:

• AccessibleImageSampleBook_v2.2.epub - several images with alt and captions.
• State of the art epubtest Extended Descriptions
• Extended description POC EPUB - include aria-details

[gautierchomel]

After the draft implementation, several questions arrised:

• The panel does not allow to display authored CSS, meaning that any HTML present in figcaption or aria-detail will end up unstylled unless we provide an opinionated CSS.
• Sanitisation on HTML is necessary to display anything in this panel.
• Displaying only the alt in the modal will let it uncontextualised.

For future implementation we should consider:

• Triggering display of the altin the main reading view, with an affordance similar to the annotation display/mask.
• Extended Description as described in the W3C explainer cannot be implemented in a panel view as it will be expected to have it styled.
• Textual information attached to an image should be thought separately from the Zoom in Image Panel.