2.3 Controls read the proper role

As you browse a website or app you have visual cues that tell you what each element is and how to interact with it. You can tell by looking that something is a button, or an input field, or a checkbox. This information, called the role, tells you how you can use this element. A screen reader user needs this same information to know what is expected of them.

WCAG 4.1.2: Name, Role, Value Opens in a new window

Details

  • Every element, other than plain text, reads its role.
  • Symantic HTML tags are used whenever they exist. For elements that don't exist in native HTML, ARIA roles are used.
  • Links should be used for navigation, on the same page or to another page. Buttons should be used for on page functions.
  • See 6.6 Mark up data tables correctly
  • See 6.7 Mark up lists correctly

Examples

Button

Text field

Tabs

Tips

  • role="presentation" can be used to remove the native role.
  • role="tablist" and role="tab" should be used for tab controls as there is no tab component in HTML.

Tools & Resources