Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.
What You Need to Know
A real button already knows how to receive focus and respond to common keyboard actions. Adding role=button to a plain div changes its announced role but does not automatically provide the same keyboard behavior. Native HTML is usually simpler.
In this example: replace role=button on div with button.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<nav aria-label="Help topics">
<a href="/questions">Questions</a>
<a href="/answers">Answers</a>
</nav>
<button type="button">Open help</button>Let’s Read the Code
- <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.
- href: Href is the URL to a related resource or destination.
What the example shows: Nav and button already have built-in meaning. You do not need role="navigation" or role="button" on them.
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. 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
Remove any redundant role from native elements and confirm their default meaning remains.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Replacing a button with div role=button would require extra keyboard handling.
Key Takeaways
- A real button already knows how to receive focus and respond to common keyboard actions.
- <nav>: Navigation elements identify groups of important links.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.