How do I build accessibility into a new website?

The short version

• Name the target in the brief and contract: WCAG 2.2, Level AA.
• Check it at design: contrast, text size, visible focus, big enough tap targets.
• Check it at build: keyboard use, headings, labels, alt text, captions.
• Test before launch with free tools and by hand. Tools alone miss things.
• This isn’t legal advice. If you have legal questions, ask a lawyer.

Why start at the beginning?

Accessibility is cheapest when it’s a requirement, not a repair. Colors, fonts, menus and forms are chosen in the first weeks. Choosing accessible ones then costs almost nothing. Changing them on a finished site means redesign work.

There’s also the law to think about. The US Department of Justice’s web guidance, dated March 18, 2022, says businesses open to the public must make what they offer online accessible to people with disabilities. It describes WCAG as “helpful guidance” and says businesses have flexibility in how they comply. Our answer on whether your website needs to be ADA accessible explains more. This isn’t legal advice.

What should go in the brief and contract?

One line does it: “The site must meet WCAG 2.2 Level AA.” The W3C’s WCAG 2.2 has been a W3C Recommendation since October 2023; the current version is dated December 12, 2024. Our guide to what WCAG 2.2 changed lists the new requirements.

Also ask:

• How will you test it, and will you share the results?
• Which theme or framework will you use, and is it built with accessibility in mind?
• Who fixes problems found after launch?

What should I check at each stage?

Design

• Contrast. Text must stand out clearly from its background, including text on photos.
• Text size. Body text readable on a phone without zooming.
• Visible focus. When you tab through the page, you can see where you are. WCAG 2.2 tightened this.
• Tap targets. Buttons and links big enough to tap. WCAG 2.2 sets a minimum target size.
• Color isn’t the only signal. Errors and links shouldn’t rely on color alone.

Build

• Keyboard. Every menu, button and form works with Tab, Enter and the arrow keys.
• Headings in order, one main heading per page.
• Forms with visible labels and clear error messages. See accessible forms.
• No moving content that can’t be paused, such as auto-playing sliders.

Content

• Alt text for meaningful images. The W3C’s alt text decision tree shows which images need it. See how to write alt text.
• Captions for video. See captions and transcripts.
• Link text that makes sense alone: “See our furnace repair prices,” not “click here.”
• Plain language and short paragraphs.
• PDFs: put important information on a web page instead where you can.

How do I test before launch?

1. Run a free automated checker on your key pages. See free accessibility checkers.
2. Work through the W3C’s Easy Checks: page titles, headings, contrast, text resizing, keyboard access and forms.
3. Unplug the mouse and use the home page, a service page and the contact form with the keyboard only.
4. Zoom the browser to 200% and check nothing is cut off.
5. If you can, ask someone who uses a screen reader to try the main tasks.

DOJ’s guidance makes the same point about tools: automated checkers can help, but a clean report doesn’t guarantee accessibility, and manual checks give a better picture.

What are the common mistakes?

• Leaving it out of the contract, then arguing about it later.
• Relying on an overlay widget. See accessibility overlays.
• Light grey text because it looks elegant.
• Image-only buttons and text baked into images.
• Testing only with automated tools.

What if the site fails the checks at launch?

Fix the problems that block the main tasks first: calling, booking, buying and the contact form. Then work through the rest on a written list with dates. Our article on where to start with accessibility covers the order.

How much does it cost, and how long does it take?

Built in from the start, it adds little to a project. Retrofitting a finished site costs more because design and code have to change. Testing a small site by hand takes a few hours.

How does E-3 handle this?

Redesigns are tested on a staging copy before launch, which is the right place to find and fix accessibility problems before customers meet them. Ask us how a specific page was checked. We can’t promise legal compliance; no honest web company can.

Related questions

• Does my website need to be ADA accessible?
• What did WCAG 2.2 change?
• How do I give feedback and approve a design?
• What goes on a launch checklist?
• Back to the complete guide to planning a website

Sources

1. Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation)
2. Guidance on web accessibility and the ADA (U.S. Department of Justice, ADA.gov)
3. Easy Checks: a first review of web accessibility (W3C Web Accessibility Initiative)
4. Images and alt text: An alt Decision Tree (W3C Web Accessibility Initiative)