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.
- 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
role="presentation"can be used to remove the native role.
role="tab"should be used for tab controls as there is no tab component in HTML.