Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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
   [Expand]Accessibility Best Practices
    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
   Touch 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]Localization
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Web Accessibility in DevExpress ASP.NET Controls and MVC Extensions

Web controls and MVC extensions provided by DevExpress help to create web pages that conform to accessibility guidelines. Although by default, DevExpress web components might not render markup for pages that meet accessibility standards, they expose an API (properties, methods, events) used to make pages accessible.

Expanded Accessibility Compliance Options

DevExpress web controls allow you to adhere to web page accessibility requirements in the following ways.

  • Text Alternatives
    A text equivalent can be specified for any non-text element (such as an image) via the ALT attribute. A detailed description for the element can be provided with the LONGDESC attribute (see AlternateText, GenerateEmptyAlternateText, and DescriptionUrl properties).

  • Use of Color, Contrast
    Multiple style options (including font settings) are available for controls to make it easier for users to see content, including separating the foreground from the background. Use ASPxThemeBuilder to modify color and contrast settings for different DevExpress Themes.

  • Keyboard Access, Focus Order, Focus Visible
    Access keys and tab order can be defined for controls to make all functionality available through a keyboard interface, and to define navigation sequences (see TabIndex, AccessKey properties). Input focus can be moved to a control using the Focus and FocusEditor methods. The focused state of button elements can be visually identified by the FocusedRectStyle property.

  • Link Purpose
    The purpose of each link can be identified from the link text using the Text property of link items - menu items, navbar items, tabs, etc.

  • Skip Repetitive Navigation Links
    To comply with this requirement, a web page should contain a hidden "Skip to the main content" link, which becomes visible when a user presses the TAB key after the web page loads. The user can then press Enter to move focus to the main page content.

  • Landmarks Roles
    A web page can be divided into regions (navigation, search, main content, etc.), which are identified by landmark roles. This approach helps assistive technology users navigate between different sections (landmarks) of a page.

  • Tables
    In accessible mode, table headers of grid-like DevExpress controls are identified by TH tags (with WAI-ARIA rowheader or columnheader roles, if needed) and displayed as hyperlinks. This allows assistive technologies to correctly interpret tabular data and provide proper navigation, filter and search capabilities. For tables and other elements that are used for layout purposes only, the WAI-ARIA presentation role is used, so redundant table information is no longer announced to a user and does not appear within the Accessibility Tree.

    If vertical scrolling is enabled, a DevExpress GridView control/extension renders two separate tables – one for headers and one for grid data (or three tables if the grid's footer is enabled). If accessibility mode is enabled, each table has an identifying caption tag whose value is specified by a specific grid constant.

  • Section Headings
    Section headings can be defined for panels used to organize the content by the HeaderText property.

  • Readability: Language of Page, Language of Parts
    The text content of each predefined phrase in the control content can be determined using global and local resource files or specific control properties to make text content readable.

  • Input Assistance: Form Accessibility
    Text labels are associated with form input controls within dialog forms, by rendering LABEL elements using the AssociatedControlId properties. Refer to the Data Editors - Interdependent Controls online demo for more information.

  • Input Assistance: Error Identification, Error Suggestion
    An input error can automatically be detected, described to an end-user, and suggestions for correction can be provided to the user (see ValidationSettings properties, Validate methods, Validation and ValidationCompleted events). See the Data Editors - Section 508/WCAG Compliance online demo for details.

Expanded Enabling Accessibility Mode

Accessibility mode (which integrates most of the options listed above) can be enabled for an individual DevExpress control, for all DevExpress controls on a page, or for all DevExpress controls within a web project. Note that it is not possible to disable accessibility mode for a specific control if this mode is enabled for a page scope or for the entire web project scope.

     

  • Setting an Individual Control
    Use the AccessibilityCompliant property to enable accessibility compliance for an individual DevExpress ASP.NET control.

    For a list of DevExpress ASP.NET controls and MVC extensions that expose the AccessibilityCompliant property, see the Controls and Extensions Exposing the AccessibilityCompliant Property topic.

  •  

  • Setting Controls Globally
    Use the ASPxWebControl.GlobalAccessibilityCompliant static property to programmatically enable accessibility support at the level of a web page or a web project.

    To enable accessibility support for the scope of the entire page, set the GlobalAccessibilityCompliant property within the page's Pre_Init event handler.

    To set accessibility support for the scope of the entire project, set the GlobalAccessibilityCompliant property within the global.asax file.

  •  

  • Using a Configuration Option
    The most common scenario is to enable accessibility mode for DevExpress controls/extensions within the entire web application, by enabling a specific Accessibility Compliant configuration option within the application's Web.config file.

    Important

    Note that the doctypeMode configuration option should be set to "Html5".

When accessibility mode is enabled, different button elements within controls (such as pager buttons, column headers, etc.) are rendered as links (i.e., A elements). As a result, these links become accessible and operable via the keyboard; input focus can be moved to them with the Tab or arrow keys (depending upon the control type) and the associated operation can be initiated by pressing the Enter key. Additionally, screen readers will interpret the accessible page content correctly because of the WAI-ARIA attributes and roles rendered into the markup of DevExpress web controls/extensions on the page.

Note

To ensure that DevExpress ASP.NET controls meet accessibility requirements, use the JAWS screen reader in Internet Explorer or the NVDA screen reader in Firefox to test your application.

How would you rate this topic?​​​​​​​