Fixing the Five Most Common Failures

The same five, everywhere

Automated surveys of large numbers of sites find the same handful of problems dominating year after year.

That consistency is useful, because it means a small business does not need an audit to know where to start.

None of the five requires a developer. All of them are corrections to content, settings, or a small amount of styling, and an afternoon covers most of a modest site.

One: images with no description

Every meaningful image needs text describing what it shows, read aloud by a screen reader and shown if the image fails to load.

Describe the content and its purpose rather than naming the file. A photograph of completed work is a fitted oak worktop in a galley kitchen rather than image four.

Decorative images that add nothing should have an empty description rather than a filled one, so they are skipped rather than announced.

The case that matters most is an image carrying information: a photograph of your opening hours, a price list as a graphic, or a phone number inside a banner. That content is invisible to anybody not seeing the image, and the correct fix is usually to put it in the page as text.

Two: form fields with no label

The failure that costs you enquiries directly, which makes it the most commercially urgent of the five.

A field labelled only by placeholder text inside it has no label as far as assistive technology is concerned, and the placeholder disappears as soon as somebody starts typing.

Every field needs a visible label attached to it, positioned above or beside the box and remaining there while somebody types.

The same applies to a search box with only a magnifying glass, and to fields distinguished only by position, such as three boxes for a date.

Where a form rejects an entry, the error has to say which field and what is wrong, in text, not by turning the box red.

Three: text you cannot read

Light grey on white is the most common visual design choice on modern sites and the most common contrast failure.

The guidance sets a ratio of about four and a half to one for ordinary body text against its background, and around three to one for large text.

Free checkers give you the figure for any two colours in seconds, and browser audit tools will flag every failing element on a page at once.

The places this usually fails are body text set too light, placeholder text, disabled buttons, text over photographs, and a brand colour used for links that was chosen for a logo rather than for reading.

Related, and separate: never use colour alone to carry meaning. A required field marked only in red, or a chart distinguished only by hue, is unusable to a substantial number of people.

Four: headings used for size

Headings are structure rather than styling, and they are routinely chosen for how large they look.

The result is a page that jumps from a main heading to a third-level one, uses a heading for a line of emphasis, or has no main heading at all.

Somebody using a screen reader navigates by heading, in the way a sighted reader scans a page visually, so a broken structure removes their ability to move around the page.

The rule is one main heading per page, then sections nested in order without skipping levels, with size controlled by styling rather than by choosing a different level.

Most page builders make this easy to get wrong and easy to fix, since it is a setting per block rather than a code change.

Five: no visible keyboard focus

The least understood of the five and the easiest to test.

Anybody navigating without a mouse moves through a page with the tab key, and the browser shows an outline around whatever is currently selected.

Designers frequently remove that outline because it is considered untidy, which leaves a keyboard user with no idea where they are on the page.

• Every interactive element must show it has focus.
• The order should follow the visual layout.
• Nothing should trap you, unable to tab onward.
• Menus and dropdowns must open with a keyboard.
• Skipping to the content should be possible.

If the outline has been removed, replacing it with a clear custom style is entirely acceptable. Removing it and providing nothing is not.

A worked example

A clinic ran an automated check and received a report with sixty-odd items, which nobody knew how to approach.

Grouped, it was four problems repeated across the site.

Images from their gallery had no descriptions, their booking form used placeholders instead of labels, their body text was set in a light grey below the contrast threshold, and their theme removed the focus outline.

The practice manager wrote descriptions for forty images, added labels to the form, darkened the text in the theme settings, and pasted in a focus style found in the theme's documentation.

It took most of a day and cost nothing.

A repeat check reported four items rather than sixty, and a patient using voice control told them the booking form was usable for the first time.

How to test in ten minutes

Three checks that need no tools and find most of this.

Put the mouse aside and tab through your homepage and your contact form. Can you see where you are, can you reach everything, can you complete the form and submit it.

Run a browser audit tool, which is built into most browsers now, and read the contrast and label warnings.

Turn on the screen reader already included with your computer or phone and listen to your homepage for two minutes. It is uncomfortable and it is the most informative thing on this list.

The counter-case

Automated tools find perhaps a third of real accessibility problems, and a clean report is not a clean site.

They cannot judge whether an image description is useful, whether a heading structure makes sense, or whether a process is navigable by somebody who cannot see the layout.

A site can pass every automated check and remain genuinely difficult to use, which is why the tab test and listening to the page matter more than the report.

Equally, the perfect should not stop the useful. Fixing these five improves things measurably for real people, even though it does not make a site fully accessible, and waiting for a complete audit before doing anything helps nobody.

The afternoon

1. Add descriptions to every meaningful image.
2. Put text content out of images and into the page.
3. Give every form field a visible label.
4. Check contrast and darken what fails.
5. Fix heading levels so they nest in order.
6. Restore a visible focus outline.
7. Tab through the site and complete your own form.

Step seven is the test that tells you whether the other six worked.

Headings as structure are covered in headings used for size rather than structure.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.