madeyouawebsite.com

What WCAG 2.1 AA actually means for a fire department site

The ADA rule names this standard by name, which is good news: it is a checklist, not an opinion. Here is what it asks for, in the order a fire department is most likely to fail it.

Written August 2026  ·  Companion to the deadline guide

WCAG stands for Web Content Accessibility Guidelines. Level AA is the middle of three tiers and it is the one the Department of Justice named in the Title II rule. Whether that rule applies to your department is a separate question, and I wrote a guide to working that out.

This page is the other half: what the standard is actually asking for. I have put these in the order I find them broken on real fire department sites, not in the order the specification lists them.

1. The PDF problem, which is the big one

Fire departments run on PDFs. Burn ordinances, permit applications, meeting minutes, annual reports. A PDF on your site is web content and the rule covers it.

The failure is almost always the same: somebody scanned a paper document. A scan is a picture of text. A screen reader gets nothing from it, and neither does search. If a resident who cannot see is trying to read the burn ordinance that governs whether they get fined, a scan is a locked door.

The fix is rarely technical. It is to publish the thing as a web page instead of a PDF. A burn ordinance is text. It belongs on a page you can search, link to a section of, and read on a phone without pinching.

2. Contrast you can read in daylight

Body text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, which means roughly 24px or 19px bold and up, needs 3 to 1. Buttons and form field borders need 3 to 1 as well, so a pale grey outline on white fails even when the label inside it passes.

This is measured, not judged. Two colours either pass or they do not, and a free checker will tell you in seconds. The usual fire department failure is grey text on a grey photo banner, or red text on a dark red background, which is a genuinely hard pairing.

Worth knowing

Red on black is close to the worst pair in the palette and it is the one fire departments reach for first. Pure red on pure black measures about 5.25 to 1, so it passes for body text, but almost every softened or darkened red people actually like the look of does not. Measure it rather than trusting your eye on a calibrated monitor in a dark room.

3. Everything works from the keyboard

Every link, button, form field and menu has to be reachable and operable with Tab, Enter and the arrow keys, in an order that makes sense. Plenty of people navigate this way, including people using switch devices and voice control.

The common break is a custom dropdown menu built out of divs, which a mouse can open and a keyboard cannot. The second most common is a modal that traps you inside it with no way to press Escape out.

4. You can see where you are

When you Tab through a page, the thing currently selected must be visibly marked. Browsers do this by default with a focus ring, and a lot of templates switch it off because a designer thought it looked untidy. That single line of CSS makes a site unusable for keyboard users.

Tab through your own site right now. If you cannot tell where you are, that is a failure and it is usually a one-line fix.

5. Images carry real alt text

Every meaningful image needs a short text description. That includes the apparatus photos, the station photo, and any image with words baked into it, like a fundraiser flyer or a burn ban graphic.

A flyer image with no alt text means the fundraiser does not exist for a blind resident. If the graphic says "Burn ban in effect until further notice", that sentence has to be in the page as text, not only inside the picture.

Decorative images are the exception. A background texture gets an empty alt attribute so screen readers skip it rather than announcing a filename.

6. Every form field has a label

Contact forms, burn permit requests, volunteer applications. Each field needs a real label tied to it, not just grey placeholder text inside the box. Placeholder text vanishes the moment somebody starts typing, which strands anybody who needs to check what a field wanted.

Errors need to say what went wrong in words. "Invalid input" is not enough. "Enter a phone number with 10 digits" is.

7. Text can be made bigger without breaking

Somebody must be able to zoom to 200 percent and still read and use everything. Text set in fixed pixel heights inside fixed-height boxes overflows and clips at that point, which is how a phone number disappears for the person most likely to need it enlarged.

8. Real headings and landmarks

A screen reader user navigates by jumping between headings, the way a sighted person skims. So headings have to be real headings in the markup and nested in order, rather than a paragraph made big and bold because it looked right.

The same goes for page regions. A real header, navigation, main and footer let somebody skip straight to the content. A skip link at the very top does the same job for keyboard users, and it costs one line.

9. Motion that respects the setting

Anything that moves, autoplays or flashes needs care. Content that blinks between one and three times a second can trigger seizures, and nothing should. Anything that animates should honour the operating system's reduce-motion setting, which people with vestibular disorders switch on precisely so that sites stop moving.

How to check your own site in ten minutes

  1. Tab from the top of the home page to the bottom. Can you see where you are the whole way, and can you reach the menu and every form field?
  2. Zoom the browser to 200 percent. Does anything clip, overlap or disappear?
  3. Open your most important PDF. Can you select the text with your cursor? If not, it is a scan.
  4. Turn on your operating system's reduce-motion setting and reload. Does anything still move?
  5. Right-click your apparatus photo, inspect it, and look for an alt attribute with words in it.

None of that needs a specialist and all of it is a genuine part of the standard. It will not make you compliant on its own, but it will tell you fast whether you have a small problem or a big one.

Where I stand

I build every department site to this standard by default, including the ones nobody asked me for. Contrast is measured rather than eyeballed, the focus ring stays on, and motion is opt-in behind the reduce-motion setting. That is not an add-on line item, it is what the rule names, and it is far cheaper to build in than to bolt on in 2028.

Yours may already be built

There is a board of departments with finished sites online right now, built to this standard, none of whom have paid a cent. Check whether yours is one of them.