Accessible Diagram Example

Theme:

Edit details:

This sample is a copy of the Org Chart Editor sample, but has better support for accessibility. Diff the two files to see the enhancements.

First, this sample sets CommandHandler.isFocusEnabled and CommandHandler.isVirtualPointerEnabled to true when the user tabs into the diagram, so that the user does not have to type Ctrl-Alt-Enter, which they will probably not know about.

Second, this sample provides a custom CommandHandler.focusChanged event handler that updates a Div named "myLiveRegion". As navigation focus changes within the diagram, the text of the live region is set to a description of the current CommandHandler.focus GraphObject. Furthermore, when a new employee node is added, it becomes the new focus.

Each diagram should be customized thoroughly for your particular application, where you know what your users want or need to know. Note how in this sample it talks about employees instead of the more generic "Node"s and "Link"s in the Org Chart Editor sample. Also, this sample makes sure there is a textual description of the "TreeExpanderButton" and the button to call AddEmployee. In this case it just uses the same text that is used in a "ToolTip" for each button.

For another sample demonstrating screen-reader assistance, see IVR Tree sample. A more sophisticated accessibility customization could provide information for where the user could change focus to, and how to do so.

Diagram Model saved in JSON format:

{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":1, "name":"Stella Payne Diaz", "title":"CEO", "dept": "Management", "pic":"1.jpg", "email": "sdiaz@example.com", "phone": "(234) 555-6789" },
{"key":2, "name":"Luke Warm", "title":"VP Marketing/Sales", "dept": "Management", "pic":"2.jpg", "email": "lwarm@example.com", "phone": "(234) 555-6789", "parent":1},
{"key":3, "name":"Meg Meehan Hoffa", "title":"Sales", "dept": "Sales", "pic":"3.jpg", "email": "mhoffa@example.com", "phone": "(234) 555-6789", "parent":2},
{"key":4, "name":"Peggy Flaming", "title":"VP Engineering", "dept": "Management", "pic":"4.jpg", "email": "pflaming@example.com", "phone": "(234) 555-6789", "parent":1},
{"key":5, "name":"Saul Wellingood", "title":"Manufacturing", "dept": "Production", "pic":"5.jpg", "email": "swellingood@example.com", "phone": "(234) 555-6789", "parent":4},
{"key":6, "name":"Al Ligori", "title":"Marketing", "dept": "Marketing", "pic":"6.jpg", "email": "aligori@example.com", "phone": "(234) 555-6789", "parent":2},
{"key":7, "name":"Dot Stubadd", "title":"Sales Rep", "dept": "Sales", "pic":"7.jpg", "email": "dstubadd@example.com", "phone": "(234) 555-6789", "parent":3},
{"key":8, "name":"Les Ismore", "title":"Project Mgr", "dept": "Production", "pic":"8.jpg", "email": "lismore@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":9, "name":"April Lynn Parris", "title":"Events Mgr", "dept": "Marketing", "pic":"9.jpg", "email": "aparris@example.com", "phone": "(234) 555-6789", "parent":6},
{"key":10, "name":"Xavier Breath", "title":"Engineering", "dept": "Engineering", "pic":"10.jpg", "email": "xbreath@example.com", "phone": "(234) 555-6789", "parent":4},
{"key":11, "name":"Anita Hammer", "title":"Process", "dept": "Production", "pic":"11.jpg", "email": "ahammer@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":12, "name":"Billy Aiken", "title":"Software", "dept": "Engineering", "pic":"12.jpg", "email": "baiken@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":13, "name":"Stan Wellback", "title":"Testing", "dept": "Engineering", "pic":"13.jpg", "email": "swellback@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":14, "name":"Marge Innovera", "title":"Hardware", "dept": "Engineering", "pic":"14.jpg", "email": "minnovera@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":15, "name":"Evan Elpus", "title":"Quality", "dept": "Production", "pic":"15.jpg", "email": "eelpus@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":16, "name":"Lotta B. Essen", "title":"Sales Rep", "dept": "Sales", "pic":"16.jpg", "email": "lessen@example.com", "phone": "(234) 555-6789", "parent":3}
 ]
}

this forces the font to load in Chromium browsers

GoJS Features in this sample

Commands

A CommandHandler handles all default keyboard input events in a Diagram. There are many predefined methods on CommandHandler that implement common commands to operate on the Diagram or the current Diagram.selection>.

You can override CommandHandler.doKeyDown to handle additional keyboard shortcuts or to change which commands are invoked via the keyboard.

Your code can invoke a command by calling the appropriate method on the Diagram.commandHandler. Each command method has a corresponding can... predicate that your code can use to enable or disable any buttons that invoke the command. Your code can customize the behavior of a command by overriding the method on CommandHandler, or by setting properties on the CommandHandler or Diagram or Parts -- see GoJS Permissions.

There are several CommandHandler extensions that provide additional functionality.

More information can be found in the GoJS Intro.

Related samples

GoJS Extensions

GoJS can be extended in a variety of ways. The most common way to change the standard behavior is to set properties on the GraphObject, Diagram, CommandHandler, Tool, or Layout. But when the desired property does not exist, you might need to override methods of CommandHandler, Tool, Layout, Link, or Node. Methods that you can override are documented in the API reference. Various features of GoJS can be overriden, either by replacing a method on an instance (a feature of JavaScript) or by defining a subclass. You should not modify the prototypes of any of the GoJS classes.

In addition to our samples, GoJS provides an extensions gallery, showcasing the creation of custom tools and layouts. Those classes and samples are written in TypeScript, available at ../extensionsJSM/, as ECMAScript/JavaScript modules -- these use the ../release/go-module.js library. We recommend that you copy the files that you need into your project, so that you can adjust how they refer to the GoJS library that you choose and so that you can include them into your own building and packaging procedures.

More information can be found in the GoJS Intro.

Related samples