A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
ARIA stands for Accessible Rich Internet Applications. Its attributes can communicate a control's label, state, and relationships to assistive technology. ARIA describes behavior; it does not create the behavior itself.
In this example: mark an expandable control's state.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<nav aria-label="Page numbers">
<a href="/news?page=1">1</a>
<a href="/news?page=2" aria-current="page">2</a>
</nav>
<button type="button" aria-expanded="false" aria-controls="extra-help">More help</button>
<div id="extra-help" hidden>Extra instructions.</div>Let’s Read the Code
- aria-current: Aria-current identifies the active item in a group, such as the current page.
- <nav>: Navigation elements identify groups of important links.
- <button>: The button offers an action; its type or command determines what happens.
- aria-label: Aria-label supplies an accessible name when a visible one is not available.
What the example shows: ARIA properties express relationships and states such as current page or expanded. They do not implement the expand/collapse behavior.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
What does assistive technology receive? The example includes aria-label, aria-current. These relationships can explain names, states, or descriptions when used correctly. They do not automatically move focus, listen for clicks, or create keyboard handling.
Your Turn
Move through the example without a mouse. Read each control name and current state aloud as if describing it to a friend.
Common Beginner Mistakes
- Expecting ARIA alone to create keyboard behavior or make a control interactive.
- If a script reveals the help panel, it also needs to update aria-expanded and hidden together.
Key Takeaways
- ARIA stands for Accessible Rich Internet Applications.
- aria-current: Aria-current identifies the active item in a group, such as the current page.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.