Cognitive and Reading Assistive Tools
"Cognitive accessibility" sounds like a narrow, clinical category. It isn't. The tools in this section serve people with dyslexia, ADHD, anxiety, traumatic brain injuries, low literacy, auditory processing disorders, and non-native language readers. They also serve people who are simply tired, reading under poor conditions, or managing information overload on a difficult day.
The other thing these tools have in common: most of them are already on your users' devices. Reading mode is built into Safari, Firefox, and Edge. Text customization lives in browser and OS settings. Reduced motion is a system preference. Screen magnification ships with every major operating system. You didn't install them, and your users don't need your permission to use them. They're just using them — and your pages either hold up or they don't.
Reading mode
Reading mode is a browser feature that strips a page down to its essential content: the headline, the body text, maybe the primary image. Navigation menus, sidebars, footers, ads, decorative elements — removed. The goal is a clean, distraction-free reading surface, often with user-controlled font size, typeface, and background color.
The catch: reading mode has to figure out what your content is. It does this by reading your markup. A page with a clear <article> or <main> element, proper heading structure, and body content in <p> tags gives reading mode exactly what it needs. A page built from nested <div>s with classes like content-wrapper and text-block is harder to parse, and reading mode may extract a partial mess, duplicate content, or give up and offer nothing.
The test is fast and honest: enable reading mode on a page you built and see what comes out. If it's clean and complete, your markup is doing its job. If it's garbled or empty, that's diagnostic information worth having.
Text customization
Users routinely override your typography. They increase their default font size in browser settings. They install browser extensions that swap in dyslexia-friendly typefaces like OpenDyslexic. They use OS-level accessibility settings to push text spacing beyond what any stylesheet sets.
WCAG has a specific requirement here — the 1.4.12 Text Spacing criterion — that covers four properties: line height, letter spacing, word spacing, and spacing after paragraphs.[1] The requirement is that when users push these values to specified maximums, no content is lost and no functionality breaks. Text shouldn't overflow its container and get clipped. Elements shouldn't overlap. Buttons shouldn't lose their labels.
The underlying principle is that your stylesheet is a starting point, not a final word. Designs that depend on precise text sizing, tightly controlled spacing, or fixed-height containers that assume a certain number of text lines tend to fail here. Flexible, fluid layouts handle it naturally.
Reduced motion
Some people experience real physical effects from on-screen motion — vestibular disorders, migraines, epilepsy, and anxiety can all be triggered or worsened by parallax effects, looping animations, auto-playing transitions, or elements that move as you scroll. This isn't a preference so much as a physical need.
Every major operating system has a "reduce motion" setting. When a user enables it, that preference is exposed to CSS through the prefers-reduced-motion media query. You can use it to pause, slow, or remove animations for users who've asked for that.
The thing to sit with: an animation that can't be turned off is an accessibility failure. The WCAG 2.3.3 criterion covers this — it requires that motion triggered by interaction can be disabled unless the motion is essential to the functionality.[2] A spinning loading indicator is probably essential. A hero section that parallax-scrolls because it looks cool is not.
The fix is usually lighter than it sounds. A single media query can swap an elaborate animation for a simple fade or no transition at all. Most users never see the difference. The ones who needed it notice immediately.
Screen magnification
Browser zoom (covered on the Zoom and Reflow page) is one thing. OS-level screen magnification is another tool entirely, and it works differently.
Screen magnification — like the Zoom feature in macOS Accessibility settings, or Magnifier on Windows — enlarges a portion of the entire screen, following the user's cursor or focus. It's not reflowing content the way browser zoom does; it's more like holding a magnifying glass over the display. The rest of the screen is still there, just outside the magnified window.
This makes it harder to design for directly, since the magnification happens at the OS level and your page doesn't know about it. What helps: high contrast between text and background (so content remains legible when enlarged and potentially pixelated), adequate spacing between interactive elements (so a magnified view doesn't make targets harder to distinguish), and avoiding important content or labels that only appear on hover (which becomes difficult to trigger while navigating a magnified view).
Clean, high-contrast, well-spaced design isn't just aesthetically good. It holds up better under every kind of magnification.