How To: Provide a Screen Reader with Information About Changes on a Page

• Jun 18, 2021
• 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 the device 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

The image below illustrates how the demo page is displayed in an NVDA Speech Viewer window. In this demo, grid 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 sequentially selected.

See the following articles for information on related accessibility guidelines:

• Section 508 1194.22(n) and 1194.22(l)
• 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, grid 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 by 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.

JS

function PerformSelection(s, e) {
    gvProducts.cpOldProductCount = gvProducts.cpProductCount;
    gvProducts.PerformCallback();
}

The EndCallback event is used to generate an 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. This message text is then passed as an argument to the ASPxClientUtils.SendMessageToAssistiveTechnologies method.

JS

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, refer to the NotificationBridge.js file in the DevExpress Data Editors - Linked Controls online demo.