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 a with href for navigation
  • use headings for the document outline
  • use nav and main for 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