Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: accessibility #239

Open
stereobooster opened this issue Jan 4, 2024 · 0 comments
Open

Feature request: accessibility #239

stereobooster opened this issue Jan 4, 2024 · 0 comments

Comments

@stereobooster
Copy link

stereobooster commented Jan 4, 2024

Motivating example

https://mermaid.js.org/config/accessibility.html

  graph LR
      accTitle: This is the accessible title
      accDescr: This is an accessible description
      A[Identify Big Decision] --> B{Make Big Decision}
      B --> D[Be done]

Explanation

In Mermaid one can add accTitle and accDescr, which then can be used like this

<svg
  aria-labelledby="chart-title-mermaid-1668725057758"
  aria-describedby="chart-desc-mermaid-1668725057758"
  xmlns="http://www.w3.org/2000/svg"
  width="100%"
  id="mermaid-1668725057758"
>
  <title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
  <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
</svg>

For SVG it would just work, but for images (server side rendering) it would need to be exposed, for example, like this:

const { content, title, description } = render(config)

And as long as we are here it could also expose width and height for generated image

const { width, height, content, title, description } = render(config)
@stereobooster stereobooster changed the title Feature request: accessibility consideration Feature request: accessibility Jan 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants