https://github.com/gbaptista/a11y-diagrams
Intuitive and screen-reader accessible interface for exploring diagrams.
https://github.com/gbaptista/a11y-diagrams
Last synced: 6 months ago
JSON representation
Intuitive and screen-reader accessible interface for exploring diagrams.
- Host: GitHub
- URL: https://github.com/gbaptista/a11y-diagrams
- Owner: gbaptista
- Created: 2023-03-17T01:22:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-28T18:56:23.000Z (over 2 years ago)
- Last Synced: 2025-02-14T13:50:32.054Z (8 months ago)
- Language: Svelte
- Size: 584 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# a11y-diagrams
- [About](#about)
- [Development](#development)
- [Building](#building)
- [Technologies and References](#technologies-and-references)
## About
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](https://mermaid.js.org/syntax/flowchart.html) and [DOT](https://graphviz.org/doc/info/lang.html) 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:
## Development
Clone the repository and install its dependencies with the following steps:
```sh
git clone git@github.com:gbaptista/a11y-diagrams.git
cd a11y-diagrams
npm install
```
Run the project in development mode:
```bash
npm run dev
npm run dev -- --open
```
Running tests:
```sh
npm run test:unit
```
Running linters:
```sh
npm run lint
npm run format
```
## Building
To generate a production version:
```bash
npm run build
```
You can preview the production build by running `npm run preview`.
## Technologies and References
This project was built using the following technologies:
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
- [CSS and JavaScript accessibility best practices](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript)
- Frontend Framework: [Svelte](https://svelte.dev)
- [Svelte Accessibility](https://kit.svelte.dev/docs/accessibility)
- Frontend Toolkit: [Bootstrap](https://getbootstrap.com)
- [Bootstrap Accessibility](https://getbootstrap.com/docs/5.3/getting-started/accessibility/)
- Live In-Browser Code Editor: [Monaco](https://microsoft.github.io/monaco-editor/)
- [Monaco Editor Accessibility Guide](https://github.com/microsoft/monaco-editor/wiki/Monaco-Editor-Accessibility-Guide)
- Diagramming Language: [Mermaid](https://mermaid.js.org)
- [Mermaid Accessibility Options](https://mermaid.js.org/config/accessibility.html)
- [More Accessible Mermaid Charts #2732](https://github.com/mermaid-js/mermaid/issues/2732)
- Syntax Highlighting: [Prism.js](https://prismjs.com)