A newer version of this page is available. Switch to the current version.

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.

    AccessibilityCompliant

    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 JAWS screen reader in Internet Explorer or the NVDA screen reader in Firefox to test your application.