Make diagram accessible for screen readers (blind and visually impared)

[hamidrezaabroshan]

Hi,
I filed this bug and they said that the bug relates to bpmn.io.

As you probably can guess, the canvas html element is not accessible by default for screen readers because they can only read textual information.
As this component may used several time in zeebe simple monitor app, fixing this component can fix several issues.
To make canvas accessible, you can google making canvas accessible for screen readers and for instance, you can look at this article
Also, you can test accessibility of components by using free and open source nvda screen reader on windows.
You should be able to navigate in your page by arrow keys and tab or shift+tab.
and be able to findout this diagram info.

Thanks.

---

A good chunk of additional context on A11y compliant diagram navigation is provided here.

---

Depends on bpmn-io/diagram-js#567.

[nikku]

@hamidrezaabroshan Which exact information would you like to have available for each flow node?

I believe you filed a very similar issue with camunda/camunda-modeler#2588, right?

What shall be different in this particular case?

[hamidrezaabroshan]

@nikku,
I think that this issue is for different app.
this issue is for zeebe simple monitor and that similar issue is fore camunda-modeler

Also, I think solving this is different and simpler.
If you think these are same, please comment down below or if you think I put this issue in wrong repo please comment here
Thanks.

[hamidrezaabroshan]

In simple monitore, /views/instances/{key} page shows a diagram that indicates which flow is executed and which has errors.
I just want name of flows and theirs status in a logical series.
I don't know if this diagram shows more info or not.

[nikku]

Both views show the same diagram, rendered by bpmn-js. So I assume that it is more or less the same issue.

If we can make the diagram accessible to you, it will automaticallybe accessible in the Camunda Modeler, too (camunda/camunda-modeler#2588).

[hamidrezaabroshan]

Hi again @nikku, I urgently need to work with the Simple monitor and Camunda modeler in my job. If possible, I want to have a session with tech people.
If possible, while the dev team is resolving these accessibility issues, I need some info to write a console client that gets me the info that I need at work.
Thanks.

[nikku]

@hamidrezaabroshan We'll not be able to follow up on this issue immediately.

For your specific needs, consider if the BPMN document or the BPMN model, or the diagram model may provide you with the information you need.

Also consider to ping this back to simple-monitor. They may be able to work around this issue, i.e by providing accessibility information on top of or next to the diagram.

[hamidrezaabroshan]

@nikku , "Also consider to ping this back to simple-monitor. They may be able to work around this issue, i.e by providing accessibility information on top of or next to the diagram."
I created issue. What else can I do?

[hamidrezaabroshan]

Hi again @nikku can you please give update if anything done regarding this issue?