MOWP Docs

Accessibility

How the site is designed to be usable by everyone, especially older adults

The people using this site (older adults, caregivers, donors) have a wide range of abilities and comfort with technology. Here's how the site is built to work for all of them. The target is WCAG 2.2 Level AA conformance, the current version of the standard, verified with an accessibility audit before launch.

How accessibility actually works

A bit of context first, because it shapes everything below and it's easy to get the wrong impression from the tools that get marketed for this.

Most people who need accessibility support bring their own tools. Someone who can't see the screen uses a screen reader (like VoiceOver on an iPhone or NVDA on Windows). Someone with low vision uses their browser's zoom or their device's larger-text and high-contrast settings. Someone who can't use a mouse navigates with the keyboard or with voice. These tools are set up the way each person prefers and work on every website they visit. They don't depend on us adding anything special.

What makes a site work with those tools is how it's built: clear heading structure, real buttons and links, enough color contrast, labels on forms, meaningful alt text. That's the real foundation of accessibility, and it's invisible when it's done right. Everything in this section is aimed at getting that foundation right.

There's a second category worth understanding: accessibility overlays and toolbars, widgets that add a floating button to resize text, change colors, or read the page aloud. The current site uses one (Recite Me). These can help a slice of visitors (especially older adults who don't use dedicated assistive tools and may not realize their own device already does this), so they're not worthless. But they're a supplement, not a substitute for building the site properly, and the more aggressive "one click fixes everything" versions can actually get in the way of the screen readers people already use.

The short version: we build for accessibility from the ground up, and Recite Me carries over on top of that. The toolbar is a layer some visitors genuinely appreciate, but it's the supplement, not the plan.

Who we're designing for

The primary audience includes:

  • Older adults (60+) who may have reduced vision, hearing, or motor control
  • Family members and caregivers who may be stressed and scanning quickly
  • Donors of all ages who expect a professional, trustworthy experience
  • Volunteers ranging from students to retirees

When in doubt, design for the person who needs the most help. If the site works for someone with low vision on a tablet, it almost certainly works well for everyone else.

Typography and readability

  • Body text is large enough to read without zooming (minimum 16px, ideally 18px+)
  • Line lengths stay within a comfortable range (50-75 characters per line)
  • Headings are clearly distinct from body text in size and weight
  • Links are visually distinct from surrounding text (not just color — underline or other indicator)

Color and contrast

Passes
White on Dark Slate
Easy to read, strong contrast
Passes
Dark Slate on White
Easy to read, strong contrast
Passes
Dark Slate on Lime
Passes, though without much margin. Use it with generously sized text.
Fails
White on Teal
Hard to read, doesn't meet standards
Fails
Gray on Light Gray
Nearly invisible, very common mistake
Fails
Teal on Dark Slate
Looks okay but doesn't pass for body text

The top row passes. The bottom row fails. Notice how the failing examples feel harder to read even before you know the numbers — that gut reaction is what your visitors experience.

  • Text is built to meet WCAG AA contrast ratios at minimum (4.5:1 for normal text, 3:1 for large text)
  • Color is never the only way to communicate information (no "click the green button")
  • Interactive elements have visible focus states for keyboard users
  • The color palette gets checked against common forms of color blindness
  • Use the WebAIM Contrast Checker to verify any new color combinations
  • Every interactive element is designed to work with a keyboard (Tab, Enter, Escape, arrow keys)
  • Focus order follows a logical reading sequence
  • No content is hidden behind hover-only interactions
  • Buttons and links are large enough to tap easily on phones and tablets
  • Forms have clear labels, error messages, and success confirmations

Content and language

  • Headings follow a logical hierarchy (h1 → h2 → h3, avoiding skipped levels where possible)
  • Images have meaningful alt text that describes what's happening, not just "photo"
  • Links describe where they go (see Writing for the Web)
  • Plain language throughout: no jargon, no acronyms without explanation
  • Reading level targets grade 8 or below (test with Hemingway Editor)

Media

If you're providing video or audio content for the site, plan for captions and transcripts. Not everyone can hear the audio, and many people watch video on mute.

For video, upload to a platform like YouTube or Vimeo. Both support captions and auto-generated transcripts that you can review and edit. We'll embed the video from there rather than hosting files directly on the site. This keeps pages fast and gives you a central place to manage your video content.

We handle the technical side (motion settings, autoplay behavior), but we'll need captioned videos or transcripts from you when media is involved.

On this page