This example illustrates how to provide a custom message to an Assistive Technology (for example, Screen Reader). The main idea of this approach is to add a special helper element to the page, set your custom message as its "aria-label" attribute value, and then focus this element. This will force your screen reader or another assistive technology to read the message.
Here, the task is implemented for a basic ASP.NET ListBox and DevExtreme dxDataGrid widget. The grid displays data depending on the ListBox selection. When the selection is changed, the data in the linked grid is filtered and we send a custom information message. A similar scenario is illustrated in the Accessibility - Linked Controls online demo, but instead of a custom AccessibilityHelper implementation, this demo uses our client API: ASPxClientUtils.SendMessageToAssistiveTechnology.
Main implementation steps:
1. Add a special assistive element to the page using the AccessibilityHelper constructor (its implementation is in the AccessibilityHelper.js file):
[JavaScript]var accessibilityHelper = new AccessibilityHelper();
2. Save the old state for a control or page, when necessary. In this example, the ListBox' onchange event is used for this purpose:
[JavaScript]listBox.change(function(){... oldClientCount = grid.totalCount(); countriesChanged = true;...});
You can handle several events for different controls in your real-life scenario.
3. Handle the event that occurs when changes are complete. Here, the dxDataGrid.onContentReady event is used. Check if there is the difference between the previous and current states, and to pass the corresponding message text as an argument to the AccessibilityHelper.SendMessageToAssistiveTechnology method:
[JavaScript]function OnContentReady(){...var newCount = grid.totalCount();var changesInfo = GetChangesInfo(newCount); accessibilityHelper.SendMessageToAssistiveTechnology(changesInfo);}
The complete implementation of the AccessibilityHelper.SendMessageToAssistiveTechnology method is in the AccessibilityHelper.js file.
To test the example, run it in browser and enable your assistive technology. You can use NVDA or JAWS screen readers for testing purposes. Change the "Countries" list box selection: the assistive software or device should inform you about the changes in the "Clients" grid with a corresponding message.
See Also:
Accessibility - How To: Provide a Screen Reader with Information About Changes on a Page
