SiteSmith

Website accessibility for small businesses: where to start

Website accessibility means people can use your site even if they see poorly, cannot use a mouse, are hard of hearing, or use a screen reader that speaks the page aloud. For a small business, the best place to start is a short list of basics: readable text with strong contrast, descriptions on photos, a form with proper labels, and a page that works with the keyboard alone. These are not exotic features. They also make the site easier for every customer, including the many who simply have tired eyes and a small phone.

Who you are actually building for

It helps to picture real customers rather than a legal standard:

  • An older homeowner who has the text size on their phone turned up, and needs your page to cope with it.
  • Someone with low vision who zooms the page to twice its size.
  • A person who is blind and uses a screen reader, which reads headings, links and image descriptions aloud and lets them jump from heading to heading.
  • Someone with a tremor or arthritis who finds small buttons hard to hit, or who moves through a page with the Tab key.
  • A customer with color blindness who cannot tell your red "closed" from your green "open".

If your business serves older customers, and many local trades do, these are not edge cases. They are a good share of the people who call you.

The standard everyone refers to

The common yardstick is WCAG, the Web Content Accessibility Guidelines published by the W3C, the body that sets web standards. You will hear "WCAG 2.1 AA" or "2.2 AA": the numbers are versions, and AA is the middle of three levels, the one most organizations aim for. The full guidelines are long and technical. The W3C's accessibility pages have plain introductions if you want to read more, but you do not need to master them to make real progress.

The basics that help the most people

Text people can read

  • Body text large enough to read on a phone without zooming, and never pale gray on white.
  • Strong contrast between text and background. The guideline asks for a contrast ratio of at least 4.5 to 1 for normal text. Free "contrast checker" tools let you enter two colors and tell you if they pass.
  • No important words baked into a picture, such as an opening-hours graphic. Screen readers cannot read them, and they blur when zoomed. Type them as text instead.

Photos with a description

Each meaningful photo needs alt text: a short description that a screen reader reads aloud in place of the image. "Kitchen with white shaker cabinets and a quartz island, after our remodel" tells a listener what a sighted visitor sees. Purely decorative images should have empty alt text so the reader skips them. Writing alt text for your website photos has examples.

Headings that are real headings

Screen reader users move through a page by its headings, like a table of contents. That only works if the headings are set as headings in your editor (Heading 2, Heading 3), not just bold text made bigger. One main heading per page, then sections beneath it, in order.

"Click here" and "Read more" read aloud as a list of identical phrases. "See our roof repair prices" or "Book a cleaning" make sense on their own.

A form anyone can fill in

  • Every box has a visible label above it, not only gray placeholder text that disappears when you type.
  • Error messages say what is wrong in words ("Please enter a phone number"), not just a red outline.
  • If you use a "prove you are human" check, choose one that does not require solving a picture puzzle.

Everything works with the keyboard

Some people cannot use a mouse or touch screen. They move through a page with the Tab key and press Enter to follow a link. Menus, buttons and forms should all work this way, and the item that is currently selected should show a visible outline.

Video and audio

Videos with speech need captions. YouTube can generate them automatically; read through them and correct names and trade terms before relying on them. Do not autoplay sound.

A 15-minute self-check

You can test a lot yourself, without special software:

  1. Zoom test. On a computer, press Ctrl and + (Cmd and + on a Mac) until the page shows at twice its normal size (the browser shows the zoom level as 200). Everything should still be readable, with nothing cut off or overlapping.
  2. Keyboard test. Click in your browser's address bar, then press Tab repeatedly. Can you see where you are on the page? Can you reach the menu, the phone number and the form, and send the form, without the mouse?
  3. Phone text-size test. Turn up the text size in your phone's settings, then open your site. Does the text grow and the layout still hold together?
  4. Automatic scan. Run PageSpeed Insights on your page and read the Accessibility section. It flags missing alt text, low contrast, unlabeled form fields and small tap targets. It does not catch everything, but it catches the common mistakes.
  5. Listen to it. Turn on the screen reader built into your phone (VoiceOver on iPhone, TalkBack on Android) for two minutes on your home page. It is awkward at first, and very revealing.

Where the ADA comes in

The Americans with Disabilities Act is a civil rights law, and businesses open to the public have obligations under it. The Department of Justice has said that websites of such businesses should be accessible, and it publishes guidance at ada.gov. Website accessibility lawsuits and demand letters do reach small businesses. Whether and how the law applies to your particular business is a question for an attorney, not for a blog post. If you want the calm version of what owners should know about the legal side, read ADA website lawsuits: what small businesses should know.

What is safe to say without legal advice: doing the basics above is good practice, it helps real customers, and keeping a simple record of what you checked and fixed, with dates, is a sensible habit.

About "one-line fix" widgets

You may be offered an accessibility widget or overlay: a small icon that promises to make any site accessible with one line of code. Many accessibility specialists and disabled users say these do not fix the underlying problems, and sometimes get in the way of the screen readers people already use. A page that is built properly does not need one.

What to do this week

  • Run the zoom, keyboard and phone text-size tests on your home page and contact page.
  • Run the automatic scan and fix missing alt text and unlabeled form fields first.
  • Replace any hours, prices or menus that exist only as pictures with typed text.
  • Rewrite "click here" links so each says where it goes.
  • Keep a dated note of what you checked and changed.

If your site fails on contrast, zoom and keyboard all at once, the problem is usually the old design itself. You can see your site rebuilt first with readable text and proper headings, and run the same tests on the new version.