DevExpress ASP.NET MVC extensions can help you create web pages that conform to accessibility guidelines. Most our extensions implement the AccessibilityCompliant property, which allows more accessible markup to be generated for the extensions. Please review the Section 508 and Accessibility and Accessibility Support topics to learn more.
This demo illustrates how to make data editors more accessible for end-users. All of them operate in an accessible way (the AccessibilityCompliant property is enabled). Required fields are marked with an asterisk character that precedes an editor. Each time the editor is focused, the screen reader pronounces both the editor label text and further actions with the focused editor (e.g., type in text in a text box or open a drop-down window for a calendar).
Here is a short summary on this accessible webpage implementation:
- Define the page areas with landmark roles such as navigation, search, main content, etc.
- Add the aria-labelledby attribute for the page area with the role="form" role to provide information about the “form” landmark area for Assistive Technologies.
- Place DevExpress ASP.NET Data Editors extensions to the form and set their AccessibilityCompliant property to true.
- Specify ValidationSettings and SetFocusOnError properties for the data editors.
To check the accessibility level of the extensions used in the demo, run the WAVE or W3C automated web accessibility evaluation tool. In addition, you can enable the High Contrast mode to make sure the demo is rendered correctly in this mode.
Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
The source code files for this demo are installed (by default) in the following directory:
Open CS Solution
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxDataEditorsDemos