How To: Provide a Screen Reader with Information About Changes on a Page
- 3 minutes to read
This topic illustrates how to provide a screen reader or a braille display with information about dynamically updated content from a webpage. This technique allows a screen reader or braille display to detect what has changed on a page in response to user interaction, and provide these changes to the user.
The DevExpress ASP.NET accessibility demos below show how this technique is implemented.
- Web Forms: Data Editors - Linked Controls
- MVC: MVC Data Editors - Linked Controls
The image bellow illustrates how the demo page is displayed in an NVDA Speech Viewer window. In this demo, the grid’s content is dynamically updated each time the list box selection is changed. This window displays text spoken by the NVDA screen reader to the user when the first and second items in the list box are selected sequentially.
See the following articles for information on related accessibility guidelines:
- Section 508 1194.22(n): When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
- Section 508 1194.22(l): When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology
- WCAG 2.0 Criterion 3.3.5 Help: Context-sensitive help is available. (Level AAA)
- WCAG 2.0 Criterion 1.3.1: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Implementation Details
See the DevExpress Data Editors - Linked Controls (Web Forms) online demo to see how this technique is implemented. In this demo, the grid’s content is dynamically updated when a user changes the list box selection.
When a user selects or deselects a list box item, the grid’s PerformCallback method is called. Before the callback, information about the grid state is saved to the grid’s temporary client properties created via the JSProperties property:
- The cpProductCount property - used to store the grid’s record count before the update.
- The cpOldProductCount property - used to store the grid’s actual record count.
function PerformSelection(s, e) {
gvProducts.cpOldProductCount = gvProducts.cpProductCount;
gvProducts.PerformCallback();
}
The EndCallback event is used to generate the appropriate message for the screen reader or braille display. Even if the record count remains the same (e.g., after sorting), the default message text provided is “Accepted products table updated”. If the record count changes, the corresponding information is added to the default message text. The message text is then passed as an argument to the ASPxClientUtils.SendMessageToAssistiveTechnologies method.
function OnEndCallback() {
var message = "Accepted products table updated.";
if(gvProducts.cpOldProductCount !== gvProducts.cpProductCount) {
message += " Elements count changed from " + gvProducts.cpOldProductCount + " to " + gvProducts.cpProductCount;
gvProducts.cpOldProductCount = gvProducts.cpProductCount;
}
ASPxClientUtils.SendMessageToAssistiveTechnology(message);
}
Note
To see code related to this technique, see the NotificationBridge.js file in the DevExpress Data Editors - Linked Controls (or the MVC Data Editors - Linked Controls - for MVC) online demo.