WAI-ARIA Support

WAI-ARIA is a set of technical specifications which were developed by the W3C and which provide the semantics for the assistive technologies to access and interpret web content and web applications. The WAI-ARIA recommendations (standards) divide the semantics into roles and into states and properties that those roles support. For example, a checkbox role supports the aria-checked state which indicates whether a checkbox, radio button, or a similar UI element is checked.

The WAI-ARIA framework targets web developers who create web applications by using AJAX, scripting, and other rich application techniques.

Built-In Support

WAI-ARIA is important for applications that rely upon scripted components, AJAX, and partial page updates to deliver user experience. Kendo UI is often used in such types of applications and, therefore, provides full WAI-ARIA support to all components out of the box which makes it the first HTML5 framework to provide full WAI-ARIA support for its web components.

The built-in WAI-ARIA support closely follows the defined W3C Components Design Patterns and automatically adds the necessary role value and additional attributes based on the specified component.

The following scenario demonstrates how to work with the NumericTextbox in terms of WAI-ARIA support.

1. Add the <input id="amountOwed" type="number" value="17" min="0" max="100" step="1" /> numeric input.
2. Wire it up as a kendoNumericTextBox through $("#numeric").kendoNumericTextBox();.

3. View the component in the browser and inspect it by using the developer tools.

       <input id="numeric" type="text" value="17" min="0" max="100" step="1" data-role="numerictextbox" class="k-input" role="spinbutton" style="display: none;" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="17">
   

   The role, aria-valuemin,aria-valuemax and aria-valuenow properties are all outlined in the W3C Design Patterns document for WAI-ARIA and the Kendo UI components automatically provide them.

See Also

• Overview of Accessibility Features in Kendo UI
• Section 508 Support in Kendo UI
• Section 508 and WCAG 2.2 Compliance of Kendo UI Components
• Keyboard Support in Kendo UI
• Right-to-Left Language Support in Kendo UI
• Working with the Kendo UI High-Contrast Theme
• Five Tips for Accessible Charts with Kendo UI