WAI-ARIA Support
WAI-ARIA is a World Wide Web Consortium specification that is designed to be a framework for web developers to use in developing applications that leverage AJAX, scripting and other rich application techniques.
The framework specifies a series of steps that developers can use in their own applications to make them more accessible to assistive technologies such as screen readers.
Overview
WAI-ARIA was created to bridge the gap between rich applications and disabled users by introducing additional metadata (through HTML element attributes) that screen readers can use to reason about a control or DOM element. These attributes, like role, aria-haspopup, aria-selected and others provide vital information to screen readers, which can then be used to provide a richer level of interaction with your site for disabled visitors.
Built-In Support
WAI-ARIA is important for applications that heavily rely upon scripted widgets, 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 widgets out of the box which makes it the first HTML5 framework to provide full WAI-ARIA support for its web widgets.
The built-in WAI-ARIA support closely follows the defined W3C Widget Design Patterns and automatically adds the necessary role value and additional attributes based on the specified widget.
The following scenario demonstrates how to work with the NumericTextbox in terms of WAI-ARIA support.
- Add the
<input id="amountOwed" type="number" value="17" min="0" max="100" step="1" />numeric input. - Wire it up as a
kendoNumericTextBoxthrough$("#numeric").kendoNumericTextBox();. -
View the control 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-valuemaxandaria-valuenowproperties are all outlined in the W3C Design Patterns document for WAI-ARIA and the Kendo UI widgets automatically provide them.