Where do I start with website accessibility?

The short version

• Accessibility means people with disabilities can use your site: by screen reader, keyboard, zoom or captions.
• Fix the common barriers first: contrast, alt text, form labels, keyboard access, captions and headings.
• Use the W3C’s free Easy Checks on your home, main service and contact pages.
• Aim for WCAG 2.2 Level AA, the latest version of the international standard.
• Overlays and widgets don’t replace real fixes. This isn’t legal advice.

What does an accessible website actually mean?

An accessible website is one that people with disabilities can use. That includes someone who is blind and listens with a screen reader, someone with low vision who enlarges text, someone with a tremor who can’t use a mouse, and someone who is deaf and needs captions.

It helps everyone else too. Strong contrast helps a customer reading your hours in bright sunlight. Captions help someone watching your video on a muted phone in a waiting room. A clearly labeled form helps a busy person get through it in one try.

The technical standard behind all of this is the Web Content Accessibility Guidelines (WCAG), published by the W3C. Its WCAG overview says WCAG 2.2 was published in October 2023 and updated in December 2024, and that the W3C “encourages you to use the latest version.” A WCAG 3 is in progress, but it’s still an early draft.

WCAG is built on four ideas. Content should be:

• Perceivable: people can see or hear it, or get it another way.
• Operable: people can use it, including without a mouse.
• Understandable: it’s clear and behaves the way people expect.
• Robust: it works with different browsers and assistive technology.

Each rule, called a success criterion, has a level: A, AA or AAA. Level AA is the usual target for a business site. You don’t need to read all of WCAG to make real progress. You need to fix the barriers that turn up most.

Which barriers should I fix first?

The Department of Justice’s web accessibility guidance lists the common barriers on business sites: poor contrast, color used alone, missing alt text, missing captions, inaccessible forms and no keyboard access. That’s a sensible starting list.

Low color contrast

Light gray text on white, or white text over a busy photo, is hard to read. W3C’s contrast guidance sets the Level AA minimum at a ratio of 4.5 to 1 for normal text and 3 to 1 for large text, which it defines as at least 18 point, or 14 point bold. Check body text, buttons, links and any words placed over images. A free contrast checker gives you the ratio when you enter two colors.

Images without useful alt text

Screen readers read alt text aloud in place of the image. Without it, a blind visitor hears nothing, or a file name. Describe what the image adds to the page, give decorative images empty alt text, and include any words that appear in the image. Our answer on how to write alt text has examples.

Forms without labels

Forms are where barriers cost you leads directly. Give every field a visible label that stays put, not placeholder text that vanishes when someone starts typing. Mark required fields in words. Make error messages say what went wrong and how to fix it, in text, not only with a red outline.

Things you can’t use with a keyboard

Some people move through a page with the Tab key, a switch or voice control. Every link, button, menu and form field must work that way, and there must be a visible outline showing where you are. Pop-ups need to close with the keyboard and must not trap people inside them.

Small or hidden controls

WCAG 2.2 added rules that matter on phones. W3C’s summary of what’s new in 2.2 includes a minimum target size of 24 by 24 CSS pixels at Level AA, with some exceptions, and a rule that the item you’ve tabbed to mustn’t be hidden behind something like a sticky header or cookie banner. It also adds rules that make logins easier for people who struggle with memory tests.

Video and audio without alternatives

Add captions to video with speech. Automatic captions are a start, but read them through and correct names and terms. Give audio-only content, like a podcast, a transcript.

Color used alone, and messy headings

“Required fields are in red” fails for anyone who can’t see red, so pair color with words or an icon. Screen reader users jump from heading to heading to scan a page, so headings must be real headings in a logical order, not just bold text.

How do I check my own site in 30 minutes?

The W3C’s Easy Checks are a first review anyone can do. They cover page titles, alt text, headings, contrast, resizing text, keyboard access and visible focus, forms, moving or flashing content, video and audio alternatives, and basic structure.

Try this on your home page, your most important service page and your contact page:

1. Read each page title in the browser tab. Is it clear and different on every page?
2. Put the mouse aside. Press Tab over and over. Can you reach the menu, the phone number and the contact button? Can you always see where you are?
3. Enlarge the text only to 200%. The Easy Checks page explains how in Firefox and Safari. Does text overlap, get cut off or disappear?
4. Fill in the contact form with the keyboard. Leave a required field blank and submit. Is the error clear, and does it say which field?
5. Check your lightest text and any text on photos with a contrast checker.
6. Play a video with the sound off. Are there captions, and are they right?

The W3C is plain that “a web page could seem to pass these checks, yet still have significant accessibility barriers.” Treat them as a first pass. Automated checkers help too, but they can’t judge whether alt text makes sense or whether a form is easy to follow.

What order should I fix things in?

You don’t have to fix everything this week. This order puts the biggest wins first:

1. Contact, booking and checkout forms. They’re where a barrier turns straight into a lost customer.
2. Contrast and focus outlines across the site. Often a few style changes fix every page at once.
3. Alt text on the images that carry meaning, starting with your main pages.
4. Headings on your home and service pages.
5. Captions on any video with speech.
6. An accessibility statement that says what you’ve done and how to reach you if something doesn’t work.
7. A standard for new work, so every new page, image and form meets the same bar.

If you’re planning a redesign anyway, build accessibility in from the start. It’s far easier than fixing it afterward. Our answer on whether to redesign or fix your site helps with that decision.

How do I write content that more people can use?

A lot of accessibility is writing, and that part is fully in your hands.

• Make link text describe the destination. “Read our cancellation policy” works when read aloud on its own. Five links that all say “click here” don’t.
• Keep sentences and paragraphs short. Plain words help people with cognitive disabilities, people reading in a second language, and anyone skimming on a phone.
• Put key information on the page, not only in a PDF. Scanned menus, price sheets and forms are often unreadable to screen readers.
• Don’t bake text into images. Hours inside a graphic can’t be read aloud, enlarged cleanly or found by search engines.
• Spell out abbreviations the first time you use them.
• Label buttons with the action. “Book a consultation” says more than “Submit.”

Do accessibility widgets or overlays fix this?

No. The Department of Justice’s guidance says automated tools must be used carefully and that a clean report doesn’t necessarily mean a site is accessible. Our answer on whether overlays make a site compliant covers the FTC’s action against one overlay maker and what to do instead.

Does the ADA apply to my website?

The Department of Justice’s position, in its 2022 guidance, is that the ADA’s requirements for businesses open to the public cover what they offer on the web. How that applies to your business is a legal question. This isn’t legal advice. Our answer on whether your site needs to be ADA accessible explains where things stand and what to do if a demand letter arrives.

What are the most common mistakes?

• Removing the focus outline because a designer thought it looked untidy.
• Using placeholder text as the only label in forms.
• Trusting an automated score. A perfect score can still hide a form nobody can complete with a keyboard.
• Fixing once and stopping. New pages, images and plugins bring new problems. Check again after every round of changes.
• Posting everything as PDFs or images, from menus to event flyers.
• Believing a promise of “full compliance.” Nobody can honestly make one, so be wary of anyone who does.

What if a customer says they can’t use your site?

Thank them, and ask what they were trying to do and what got in the way. Offer another way to get it done right now, such as a phone call or an emailed copy of the document. Then fix the barrier itself, check the same problem on similar pages, and let the customer know when it’s done. A clear contact route in your accessibility statement makes these reports easier to receive.

How long does it take?

The Easy Checks take about 30 minutes for three pages once you know them. Many fixes, like contrast, focus outlines, alt text and form labels, are small jobs. A site built on an old theme or page builder can take longer, because the problems may sit in code that’s hard to change. That’s worth settling before you decide on a redesign.

How does E-3 handle this?

E-3 builds sites to WCAG Level AA and fixes problems in the site itself, never with an overlay. Our own results are on our accessibility page. Bigger fixes are tested on a staging copy first. We can’t promise legal compliance, and we’ll say so plainly.

Related questions

• Does my small business website need to be ADA accessible?
• Do accessibility widgets and overlays make my site compliant?
• What is alt text, and how do I write it?
• What does WCAG mean?

Sources

1. WCAG 2 overview (W3C Web Accessibility Initiative)
2. What's new in WCAG 2.2 (W3C WAI)
3. Easy Checks: a first review of web accessibility (W3C WAI)
4. Understanding success criterion 1.4.3: Contrast (minimum) (W3C WAI)
5. Guidance on web accessibility and the ADA (U.S. Department of Justice)