Tables and accessibility
Start with native HTML
Use the browser's built-in accessible elements for actions, navigation, and structure before adding custom roles or keyboard behavior.
8 minute lesson
Accessible HTML usually starts by choosing the element that already has the behavior you need.
For an action, use a button:
<button type="button">Save route</button>
Do not recreate it with a div:
<div onclick="saveRoute()">Save route</div>
The native button can receive keyboard focus. Enter and Space activate it. Browsers expose its role and disabled state to assistive technology. The div gives you none of that for free.
The same principle applies across HTML:
- use
awithhreffor navigation - use headings for the document outline
- use
navandmainfor landmarks - use lists for lists
- use form controls for input
ARIA can add accessibility information when native HTML cannot express a custom interface. It does not add browser behavior. A div role="button" still needs focus handling, keyboard activation, disabled behavior, and more.
The first rule of ARIA is simple: if a native HTML element already provides the semantics and behavior you need, use it.
Quick check
Result
You got of right.
Lesson completed