CHAPTER 2 OF 5

2. Roles, states, and properties

Your goal: recognize what an ARIA attribute communicates.

Three kinds of information

Role: What kind of thing is this? For example, a button. Native HTML often already provides it.
State: What is its current condition? aria-expanded reports whether controlled content is expanded.
Property: What relationship or other information helps explain it? aria-controls can identify controlled content by ID.

The button in its collapsed state (panel and controller are shown later)

<button type="button" aria-expanded="false" aria-controls="workshop-details"> Workshop details </button>

The button role comes from button. Its name comes from its text. The attributes describe the state and relationship; they do not create the show/hide behavior.

Use attributes that fit the element

Not every role or attribute is allowed on every HTML element. Check the ARIA in HTML reference for permitted combinations. Avoid overriding correct native semantics or adding redundant roles.

Sources and further reading