A practical accessibility model: built-in site tools + compatibility with OS assistive tech

This template is designed to work well with screen readers, magnifiers, keyboard/switch access, voice input, and low-glare needs (including light sensitivity such as achromatopsia). Settings persist across pages.

Keyboard-first Screen-reader friendly Low-glare themes Adjustable text + spacing Reading guide / mask Reduced motion

How people navigate

Screen readers (VoiceOver, Narrator, TalkBack)

Screen reader users move by headings, landmarks, links, and controls — not by visually scanning. This template uses semantic landmarks, a skip link, and a predictable heading structure.

Keyboard tip: press Tab once after load to reach “Skip to main content.”

Screen magnifiers (Zoom, Magnifier, pinch-to-zoom)

Magnifier users need reflow (no forced horizontal scrolling) and visible focus so they can find where they are. This layout scales cleanly at 200–400% zoom.

Alternative input (keyboard, switch, voice, head/eye tracking)

Everything is operable from the keyboard. Controls are large and avoid hover-only behavior. Switch scanning and voice tools depend on stable, labeled controls — this template provides that baseline.

Page map (starter)

  • Vision: screen readers, magnification, low-glare/contrast, achromatopsia and nystagmus support
  • Motor: keyboard access, voice control, pointer control, switch control concepts
  • Cognitive: reduced motion, reading supports, predictable navigation, chunked content

All pages use the same toolbar and settings. The page topic is what you’re learning about — not what you’re allowed to use.

Developer checklist (what this template demonstrates)

  • Semantic landmarks + logical headings
  • Skip link + strong focus indicators
  • Reflow at high zoom (no fixed-width traps)
  • Optional link underlines (non-color cue)
  • Reduced motion (OS setting + site toggle)
  • Windows High Contrast support (forced colors)
Next step: add more pages safely
  1. Copy an existing page (e.g., vision.html) and change the content only.
  2. Keep the same CSS/JS links so settings persist.
  3. Keep headings in order (H2 → H3 → H4) and use descriptive link text.