[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Expand]Appearance Customization - Theming
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Supported Document Types
  [Collapse]Accessibility Support
   [Collapse]Accessibility Best Practices
     How To: Divide a Page into Regions using ARIA Landmark Roles
     How To: Create 'Skip Navigation' Link
     How To: Provide a Screen Reader with Information About Changes on a Page
    Web Accessibility in DevExpress ASP.NET Controls and MVC Extensions
    Controls and Extensions Exposing the AccessibilityCompliant Property
   Right to Left Support
   HTML Encoding
   Binary Storage Configuration
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

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

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.

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:

Expanded 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.

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.


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.

Expanded See Also

Is this topic helpful?​​​​​​​