Web Accessibility in DevExpress ASP.NET MVC Extensions
- 6 minutes to read
You can use DevExpress ASP.NET MVC Extensions 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 components 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 components 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 components (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 component 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 component 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 component - to specify text labels on a form. Refer to the following online demo for more information: Data Editors - Linked 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.
Enable Accessibility Mode
Accessibility mode (which integrates most of the options listed above) can be enabled for an individual DevExpress component, for all DevExpress components on a page, or for all DevExpress components within a web project. Note that it is not possible to disable accessibility mode for a specific component if this mode is enabled for a page or for an entire web project.
Set an Individual Component
Use the AccessibilityCompliant property to enable accessibility compliance for an individual DevExpress ASP.NET component.
@Html.DevExpress().GridView(settings => {
settings.Name = "grid";
//...
settings.AccessibilityCompliant = true;
//...
}).Bind(Model).GetHtml()
For a list of DevExpress ASP.NET MVC extensions that expose the AccessibilityCompliant property, see the following help topic: Controls and Extensions Exposing the AccessibilityCompliant Property.
Note
If a component’s KeyboardSupport option is enabled, you can use UP/DOWN/LEFT/RIGHT keys to navigate between records of both grid-style components (e.g., grid view, card view, vertical grid) and tree list components. However, if the AccessibilityCompliant option is also enabled, the component does not allow you to use these keys for keyboard navigation.
Set Components 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 components 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 components (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 MVC components meet accessibility requirements, use the NVDA screen reader in Firefox to test your application.