Accessibility Basics

Accessibility (often abbreviated "a11y") means a page works for people using screen readers, keyboard-only navigation, voice control, or other assistive technology — not just a mouse and a monitor. Most of it comes down to habits you've already seen in this course, applied consistently.

The biggest wins are things you already know

• Use real headings (<h1>–<h6>) in order, not <div>s styled to look like headings.
• Give every <img> a meaningful alt (or alt="" if it's purely decorative).
• Pair every <input> with a <label>.
• Use <button> for things that trigger an action, <a> for things that navigate somewhere — not a <div onclick> for either.

That last one matters more than it seems: a <div> with a click handler gets none of a button's built-in behavior — no keyboard focus, no Enter/Space activation, no announcement to screen readers that it's interactive at all.

Keyboard focus order

Try tabbing through your own page using only the keyboard (Tab to move forward, Shift+Tab backward, Enter/Space to activate). Focus should move in a logical order — generally the order elements appear in your HTML. Avoid tabindex values greater than 0, which force elements out of that natural order and tend to create confusing jumps.

<!-- Removes an element from the tab order entirely -->
<div tabindex="-1">...</div>

<!-- Makes a normally non-focusable element focusable, in natural order -->
<div tabindex="0">...</div>

Skip links

A "skip to main content" link lets keyboard users bypass repeated navigation on every page load:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- ...later... -->
<main id="main-content">...</main>

It's usually visually hidden until it receives keyboard focus, at which point it becomes visible — sighted mouse users never see it, but it's the first thing a keyboard user can jump to.

ARIA: only when HTML alone can't do the job

ARIA (Accessible Rich Internet Applications) attributes add accessibility information HTML doesn't have a native element for — but the first rule of ARIA is to prefer a native element over adding ARIA to a generic one:

<!-- Prefer this -->
<button>Close</button>

<!-- Over this -->
<div role="button" tabindex="0">Close</div>

When you do need ARIA — for custom widgets like tabs, modals, or dropdowns that HTML has no native element for — a few attributes come up constantly:

<img src="icon-search.svg" alt="" aria-hidden="true" />

<button aria-label="Close dialog">✕</button>

<div role="alert">Your changes have been saved.</div>

• aria-hidden="true" hides purely decorative elements from screen readers.
• aria-label provides an accessible name when there's no visible text to use (like an icon-only button).
• role="alert" announces dynamically-inserted content immediately, without the user needing to navigate to it.

A simple test

Turn on your operating system's screen reader (VoiceOver on macOS, Narrator on Windows) and try using your own page without looking at the screen. It's the fastest way to notice what your markup is actually communicating — versus what you assumed it was.