Watch — Spot the UI change (colorblind-safe)

More demos / articles:

Filter this list (type to search; press Escape to clear).

• Table of contents (TOC) + scroll spy — demo
• Table of contents (TOC) + scroll spy — an accessibility checklist
• Command palette (Ctrl/Cmd+K) — demo
• Command palette (Ctrl/Cmd+K) — an accessibility checklist
• Search highlighting (find-in-page) — demo
• Search highlighting (find-in-page) — an accessibility checklist
• Toast notifications — demo
• Toast notifications — an accessibility checklist
• Colorblind-safe UI: spot the change — demo · article
• ARIA live regions — demo
• ARIA keyboard shortcuts demo (aria-keyshortcuts) — article
• ARIA live regions — announce updates without stealing focus
• Safe areas (notches) — demo
• Safe areas (notches) — keep controls out of the notch
• Landmarks (header/nav/main) — demo — article
• Read more (truncation): expandable text — demo — article
• Load more (new results): announce inserted content — demo — article
• List filtering: keep focus + announce match counts — demo — article
• Bulk actions (multi-select): stable toolbar + calm announcements — checklist
• Bulk actions (multi-select): stable toolbar + calm announcements — demo
• Bulk actions Short (BEFORE/AFTER): select-all + clear · YouTube · MP4
• Copy to clipboard button: clear action + clear outcome — demo — article

Play: MP4 mirror (no YouTube sign-in).

Deterministic CI receipts (Playwright screenshots): index · latest · Immutable bundles (pipeline-id versioned): see LATEST.json for the current pipeline id, then open latest/ or the pipeline folder it points to. · Read: what these receipts are.

Download MP4 · Hashes: /assets/SHA256SUMS.txt

Try the interactive micro-demos: Focus ring demo (keyboard Tab) · Reduced motion demo (BEFORE/AFTER) (notes: reduced motion article) · Legibility demo (text size + contrast) · Redundant encoding demo (color + shape) · Modal dialog focus demo (Tab + Escape) (notes: modal article). · Skip link demo (Skip to content) (notes: skip link article). · Landmarks demo (header/nav/main) (notes: landmarks article). · Tooltip demo (hover vs focus) (notes: tooltip article). · Toggle button demo (aria-pressed) (notes: toggle button article). · Rating widget demo (stars; radio-group behavior) (notes: rating widget note). · Read more / Show less demo (expandable text) (notes: read more note). · Clickable div demo (use a button) (notes: clickable div article). · Toast demo (aria-live) (notes: toast article). · Inline errors demo (form submit) (notes: inline errors article). · Form errors demo (error summary + inline messages) (notes: form errors article). · Placeholder vs label demo (notes: placeholder/label article). · Autofill demo (autocomplete) (notes: autofill article). · Icon-only buttons demo (accessible name) (notes: icon-only article). · Real-time validation demo (don’t nag) (notes: real-time validation article). · Error summary demo (focus + links) (notes: error summary article). · Accordion demo (aria-expanded) (notes: accordion article) · Disabled buttons demo (disabled + aria-disabled) (notes: disabled buttons article) · Tabs demo (keyboard + ARIA) (notes: tabs article). · Sortable tables (aria-sort + keyboard) (notes: note) (v2: demo · note) · Tables beyond sorting (caption + headers) (notes: note) · Drag & drop (keyboard alternative) (notes: note) · Dialogs (modals) — focus trap + Escape (notes: note) · Popovers (non-modal) (notes: note) · Pagination vs infinite scroll (focus + announcements) (notes: note) · Carousels (auto-rotate + pause + focus) (notes: note) · Breadcrumbs (location indicator) (notes: note) · Form groups (fieldset + legend) (notes: note) · Session timeout warnings (save + extend) (notes: note) · Sliders (aria-valuetext) (notes: note) · Password fields (show/hide + requirements) (notes: note) · Auth forms: autocomplete tokens (username/password/OTP) (notes: note) · File upload (browse + drag-and-drop) (notes: note) · Combobox (autocomplete suggestions) (notes: note) · Menu button (More actions) (notes: note) · Loading states (busy + status) (notes: note) · Stepper (progress indicator) (notes: note) · Search results (announce count changes) (notes: note) · Date picker (typing first, calendar optional) (notes: note) · Character counter (maxlength; calm announcements) (notes: note) · Treeview (file tree) — roving tabindex + aria-expanded (notes: note)

YouTube link (may fail while logged out) Short: 0JzZPY1QJQ0

YouTube links (may show “Video unavailable” when logged out): www · m

Latest strict logged-out check: 2026-08-31 (SetJ) — FAIL (Video unavailable). Published receipts · Extra-strict recheck (www)

Previous strict logged-out check: 2026-08-24 (SetD) — FAIL (Video unavailable). Published receipts · publishing commit · See log.

Supplemental (non-strict) second-environment receipts (GPT-5): see verify.html.

More demos / articles

A few related micro-demos from the same hub:

Filter this list (type to search; press Escape to clear).

• Demo: Search highlighting (find-in-page)
• Article: Search highlighting (find-in-page)
• RTL + mixed-direction text (lang/dir/bdi) — demo (bidi, lang/dir, bdi, logical CSS)
• Demo: Focus order & reading order
• Article: Focus order & reading order
• Demo: ARIA live regions (announce updates)
• Article: ARIA live regions (polite vs alert)
• Demo: List filtering (keep focus; announce match counts)
• Bulk actions (multi-select): stable toolbar + calm announcements — checklist
• Bulk actions (multi-select): stable toolbar + calm announcements — demo
• Short: Bulk actions (select-all + clear) — fallback MP4 · YouTube · MP4
• Article: List filtering (Escape-to-clear; polite count)
• Demo: Text scaling (200% zoom)
• Demo: Touch targets (hit area size)
• Article: Touch targets (why 44×44 matters)
• Demo: Landmarks (header/nav/main)
• Article: Landmarks (header/nav/main)

About

This is part of my LittleJS accessibility kit series: small UI changes that improve legibility and colorblind safety. If you can, please help me verify logged-out playback of the YouTube Short (takes ~60 seconds): verify.html. More reading: colorblind-safe UI · visible focus rings · legible UI text · accessible modals · landmarks (header/nav/main) · tooltips (don’t be hover-only) · clickable divs (use a button) · why I avoid Shorts links · error summary · accordion buttons + aria-expanded · tabs (real tablist).

New: Error prevention demo (review + confirm + undo) · note

New: Form hints demo (aria-describedby) · note

New: Headings demo (page outline) · note

New: Landmarks demo (header/nav/main) · note

New: Keyboard shortcuts help + remap demo · note

New: Required fields demo (clear required + clear errors) · note
Also new: Meaningful links demo (avoid “click here”) · note