Skip to content

Instantly share code, notes, and snippets.

@matt-bernhardt
Last active September 21, 2023 17:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matt-bernhardt/5aa7624fa502f573e93d74c6748d2d3e to your computer and use it in GitHub Desktop.
Save matt-bernhardt/5aa7624fa502f573e93d74c6748d2d3e to your computer and use it in GitHub Desktop.
Mermaid and accessibility

This is a demonstration Mermaid diagram which implements a description tag. Does the VoiceOver screenreader find it?

graph LR;
      accTitle: Big Decisions;
      accDescr: This is the description for this Mermaid diagram. The diagram depicts the Bob's Burgers process for making big decisions;
      A[Identify Big Descision] --> B{Make Big Decision};
      B --> D[Be done];

If you are hearing this text, then you have left the diagram, and should have already heard the description contents.

The description text began:

This is the description for this Mermaid diagram...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment