We have an application that uses diagrams and have made it accessible with full keyboard navigation and screen reader providing situational awareness for readers.

But I can't find anywhere how someone needing a screen reader i.e. blind, can create content. This is just like Visio. How can such a user add nodes and links and route them, when they can't see anything? How readable would that be for others after, and how accessible would the result be.

I understand how to make the diagram accessible, but not what it really means to make its construction accessible. Imagine how a Paint application would work ?

Please help me sort this out.

  • 1
    Try running a screen reader when editing a powerpoint presentation. It has some interesting announcements as you create object, resize, and move them around. Sep 12, 2023 at 16:43
  • Thanks for the advice
    – Alain P
    Sep 12, 2023 at 17:33

1 Answer 1


I guess you’d need to distinguish diagrams and free form drawing.

Charts from tabular data

Classic bar, line, or pie charts are generated from tabular data. As long as the tool allows for navigation and creation of tables with a screen reader, a screen reader user can structure these data points.

Diagrams and graphs from text

Graphs and diagrams visually present semantically linked data. A good diagramming tool doesn’t allow for free form, but already uses standard symbol libraries and can check for loops or missing connections.

That data can also be linked with a screen reader by writing in markup languages. mermaid is such an example. The graph then is usually being laid out by an algorithm.

graph TD;

would produce the following rendering

A rendering of the above mermaid code in three lines. First contains A, second contains B and C, third D. Arrows are pointing from A to B and C, and from B and C to D

Try it in the Mermaid Live Editor

Mermaid allows for

  • Flowchart
  • Sequence Diagram
  • Class Diagram
  • State Diagram
  • Entity Relationship Diagram
  • User Journey
  • Gantt
  • Pie Chart
  • Quadrant Chart
  • Requirement Diagram
  • Gitgraph (Git) Diagram
  • Mindmaps
  • Timeline

SVG is another, very powerful markup language for any kind of vector drawing, which can simply be typed.

Yet another example is LibreOffice, which allows you to create mathematical formulae by means of point and click, or by typing in MathML syntax.

Syntax can be checked and errors recognised.

When I was looking for an accessible Content Management System back in the days, the certified variant also used a markup language (long before markdown). So I‘m assuming it to be an accepted solution for assistive technology. I‘m not an AT user myself and have no insights into how practical that actually is.

  • I have used dot for many years in other projects, which feels similar to mermaid. But here the user can already easily make dialog selections and generate a valid diagram, but the layout might not be well suited to easily communicate the meaning of the diagram w/o performing some manual layouting, which was really the core of my question.
    – Alain P
    Sep 14, 2023 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.