HTML ARIA First Rule: Prefer Correct Native HTML

Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.

What You Need to Know

Start with correct HTML rather than adding ARIA to fix the wrong element. A button, label, table header, or main landmark already gives useful information to assistive technology.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<button type="button">Add to cart</button>
<a href="/cart">View cart</a>
<label for="quantity">Quantity</label>
<input id="quantity" type="number" name="quantity" min="1">

Let’s Read the Code

<button>: The button offers an action; its type or command determines what happens.
<label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
type: Type changes what sort of control or resource the browser uses.
href: Href is the URL to a related resource or destination.

What the example shows: Native elements already provide keyboard behavior and useful accessibility semantics.

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.

Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.

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.
Adding role=button to a div cannot supply all the native button behavior.

Key Takeaways

Start with correct HTML rather than adding ARIA to fix the wrong element.
<button>: The button offers an action; its type or command determines what happens.
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.