Web Accessibility in DevExpress ASP.NET Web Forms Controls
- 6 minutes to read
You can use DevExpress ASP.NET web controls to create web pages that conform to accessibility guidelines. Although DevExpress web components may not render markup for pages that meet accessibility standards by default, 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
You can use the ALT attribute to specify a text equivalent for any non-text element (such as an image). The LONGDESC attribute (see AlternateText, GenerateEmptyAlternateText, and DescriptionUrl properties) provides a detailed description for an element.
Use of Color and Contrast
Our controls have multiple style options (e.g., font settings) to make it easier for users to see content (e.g., to separate the foreground from the background). Use ASPxThemeBuilder to modify color and contrast settings for different DevExpress Themes.
Keyboard Access, Focus Order, Focus Visible
You can use the AccessKey* and TabIndex properties to set access key and tab order (so that all functionality is available through a keyboard interface) and to define navigation sequences. Use the Focus and FocusEditor methods to move input focus to a particular control. You can use the FocusedRectStyle property to specify style settings for a rectangle that highlights a button when it is focused.
Link Purpose
Use the Text property of a link item (menu items, navbar items, tabs, etc.) to specify text that identifies the purpose of a link.
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.
Landmark Roles
A web page can be divided into regions (navigation, search, main content, etc.) that are identified by landmark roles. This approach helps assistive technology users navigate between different page sections (landmarks).
Tables
In accessible mode, table headers of grid-style DevExpress controls (grid view, card view, tree list, etc.) 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 the header and one for grid data (or three tables if the grid’s footer is enabled). If accessibility mode is activated, each table has a caption tag whose value is specified by a specific grid constant.
Section Headings
Section headings can be defined for panels used to organize content by the HeaderText property.
Readability: Language of Page, Language of Parts
The text content of each predefined phrase in a control can be determined via global and local resource files - or specific control properties - to make text readable.
Input Assistance: Form Accessibility
Use the AssociatedControlId property to associate an input control with a Label control - to specify text labels on a form. Refer to the following online demo for more information: Data Editors - Interdependent Controls.
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). Refer to the following online demo for details: Data Editors - Section 508/WCAG Compliance.
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 or for an entire web project.
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 that expose the AccessibilityCompliant property, see the following help topic: Controls and Extensions Exposing the AccessibilityCompliant Property.
Note
If a control’s KeyboardSupport option is enabled, you can use UP/DOWN/LEFT/RIGHT keys to navigate between records of both grid-style controls (e.g., grid view, card view, vertical grid) and tree list controls. However, if the AccessibilityCompliant option is also enabled, the control does not allow you to use these keys for keyboard navigation.
Setting Controls Globally
Use the static ASPxWebControl.GlobalAccessibilityCompliant property to programmatically enable accessibility support for a web page or a web project.
To enable accessibility support for an 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 an 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 within the entire web application. In the application’s Web.config file, enable the Accessibility Compliant configuration option.
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 (pager buttons, column headers, etc.) are rendered as links (i.e., A elements). As a result, these links become accessible and operable via a keyboard interface. For example, input focus can be moved to an element with the Tab or arrow key (based upon the control type), and the operation can be initiated by pressing the Enter key. Additionally, screen readers will interpret accessible page content correctly because of the WAI-ARIA attributes and roles rendered in a DevExpress web control’s (or web extension’s) page markup.
Note
To ensure that DevExpress ASP.NET controls meet accessibility requirements, use the NVDA screen reader in Firefox to test your application.