• About
• Development
• Building
• Technologies and References

This proof of concept explores the development of an intuitive and screen-reader accessible interface for exploring diagrams.

The goal is to define a data format to which popular diagram languages like Mermaid and DOT can be converted, and to build an interface leveraging this accessibility-focused data format.

The current application screen provides:

• A functional live editor for creating diagrams using Mermaid syntax.
• A JSON representation of the diagram, converted to the proposed data format for building the accessible interface.
• The existing SVG rendered by Mermaid for reference.
• A experimental interface that introduces new ways for exploring the diagram without relying on the rendered SVG.

A screenshot of the screen described above:

Clone the repository and install its dependencies with the following steps:

git clone git@github.com:gbaptista/a11y-diagrams.git

cd a11y-diagrams

npm install

Run the project in development mode:

npm run dev

npm run dev -- --open

Running tests:

npm run test:unit

Running linters:

npm run lint
npm run format

To generate a production version:

npm run build

You can preview the production build by running npm run preview.

This project was built using the following technologies:

• HTML, JavaScript, and CSS
  • WAI-ARIA
  • CSS and JavaScript accessibility best practices
• Frontend Framework: Svelte
  • Svelte Accessibility
• Frontend Toolkit: Bootstrap
  • Bootstrap Accessibility
• Live In-Browser Code Editor: Monaco
  • Monaco Editor Accessibility Guide
• Diagramming Language: Mermaid
  • Mermaid Accessibility Options
  • More Accessible Mermaid Charts #2732
• Syntax Highlighting: Prism.js