So in our go js diagrams, we want to support various A11Y aspects such as - keyboard navigation, text alternatives for non-text content etc., More can be found at Accessibility Principles | Web Accessibility Initiative (WAI) | W3C
So I was wondering, whether go js supports anything OOTB in this regard.
Thanks as always for any help or suggestions.
This is a complex subject. In general I believe that an accessible page that includes a diagram will need to have very specific content that helps people understand and manipulate the diagram.
Diagrams are inherently very two dimensional, so there are many plausible ways to navigate through a graph. Only the author of the diagram will know how best to communicate its meaning, so only the author will have a chance at producing a good linearization of the contents of the diagram. And what should you do if a diagram has 10000 nodes and 20000 links in it?
Furthermore only the author will know which features of each node or link are meaningful and which ones are not. If colors or shapes are meaningful, their denotations can be translated into text; otherwise you would want to ignore such stylistic choices.
Does go js APIs provide anything to mark specific GraphObject of diagram tabbable ?
For instance, in this specific diagram below, we want user to navigate through nodes/ edges of the diagram along with some specific GraphObjects in each node/ edge:
In the above screenshot, starting from Start node, we want users to tab through edge and add button on each edge, context menu on node (when present), Hide or Show links on group nodes and so on…
Also just like we have diagram.select(Part part) to select a node or link within the diagram, is there a way to select GraphObject within a Part by using name of the GraphObject ?
Each diagram can have vastly different appearances and behaviors. Furthermore, the purpose of a same diagram may vary greatly depending on the context. So there is no predefined way of navigating through a diagram using the keyboard. And certainly no predefined way for users to modify every aspect of every object in a diagram. The whole point of templates is to have the programmer design what is fixed and what is variable for each part.
An example of customized keyboard behavior that is similar to what you seek is implemented in the DrawCommandHandler extension. The sample demonstrates different ways in which the arrow keys can be used for navigating and manipulating the diagram: Drawing Commands
The implementation of handling the arrow keys in different manners is at: https://gojs.net/latest/extensions/DrawCommandHandler.js
However, for the uses that you discuss, you will need to implement additional keyboard event behaviors. Well, showing context menus is already handled by the “Menu” key invoking the CommandHandler.showContextMenu command, and editing editable TextBlocks is already handled by the “F2” key invoking the CommandHandler.editTextBlock command.
GoJS Commands -- Northwoods Software
But only you know that your app has buttons on links that could be clicked. And you talk about hiding and showing links on groups, which must mean something specific in your app.
Thank you for providing this information. Another question that I got around A11Y is, do we need to do anything special (Similar to setting aria-label property in case of traditional single page applications) at GraphObject level so that screen readers would read through any texts or hints, help texts etc., ?
Yes, you would – GoJS does not do anything for that.
