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.
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
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.
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.