Homepage accessibility problems that cost customers

Key takeaways

Homepage accessibility problems lose customers who are older, use assistive technology, browse in bright light or simply have small phones. The most common are low-contrast text, small tap targets, unlabelled form fields, menus that do not work with a keyboard and key words inside images. Most can be fixed without a redesign, and they help every visitor.

• Text contrast at least 4.5:1 for normal text.
• Tap targets at least 24 by 24 CSS pixels; main buttons much bigger.
• Every form field has a visible label.
• Everything works with a keyboard, with a visible focus.

Why does homepage accessibility affect conversion?

Accessibility affects conversion because barriers stop real buyers from reading the message, pressing the button or completing the form. That includes disabled people, older visitors, people on small or cracked phones and anyone in bright sunlight. Under the Equality Act 2010, service providers must also make reasonable adjustments, which can include websites.

• Why your homepage is not converting visitors into customers
• Website accessibility for UK businesses

What are the most common homepage problems?

These five appear on most small business homepages we review.

• Low contrast: grey text or text over busy images below 4.5:1.
• Small targets: links and buttons too small or too close to tap.
• Unlabelled forms: placeholder text instead of labels.
• Keyboard traps: menus and sliders that cannot be used without a mouse.
• Images of text: key words in the hero image, unreadable by screen readers.

• Text in images: why it hurts your website
• Form labels vs placeholder text: which should you use?

How do you check your homepage quickly?

Use the W3C's Easy Checks: zoom the page to 200%, tab through it with the keyboard, check contrast with a free tool and look at alt text. Then try the main action with a screen reader on your phone. Automated tools catch some issues but miss many, so do the manual checks too.

• Mobile accessibility: the WCAG checks for small screens
• Navigation at 200% zoom: menus for visitors who enlarge text

Do accessibility overlays fix the problem?

No. Overlay widgets that promise instant compliance do not fix the underlying code and can make things worse for screen reader users. Fix the contrast, labels, focus and structure directly; it is usually less work than people expect.

• Accessibility overlays: why a widget will not fix your site

When is accessibility work bigger than a quick fix?

It becomes bigger when the theme or page builder produces inaccessible code throughout, such as menus built without proper elements or sliders that trap focus. Then fixing the homepage alone helps, but a template change may be needed for the whole site.

• Rewrite or redesign a homepage that does not convert

What does this look like in practice?

A pattern we see: light grey body text, a hero headline set inside the image and a form with placeholder-only fields. Fixing contrast, moving the headline into real text and adding labels takes a day or two and makes the page easier for everyone, not only for users with disabilities.

• See client work
• Website Design & Development for UK businesses

Homepage accessibility checklist

• Check text contrast is at least 4.5:1.
• Make the main button large and easy to tap.
• Give every form field a visible label.
• Tab through the page and check focus is visible.
• Move words out of images into real text.
• Add useful alt text to meaningful images.
• Zoom to 200% and check nothing breaks.

• Core Web Vitals on your homepage: what to fix first
• Is your homepage broken on someone else's phone?

Next step

Tab through your homepage using only the keyboard and try to reach and press the main button. If you get stuck or lose track of where you are, start there.