Why use a real instead of a clickable ?

It works with the keyboard automatically

HTML and Accessibility — HTML Fundamentals (Lesson 11)

Accessibility (often shortened to "a11y") means building pages that everyone can use — including people who are blind, have low vision, cannot use a mouse, or rely on assistive technology. The wonderful thing about HTML is that good, semantic markup is already most of the work.

Why accessibility matters

Around one in six people lives with some form of disability. Accessible pages reach more people, are often required by law, and — happily — tend to be better for everyone, with clearer structure and better SEO. Most of accessibility is simply using HTML the way it was designed.

MythAccessibility is only for a tiny minority.

RealityIt affects a large share of users and improves usability for everyone.

MythAccessibility means an ugly, plain site.

RealityIt is about structure and markup — your design is unaffected.

MythYou need complex tools and ARIA everywhere.

RealityGood semantic HTML does most of the job; ARIA fills small gaps.

The essentials you already know

You have met most of these already. Together they cover the majority of accessibility needs.

Descriptive alt text on every meaningful image
A label tied to every form input
One h1 and a logical heading order (no skipping levels)
Semantic landmarks: header, nav, main, footer
Meaningful link text (not "click here")
The lang attribute on the html element

Keyboard and focus

Many people navigate with the keyboard, not a mouse, using Tab to move between links, buttons and form fields. If you use real <code><a></code>, <code><button></code> and form elements, keyboard support works automatically. This is a big reason to use a real <code><button></code> rather than a clickable <code><div></code> — the div is invisible to the keyboard.

HTML · editable

<!-- Accessible: keyboard works automatically -->
<button onclick="alert('Hi')">Real button</button>

<!-- Not accessible: keyboard cannot reach it -->
<div onclick="alert('Hi')">Fake button</div>

Use real interactive elements — try tabbing to each.

A little ARIA

ARIA attributes add accessibility information when HTML alone is not enough. The first rule of ARIA is: prefer real HTML elements first. But a couple of attributes are handy — <code>aria-label</code> gives an accessible name to something with no visible text (like an icon-only button), and <code>aria-hidden="true"</code> hides decorative things from screen readers.

HTML · editable

<button aria-label="Close">&times;</button>
<span aria-hidden="true">★</span> Decorative star

aria-label names an icon button; aria-hidden hides decoration.

Native HTML firstThe first rule of ARIA: do not use ARIA if a native HTML element does the job. A real button, link or label is always better than a div patched with ARIA.

A quick accessibility checklist

Every meaningful image has descriptive alt text
Every form input has a connected label
There is one h1 and headings go in order
I used semantic landmarks (header, nav, main, footer)
Links and buttons are real <a> and <button> elements
Link text describes where it goes
The html element has a lang attribute

Try it yourself: audit a page

Run the checklist above against a page you build in the editable boxes from earlier lessons. Fix anything missing — most often it is alt text, labels, or a clickable div that should be a button.

Quick quiz

1. What is the biggest single source of accessibility in a page?

2. Why use a real <button> instead of a clickable <div>?

3. What does aria-label do?

4. What is the first rule of ARIA?

Key takeaways

Accessibility means building pages everyone can use — and HTML does most of it.
Essentials: alt text, labels, heading order, semantic landmarks, good link text.
Use real <a> and <button> so keyboard navigation works automatically.
Prefer native HTML; use a little ARIA (aria-label, aria-hidden) only to fill gaps.