maxability youtube
maxability twitter
maxability linkedin
maxability facebook
Login/ Register

WAI ARIA Overview

WAI ARIA (Accessible Rich Internet Application) is a new technology by W3C WAI. With the change in trend of web programming, assistive technologies such as screen readers have difficulty in interacting with active accessibility servers of operating systems and receive the required information about the UI elements.

For example, assistive technologies or the active accessibility servers can recognize a button on the web page only if it is coded in any of the following ways.

1. <input type=”button”
2. <input type=”submit”
3. <button>
4. <image type=”button”

With the modern technologies and coding practices an image is placed where a button has to be used, which visually looks like a button. The required interaction will be provided to this button with the scripting languages. Since the semantics of the button is image the screen reader recognizes it as an image and the screen reader user end up without using its functionality. A keyboard only user will not be able to tab on this element as images are not tabbable elements. At the end the button is inaccessible.

WAI ARIA provides the correct semantics of the image for screen readers with the role button. When role=”button” is used for the image the screen reader will recognize the image as a button even for the screen reader user. With the tabindex properties the keyboard interaction can also be added to this image like button.

ARIA Roles, States and Properties

WAI ARIA Roles

A WAI ARIA role defines what an hTML element is or does. An ARIA role can also overwrite the standard role of HTML. A role of <a> is a link. This role can be over written by role=”button”. Screen reader will recognize the <a> element as button.

WAI ARIA roles in detail.

WAI ARIA States

A WAI ARIA state provides the present condition of an element. For example a check box can have checked or unchecked state. Aria-checked state announces the accurate state to a screen reader user. Aria-checked=”true” announces the checked state and aria-checked=”false” (default) announces the unchecked state. The condition of the element may be dependent on the user interaction or may change dynamically. The ARIA attributes can also be used in the script to have more accurate results in certain scenarios.

WAI ARIA states in detailed.

WAI ARIA Properties

A WAI ARIA property announces the property of the element. Depending on the element property user will have a knowledge of its interactivity. A menu can be given a aria-haspopup property. A mandatory input field can be provided with an aria-required property.

WAI ARIA properties in detail.

The power of WAI ARIA

  • Provide the information of page structure with roles such as main, navigation known as landmark roles.
  • Provide support for accessibility of live regions.
  • Provide accessibility of custom controls such as tree controls, sliders, drag & drop.
  • Provide roles of elements where markup cannot define the roles such as menus, menuitem.
  • Provide the state of the elements such as expand /collapse, checked/ unchecked.
  • Provide the properties of elements such as aria-haspopup, aria-required.
  • Enhances the keyboard interactivity with keyboard.