API Reference 0.3.24dart_web_toolkit_roleRoles

Roles class

Class containing the ARIA roles as defined by W3C ARIA specification. A WAI-ARIA role is set on an element using a role attribute. An element role is constant and is not supposed to change.

This is the central class in this ARIA API because it contains all defined roles which can be set to HTML elements. Each role in this class is a {@link Role} instance. The {@link Role} class contains methods for getting and setting states and properties.

Lets say we have an image button widget and we want to make it visible to a reader as a button, accompanied with some help text for the button usage. For the purpose we need to add a 'button' role to the image and set label that the reader can interpret. We set the 'button' role for an image (img) with the call: Roles.getButtonRole.set(img.getElement()) and set the 'aria-label' property by calling: Roles.getButtonRole().setAriaLabelProperty(img.getElement, "test")

ARIA states are used similarly to ARIA properties by using the Roles.getButtonRole().setAriaEnabledState(img.getElement(), isEnabled) method. Although States and Properties are structurally the same, they are separated in 2 classes in this API because they are semantically different and have different usage. There exist the concept of extra properties and for now the only example is tabindex. If we want to set the tabindex to 0 for the button, we need to call Roles.getButtonRole().setTabindexExtraAttribute(img.getElement(), 0).

There are 4 groups of roles:

  1. Abstract roles -- used as base types for applied roles. They are not used by Web Authors and would not be exposed as role definitions for incorporation into a Web page. Base classes are referenced within the taxonomy and are used to build a picture of the role taxonomy class hierarchy within the taxonomy.
  2. Widget roles -- act as standalone user interface widgets or as part of larger, composite widgets
  3. Widget container roles -- act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets
  4. Document structure roles -- describe structures that organize content in a page. Document structures are not usually interactive
  5. Landmark Roles -- regions of the page intended as navigational landmarks

For more details about ARIA roles check

class Roles {
 static final ButtonRole BUTTON = new ButtonRoleImpl("button");
}

Static Properties

final ButtonRole BUTTON #

static final ButtonRole BUTTON = new ButtonRoleImpl("button")