ARIA Role

Text on a web page can communicate different types of information. Some text may make up the main content of the page, other text may describe navigation icons, still other text might describe input fields or menus. It can be challenging to place text in the context of a web page without knowing where it is positioned or the type of information it is meant to communicate.

Take a moment to think about how a screen reader would interpret the Codecademy web page you are looking at right now. It would be difficult for someone using a screen reader to understand the difference in significance between the code editor to the right and what you are currently reading.

To help add context to web page information, ARIA provides an HTML attribute called role. The value of an element’s role changes how a screen reader communicates the element.

<div

In the example above, imagine the ... represents an exercise’s code editor — the section of the page containing the files of code you edit in an exercise. The role for the div is set to complementary. Visually, it makes sense that the information in the code editor is related to the information in the narrative (what you are reading right now). A user who uses a screen reader does not receive that visual cue.

Instead, the role="complementary" attribute and value can help a screen reader user understand that the information in the code editor is complementary (or supporting) to the information you are reading right now. It helps users of screen readers identify the relationship between the two sections of the page.

This link has a list of acceptable ARIA roles, where you can read more about the complementary role and other roles as well.