Website redesign and accessibility: what owners should know

An accessible website is one that people can use even when they cannot see the screen well, cannot use a mouse, or cannot hear a video. A redesign is the cheapest moment to get this right, because the fixes are built into the new pages instead of patched onto old ones. Most of it is common sense: readable text, clear contrast, descriptions on photos, forms that say what each box is for, and a site that works with a keyboard.

Why it matters for a small business

Plenty of your customers have a reason to need an accessible site, whether or not they would call it that. Someone with reading glasses left in the car. A retiree with shaky hands on a small phone screen. A customer who is colorblind, or who uses the screen reader built into their phone because their eyesight is going. If they cannot read your hours or tap your phone number, they call someone else, and you never know.

There is also the legal side, which owners hear about mostly through worried emails.

The ADA question, plainly

The Americans with Disabilities Act requires many businesses that serve the public to be accessible to people with disabilities. The US Department of Justice has said that this applies to websites of businesses open to the public, and has published guidance on it at ada.gov. There have been lawsuits against small businesses over websites that screen reader users could not use.

What the law requires for your particular business, and how it applies where you are, is a question for your attorney. What owners commonly do is aim for the widely used technical standard, the Web Content Accessibility Guidelines (WCAG) published by the W3C at w3.org, and fix the obvious problems listed below. No website company can honestly promise you a site that is lawsuit-proof, and you should be wary of anyone who does.

Be especially careful with "accessibility overlay" products: a widget, often a small person icon in the corner, sold as a one-line fix. They do not repair the underlying page, and many disabled users find them get in the way. A page built properly does not need one.

What to ask for in the redesign

Put these in writing when you hire someone, and check them on the preview before you approve it.

Text people can read

• Body text large enough to read on a phone without zooming. If you squint, it is too small.
• Dark text on a light background, or the reverse, with strong contrast. Light gray on white and white on pale yellow are the usual failures. Text laid over a busy photo is another.
• The site should still work when someone makes the text bigger in their phone or browser settings, without words being cut off or overlapping.

Photos with descriptions

Every meaningful photo needs alt text: a short written description that a screen reader reads aloud, and that shows if the image fails to load. "Finished deck with cedar railings, back yard in Springfield" is good alt text. "Image1.jpg" or "best deck builder" is not. Decorative pictures, like a background texture, should be marked as decorative so the screen reader skips them. Our guide on writing alt text for your website photos has examples.

Headings that make sense

Pages should use real headings in order: one main title, then section headings under it. Screen reader users jump from heading to heading the way sighted visitors skim. A page where every line is just bold text has no structure to jump through.

Links and buttons that say where they go

"Click here" and "Learn more" mean nothing when read out of context. "See our roof repair prices" or "Call 555-0142" does. Buttons should also be big enough for a thumb, with space between them.

Forms that explain themselves

Each box in your contact form should have a visible label, not just faint gray text inside the box that vanishes when you start typing. Error messages should say what went wrong: "Please enter a phone number" rather than a red outline with no words. Avoid puzzles that ask people to pick out traffic lights; there are spam filters that do not need them.

A keyboard can do everything

Some people use a keyboard or a switch instead of a mouse. Every menu, link, button and form field should be reachable with the Tab key, and you should be able to see where you are as you move.

Video and audio

If you have a video with talking, add captions. Do not let video or sound start playing by itself.

Five checks you can do yourself

You do not need special software to catch the worst problems.

1. Zoom test. On a computer, hold Ctrl (Cmd on a Mac) and press the plus key four or five times. Can you still read and use the page?
2. Tab test. Click in the browser's address bar, then press Tab repeatedly. Can you reach the menu, the phone link and the form, and can you see which item is selected?
3. Squint test. Step back from the screen and squint. Any text that disappears has too little contrast.
4. Phone screen reader. On an iPhone, turn on VoiceOver in Settings under Accessibility; on Android, TalkBack. Listen to your home page for a minute. Does it make sense? Turn it off the same way when done.
5. Form test. Submit your contact form with a box left empty. Does the error message tell you what to fix?

Good accessibility is good design

Almost everything above also helps customers with no disability at all: larger text for everyone over fifty, clear buttons for someone standing in a parking lot with one free hand, descriptions that help search engines understand what each photo shows. If many of your customers are older, our guide on redesigning a website for older customers goes further on readability and layout.

What to do this week

• Run the five checks above on your current site and write down what fails.
• Add the list from "What to ask for in the redesign" to your brief for whoever builds the new site.
• Go through your photos and write a one-line description for each one you want on the site.
• If you have had a legal letter about accessibility, talk to your attorney before changing anything.

If you want to see your current pages rebuilt with readable text and proper structure, you can see your site rebuilt first and run the same checks on the preview.