Making your site usable by everyone

Last updated 14 October 2026

By the FocalScore team at Astrolabix LLC. First published 14 October 2026. Sources last checked October 2026.

The short answer

Make text easy to read against its background, describe your pictures, label each form field, make sure the site works with a keyboard alone, keep headings in order and caption your videos. Those fixes cover most of what an automated scan finds. Then spend a little time using the site the way some of your customers do, with the keyboard and with the page zoomed in, because no scan finds everything.

What accessibility means for a website

A site is accessible when people can use it whatever their eyesight, hearing or movement, and whatever they use to browse: a screen reader that reads the page aloud, a keyboard instead of a mouse, a magnified screen, captions instead of sound. The shared standard is the Web Content Accessibility Guidelines (WCAG); W3C's quick reference lists each requirement with techniques for meeting it.

Why it matters to a small business

Some of the people looking for what you sell use a screen reader, can't use a mouse or need large text. If the phone number is an image with no description or the enquiry form can't be filled in with a keyboard, they can't become customers. Most fixes also help everyone else: readable text in sunlight, a form that says which field is wrong. And in some countries, and for some kinds of business, website accessibility is a legal requirement. Which rules apply depends on where you trade and what you sell; this guide is not legal advice.

How the free scan decides

The scan runs automated accessibility tests on the pages it reads. The main lines:

Color contrast fails when body text is below a contrast ratio of 4.5 to 1 against its background, the WCAG level for normal-sized text.
Image alt text fails when meaningful images have no alt text, and Form field labels when form fields have no label.
Document language fails when the page doesn't say which language it is in.
Keyboard nav & focus states, ARIA & landmarks and Skip-to-content link look at whether the page can be used with a keyboard, has the landmark areas (header, menu, main content, footer) that let screen-reader users jump around it, and offers a link to skip past the menu.
Every heading has words in it fails when five or more headings across the pages read have no words in them, and warns on one to four.
Videos play with captions fails when a video hosted on your site has no captions file, or the file doesn't load.
Overall accessibility / legal risk sums up how many of these problems the pages have.

Automated tests find only some accessibility problems. A page can pass each of them and still be hard to use, which is why this guide ends with the checks a person has to make.

The common fixes

Contrast. Body text needs a contrast ratio of at least 4.5 to 1 with its background, and large text at least 3 to 1 (WCAG's contrast rule). Light grey text on white and white text on a photo are the usual failures. Darken the text, or put text over photos on a solid panel.
Alt text. Describe what a picture tells the reader: "Technician repairing a boiler", not "IMG_2041". A picture that is only decoration gets an empty alt (alt="") so screen readers skip it. W3C's alt decision tree helps with the in-between cases.
Form labels. Each field needs a visible label tied to it, not only grey placeholder text that disappears when someone starts typing (W3C on labels).
Language. The page's opening tag names its language, such as <html lang="en">, so a screen reader uses the right voice and pronunciation.
Keyboard and focus. Each link, button and field must be reachable with the Tab key, in a sensible order, with a visible outline showing where you are. Themes that remove the outline to look tidier are a common cause.
Skip link and landmarks. A "Skip to content" link as the first thing on the page lets keyboard users jump past the menu (WebAIM explains how). Use the page areas HTML provides: <header>, <nav>, <main>, <footer>.
Headings. Delete empty headings left behind by a page builder, and keep levels in order, as the headings guide explains.
Captions. A video with speech needs captions: a WebVTT file linked with a <track kind="captions"> element for video on your own site, or the captions setting on YouTube or Vimeo. W3C's captions guide covers what to include.

<html lang="en">
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header>…</header>
  <main id="main">
    <video controls src="/media/tour.mp4">
      <track kind="captions" src="/media/tour.vtt" srclang="en" label="English" default>
    </video>
  </main>
</body>
</html>

Where to change them, by platform

WordPress: alt text is the Alternative Text field for each image in the Media Library. The site language is in Settings › General. Contrast, focus outlines and the skip link come from your theme; many themes have an accessibility option, and if yours doesn't, its developer is the one to ask.
Shopify, Wix and Squarespace: each image's settings have an alt text field (sometimes called an image description). Colours are set in the site's design or theme settings. The skip link and landmarks come from the template, so a problem there is one to report to the builder.
A hand-built site or ASP.NET: these are edits to the HTML. On ASP.NET MVC the <html lang>, the skip link and the landmark tags sit in the shared layout (_Layout.cshtml), so one change fixes them on each page that uses it.

The hand-check list

Do these on your homepage, your main service page and your contact page:

Keyboard only. Put the mouse aside and press Tab repeatedly. Can you always see where you are? Can you reach the menu, each button and each form field, open the mobile menu, and send the form?
Zoom. Zoom the browser to twice the normal size. Does the text still fit, without overlapping or needing sideways scrolling?
Listen. Turn on the screen reader your device already has (VoiceOver on Apple devices, TalkBack on Android, Narrator on Windows) and listen to the top of the page. Does it make sense without seeing it?
Colour. Is anything shown by colour alone, such as a required field marked only in red?
Mistakes. Send the form with a field left empty. Does the message say which field and what to do?
Sound off. Play your videos muted. Can you follow them from the captions?

The free scan's Accessibility section shows each automated finding with the elements it found; the sample report shows the layout.

Checklist

Body text has a contrast ratio of at least 4.5 to 1.
Meaningful images have alt text; decorative ones have an empty alt.
Each form field has a visible label.
The page names its language.
The site can be used with the keyboard alone, with a visible focus outline.
There is a skip link, and the page uses header, nav, main and footer.
No heading is empty.
Videos with speech have captions.
You have done the hand-check list on your key pages.

What the free scan checks for this

These are the FocalScore checks that cover this guide's subject. Each one in your report says what it found, shows the evidence and gives the fix.

Color contrast
Image alt text
Form field labels
Document language
Keyboard nav & focus states
ARIA & landmarks
Skip-to-content link
Overall accessibility / legal risk
Every heading has words in it
Videos play with captions

Sources

Last checked October 2026. Documentation, settings and rules change; if one of these pages now says something different, it is right and this guide is out of date. Tell us at info@focalscore.com.