Skip to content

Feature request: Accessibility (a11y) support for generated diagrams #11

@bartvanderwal

Description

@bartvanderwal

Summary

I'm working on remark-kroki-a11y, a plugin that adds accessibility features to Kroki-generated diagrams. I'd like to explore whether some of this functionality could be integrated into or work better with remark-kroki.

Background

Currently, remark-kroki-a11y wraps the now-archived remark-kroki-plugin to add:

  1. Source code display - Expandable section showing the diagram source (PlantUML, Mermaid, etc.)
  2. Natural language descriptions - Deterministic parsers that convert diagram syntax to accessible descriptions for screen readers
  3. Proper alt text and aria-describedby - For the generated images

This helps meet WCAG accessibility guidelines for diagrams in documentation.

Relationship to issue #7

I noticed the closed issue #7 (Dual output mode) discussed showing PlantUML source alongside generated diagrams. The solution there was imperative (use remark-code-example), but our approach is declarative with configuration options:

[require('remark-kroki-a11y'), {
  showSource: true,              // Show source code in expandable section
  showA11yDescription: true,     // Show natural language description
  useTabs: true,                 // Use tabs vs separate sections
  locale: 'en',                  // For i18n
}]

Question / Proposal

Would you be interested in:

  1. Collaboration - We could potentially contribute a11y features to remark-kroki
  2. Integration - Or design remark-kroki-a11y to work better as a companion to remark-kroki (we're considering switching from the archived remark-kroki-plugin)
  3. Feedback - Any thoughts on the best architecture for this?

Why this matters

  • Accessibility is increasingly required by law (EU Accessibility Act, ADA, etc.)
  • Diagrams are often inaccessible to screen reader users
  • Documentation sites need compliant diagram rendering

Resources

Looking forward to your thoughts!

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