Start with native HTML

Accessible HTML usually starts with 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 styled div:

<div onclick="saveRoute()">Save route</div>

The native button receives keyboard focus. Enter and Space activate it. Browsers expose its role and disabled state to assistive technology. A div gives you none of that for free. You would have to rebuild focus management, keyboard handlers, and ARIA state by hand.

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 well known: if a native HTML element already provides the semantics and behavior you need, use it.

When you review your personal page, look for clickable divs or spans. Replacing them with button or a real link is often the highest-impact accessibility fix you can make in five minutes.

Custom widgets built from generic elements belong in JavaScript-heavy apps where native HTML truly cannot express the UI. For a personal page built in this course, native elements cover almost everything you need.

Quick check

Start quiz

Result

You got of right.

Try again