How to make modeler keyboard accessible

Hi @robert. Welcome to our forum and sorry for a late reply on this one.

Regarding accessibility you have a very good point. There is potential to improve. I’ve personally already looked into parts of this topic a while back, albeit did not find a great solution.

Generally speaking, we should aim to have decent accessibility built into the tool rather than built on top of it. With your help, maybe we can get to a point where we can pick that up as a topic.

As it stands, the diagram editor is not really friendly to screen readers due to two aspects:

  • it not use browser native focus and navigation (this would give us tabbing out of the box), cf. diagram-js#281
  • it does not appropriately label elements using assistive hints

From my point of view we should try to re-use existing technology (i.e. browser / screen reader being aware of focusable elements and so on) as much as possible.

In this regard, an obvious first step could be to add browser native focus handling (i.e. give diagram elements a tabindex="0" property and hook into focus and focus lost events to put our selection on top. The challenges here:

  • How to handle multi selection?
  • How to navigate the diagram in a meaningful (i.e. semantic) way?

Another improvement, if we had browser native focus handling would be to add aria-labels.

  • What would be appropriate labels?

It would be great if you could confirm whether this is a direction that makes sense to you, or whether you were already able to sort things out by building a plug-in.

3 Likes