Accessibility Fundamentals

All in one: every accessibility rule and ARIA attribute, side by side

What this example compares

Who it is for: visual vs auditory vs motor vs cognitive users, and the tools they use (screen reader, magnifier, keyboard, switch, voice control)
The page itself: <html lang="en"> vs the landmarks <header>, <nav>, <main>, <footer> vs a page of plain divs
Headings: one <h1> then levels in order vs a skipped level vs a fake heading vs two h1s
Text for images: alt="words" vs alt="" vs no alt vs a logo link with alt=""
Naming a form field: <label for> + id vs a wrapped label vs loose text vs for matching the name
Label vs placeholder: the name that stays vs the hint that vanishes
Say what it is: link words vs <track kind="captions"> vs a transcript vs <iframe title>
Colour: colour alone vs colour plus words; faint vs strong text
The keyboard: <button> vs <div onclick> vs role="button" vs tabindex="0", a redundant role and a hidden focus ring; the first rule of ARIA
The skip link: hidden until focused vs always visible vs no skip link
Naming with ARIA: aria-label vs aria-labelledby vs aria-describedby
role vs aria-hidden: role="img" and role="alert" vs aria-hidden="true", right and wrong
tabindex: "0" vs "-1" vs a positive number vs none
Worked example: one required email field marked up four ways, only one of them right

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see an orange page header with the menu, a dashed green box holding fourteen panels, and a dark footer, each with small x-ray words naming its landmark. The later panels are further down inside the preview, so scroll it. Every card that shows something a screen reader would announce has a green line. A few lines to look for: panel 3 card 2 warns level 2 SKIPPED, panel 4 card 4 says link with NO NAME, cards 3 and 4 of panel 5 say edit text with NO NAME, panel 9 says Tab: NEVER stops for the two divs that have no tabindex, panel 13 card 3 says stops FIRST of all, and panel 14 card 4 says edit text "Email" ..., required, hint "Use your college address". The video in panel 7 shows the caption Welcome to CSE326. The Console prints the same green lines, one per line, each starting with its panel and card (P5 c3). It adds a new line whenever you press a Save button, use a skip link or press Register.

Quick check: in panel 9, card 4 is a <div role="button" tabindex="0">, and the Tab key reaches it. Why is it still worse than the real <button> in card 1?

Pressing Enter or Space on it does nothing, because ARIA and tabindex change only what is announced and where Tab stops, never how the element behaves. It would need extra JavaScript to handle the keys. The real <button> does all of that by itself. That is the first rule of ARIA: use the native element.