Skip to content

Mermaid image accessible descriptions #2724

@ascholerChemeketa

Description

@ascholerChemeketa

Currently, mermaid diagrams just dump <description> or <shortdescription> into the text (see sample-article for examples).

Mermaid has its own way to add accessible title/description that will be embedded into the SVG produced:
https://mermaid.js.org/config/accessibility.html

So one approach would be for the author to add info there. Potentially, that is the most flexible as an author could provide different descriptions for different subdiagrams. But it would leave the info outside of PreTeXt's easy reach.

Alternatively, we could try to inject PTX authored descriptions into the mermaid source (yuck).

Or, we could try to figure out a way to provide an accessible label for the entire image block. i.e.

<image box>
<mermaid pre/>
<description div/>
</image box>

Where the description is visually hidden but set as the @labeled-by for the image box. Not sure if that would work well with screen readers or not. Would need testing.

Loosely related to #2568

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions