Website Accessibility Basics Every Business Owner Should Know

Website accessibility means people with disabilities can use your site: read the text, see the buttons, fill the form and move around without a mouse or without sight. The basics are readable color contrast, text descriptions on images, labeled form fields, keyboard friendly navigation and big enough tap targets. Most of it is plain good design, and it helps every visitor.

We audit a lot of small business sites, and accessibility problems are everywhere. Gray text on a white background. Buttons that are images with no label. A phone number you cannot tap. Forms where the field names vanish when you type. None of these are exotic. All are fixable in an afternoon.

Key points

• The standard most people follow is WCAG, the Web Content Accessibility Guidelines. Version 2.2 became a W3C recommendation in October 2023.
• Text needs a contrast ratio of at least 4.5 to 1 against its background, or 3 to 1 for large text.
• Every meaningful image needs alt text. Decorative images get empty alt text.
• Every form field needs a visible label, and the whole site should work by keyboard.
• Tap targets should be at least 24 by 24 CSS pixels under WCAG 2.2, and bigger is better.
• Accessible sites also tend to be easier to use on phones and easier for search engines to read.

Why This Is Not Just A Legal Issue

Yes, businesses get demand letters and lawsuits over inaccessible websites in the United States, often under the Americans with Disabilities Act. I am not a lawyer, and the details change, so I will not claim to tell you your exact risk. What I will tell you is simpler.

A real person who cannot read your gray text, or who uses a screen reader and cannot tell which button calls you, will not become your customer. Many people also have temporary limits: a broken arm, glare on a phone in the sun, a noisy room, a cracked screen. Accessible design catches all of them.

The Four Principles

WCAG organizes everything under four ideas, and they are easy to remember. Your site should be:

1. Perceivable. People can see or hear the content.
2. Operable. People can use the controls, including by keyboard.
3. Understandable. The text and behavior make sense.
4. Robust. It works with different browsers and assistive tools.

Everything below fits into one of those.

Fix 1. Color Contrast

Low contrast is the most common problem we find. Light gray text on white looks modern and is hard to read.

Use a free contrast checker. Paste your text color and background color and see the ratio. Check buttons, links, text over photos and placeholder text, which is often too pale.

A related rule: do not use color alone to show meaning. A red field border with no message means nothing to someone who is colorblind. Add an icon or a sentence.

Fix 2. Alt Text On Images

Alt text is a short description in the image's code. Screen readers read it aloud. Search engines use it too.

• Meaningful image: describe what it shows and why. "Technician replacing a car battery in a driveway."
• Image with text: include the text. Better, use real text instead of text in an image.
• Logo that links home: "Business name, home."
• Decorative image: leave alt empty, so screen readers skip it.
• Do not start with "image of" or stuff keywords. Just describe it.

A phone number inside an image is invisible to a screen reader and cannot be tapped. Put your number in text and make it a phone link.

Fix 3. Labels On Every Form Field

If a form field has only placeholder text, the label disappears once you start typing, and many screen readers will not announce it properly. Put a real label above each field. Mark required fields clearly. Write errors in plain words next to the field, and keep what the person typed.

Use the right field types so phones show the right keyboard. This is the same advice that raises completion rates, and I cover it in lead forms: the fields that kill conversions.

Fix 4. Keyboard Use And Focus

Some people never use a mouse. Try this test on your own site: put the mouse away and press the Tab key repeatedly.

• Can you reach every link, button and form field?
• Is there a visible outline or highlight that shows where you are?
• Does the order make sense, top to bottom?
• Can you open and close menus and pop ups with the keyboard?
• Can you escape a pop up, such as a chat box or a cookie notice?

If the highlight is invisible, someone has probably turned off the default outline in the style sheet. Put a clear focus style back.

Cookie banners are a common trap. Make sure the banner can be reached and closed by keyboard. More in cookie notices and privacy pages.

Fix 5. Headings, Links And Page Structure

Screen reader users jump around by headings. If you use big bold text instead of real heading tags, they cannot.

• One H1 per page, then H2s for sections, H3s for subsections. Do not skip levels for looks.
• Link text should make sense alone. "Read our brake repair guide" beats "click here."
• Use real buttons for actions and real links for navigation.
• Add a "skip to content" link at the top for keyboard users.
• Set the page language in the HTML.

This is also good SEO. Clear structure is easy for people and for search engines.

Fix 6. Tap Targets And Mobile

WCAG 2.2 added a rule that clickable targets should be at least 24 by 24 CSS pixels, with some exceptions. In practice I aim for larger, about 44 pixels, which is the size Apple and others have long suggested. Space buttons so a thumb does not hit two at once.

Do not disable pinch zoom. Do not use text so small it needs zooming. Let text resize without breaking the layout.

Fix 7. Video, Audio And Motion

• Add captions to videos. This helps deaf users and the many people who watch on mute.
• Offer a transcript for audio.
• Do not autoplay audio.
• Avoid flashing content. Respect the reduced motion setting for animations.
• Give users a way to pause moving carousels. Better yet, avoid them.

A 30 Minute Self Check

1. Run a free automated checker, such as the one built into Chrome's Lighthouse. It catches some problems, not all.
2. Check contrast on your main text and buttons.
3. Tab through your home page and your contact page.
4. Zoom the browser to 200 percent. Does anything break?
5. Turn on a screen reader on your phone for two minutes and try to find your phone number.
6. Look at every image for alt text.
7. Write down what you find, fix the worst three first.

Automated tools find only part of the issues. A real person using a keyboard and a screen reader finds the rest.

Add An Accessibility Statement

A short page that says you care about accessibility, what standard you aim for, and how to reach you if something does not work is a good habit. Do not claim full compliance if you have not tested. State what you do, and give a real email or phone number for help.

If you want me to look at your site, book a strategy call, or check my guides.

Questions

What is WCAG and which level should I aim for?

WCAG is the Web Content Accessibility Guidelines from the W3C. Most organizations aim for level AA of version 2.2, which covers the basics like contrast, labels, keyboard use and target size.

Does my small business website have to be accessible?

In the United States, courts and plaintiffs have applied the ADA to business websites, though the details vary and change. Rather than guess at your risk, fix the basics and talk to a lawyer if you receive a letter. Accessibility is also just good business.

Can I use an accessibility overlay widget to fix everything?

Overlays that promise one line fixes do not replace real fixes in your code, and many accessibility experts and users criticize them. Fix the underlying site.

How do I check color contrast?

Use any free contrast checker. Enter your text color and background color. Aim for at least 4.5 to 1 for normal text and 3 to 1 for large text and interface elements.