Web Accessibility in DevExpress ASP.NET Controls and MVC Extensions
- 6 minutes to read
You can use DevExpress ASP.NET web controls and MVC extensions 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.
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 can be determined via global and local resource files - or specific control properties - to make text 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.
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.
Note
You can use UP/DOWN/LEFT/RIGHT keys to navigate between grid-like and tree list controls’ records if the controls’ KeyboardSupport option is enabled. However, the control does not allow you to use the mentioned keys for keyboard navigation if the AccessibilityCompliant option is also enabled.
Setting Controls Globally
Use the static ASPxWebControl.GlobalAccessibilityCompliant 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.
... void Page_PreInit(object sender, EventArgs e) { DevExpress.Web.ASPxWebControl.GlobalAccessibilityCompliant = true; } ...To set accessibility support for the scope of the entire project, set the GlobalAccessibilityCompliant property within the global.asax file.
<script runat="server"> ... void Application_PreRequestHandlerExecute(object sender, EventArgs e) { DevExpress.Web.ASPxWebControl.GlobalAccessibilityCompliant = true; } ... </script>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“.
<configuration> <configSections> <sectionGroup name="devExpress"> ... <section name="settings" type="DevExpress.Web.SettingsConfigurationSection, DevExpress.Web.v16.1" requirePermission="false" /> ... </sectionGroup> </configSections> ... <devExpress> ... <settings doctypeMode="Html5" accessibilityCompliant="true" /> ... </devExpress> </configuration>
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.