Accessibility with Aria Attributes

This demo shows how to improve accessibility with ARIA attributes and a live region for the graph component. Switching an element in this demo, updates the live region of the graph component with the currently selected label.

Things to Try

• Focus the GraphComponent with Tab key and cycle through the nodes with the arrow keys. The screen reader reads the label of the currently selected node.
• Select an item to trigger the screen reader to read the label.
• Hover a node to trigger its tooltip which is also read by the screen reader.
• Toggle Aria-Atomic: This toggles aria-atomic on the live region. When enabled, the screen reader reads the entire content of the live region. When disabled, the screen reader reads only the changed part (i.e., the item's label).

About Screen Readers

Screen reader support varies vastly, and you might experience different behaviors across different screen readers and browsers. Some examples of popular screen readers:

• JAWS screen reader: A popular windows screen reader.
• NVDA screen reader: An open-source screen reader for windows.
• Windows Narrator: Built-in windows screen reader.
• VoiceOver: A macOS built-in screen reader.

Known Issues

aria-atomic has no effect in Chrome.

Windows Narrator behaves differently depending on the browser and does not consider the aria-atomic attribute. For example, the application role is not honored on some systems with Chrome and Windows Narrator such that keyboard inputs are not delivered to the graph component, and therefore the item selection cannot be changed with the arrow keys.

VoiceOver on macOS does not pick up the aria-describedby label that is used on the graph component container for the item's tooltip.