Hi @nikku and all,
sorry for not answering for so long. In the meantime however, in our project we’ve put some time and effort into finding a solution to your points
How to navigate the diagram in a meaningful (i.e. semantic) way?
What would be appropriate labels?
Disclaimer: In our project, we only use a subset of all BPMN.io capabilities. Though we think, our solution could be adopted.
We implemented a solution for a meaningful keyboard navigation and labelling that meanwhile got approved by our A11Y auditors. So now seems to be the right time to share it with you.
Keyboard navigation concept
First, we weren’t happy with the mentioned tabindex=0
approach, since the element order inside the SVG does not match the visible order. This leads to a more or less
chaotic/random ordering when it comes to iterating the diagram via keyboard. That’s why we set tabindex=-1
to all our diagram elements and wrote some custom keyboard event handling logic:
First, our auditors recommended us to use aria-role=application on our canvas in order to indicate that the following interaction would be a custom one.
<div id="canvas" role="application" aria-label="your bpmn control">
All interactive diagram elements that e.g. open a context menu must be of role=button
.
When the user’s focus is on our canvas application, pressing ENTER activates interactive keyboard mode. Pressing ESC leaves the keyboard mode.
We defined and implemented the following custom navigation semantics:
- Enter
- Open context menu of element or select context menu action
- Esc
- Leave keyboard mode or close context menu
- Right
- Navigate to target node of arrow
- Left
- Navigate to source node of arrow or to source arrow of node
- Down
- Navigate to next exit arrow of node
- Up
- Navigate to previous exit arrow of node
- Pos1
- Navigate to first exit arrow of node
- Ende
- Navigate to last exist arrow of node
This basically allows end user to navigate the diagram deterministically along the arrows starting with the start node.
Since the custom navigation semantics is not self-explanatory, we added the above description as an a11y hint to our application.
Labelling diagram elements
We introduced a custom legend for our BPMN with domain specific labels. Each node inside the BPMN refers to such a legend entry via aria-details.
Also aria-describedby refers to an element that is only visible to screen readers and describes possible keyboard actions, e.g. the description of an interactive node in our diagram “Left: to incoming arrow. Up/Down: to outgoing arrow (1). Enter: open context menu.”
Each element received a custom aria-label that provides more context about the current node inside the diagram:
- What’s the type of node I’ve currently focussed
- What’s the name of it
- What’s the incoming or outgoing arrows
Accessible context menus
We decorated our context menus as role=menu
containing children of type role=menuitem
, and gave each menuitem an aria-label e.g.
<div class="djs-popup-body" tabindex="-1" role="menu">
<div class="entry bpmn-icon-trash" data-id="delete" title="Remove" aria-label="Remove" role="menuitem" tabindex="0">
<span>Remove</span>
</div>
</div>
API Recommendations
Summing it all up, I think BPMN.io could focus on the following work streams in order to improve accessibility:
- Make use of HTML semantics where possible. e.g. context menus could be implemented as native HTML menus.
- Provide an easy way to parametrize aria-attributes, like
role
, aria-details
, aria-describedby
, aria-label
of diagram nodes
- Ensure the element SVG order corresponds to the visual order such that the text representation, screen readers (like NVDA or Jaws) read out, match the visuals.
- Natively provide a keyboard navigation algorithm like the one above thus enabling users to interactively explore the diagram
P.S. Unfortunately we didn’t look into multi selection, since this isn’t really (yet) a requirement for our project.
Hope this helps.