Accessibility gets treated as a compliance chore for large organisations. In practice the basics are an afternoon of work, they improve the site for everyone, and several of them are things search engines read directly.
Beyond that, most of what follows simply makes a website easier to use on a phone in bright sunlight, which describes a large share of your visitors.
1. Colour contrast
The most common failure by a distance. Light grey text on white looks refined on a designer’s calibrated monitor and disappears on a mid-range phone held outdoors.
The standard is a contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Check it with any free contrast checker. This one fix alone usually improves conversion, because text nobody can read is text nobody reads.
2. Tap targets
Anything tappable should be at least 44 by 44 pixels with a little space around it. Stacked footer links set at 12 pixels with no padding are the usual offender, and they are frustrating for everyone, not only for people with motor impairments.
3. Alt text that says something
Describe what the image conveys, in a sentence, as though reading the page aloud to someone on the phone. “Dr Priya examining a patient with a slit lamp” rather than “image1” or “eye doctor chennai best clinic”.
Decorative images should carry an empty alt attribute so screen readers skip them rather than announcing a filename. Keyword stuffing alt text is both useless for ranking and actively hostile to the people the attribute exists for.
4. Keyboard access
Put your mouse aside and press Tab repeatedly. You should be able to reach every link, button and field, and you should always be able to see where you are.
If the focus outline is invisible, someone removed it in CSS to tidy the design. Restore it, or replace it with a visible style of your own. A menu that only opens on hover is unreachable this way, and so is anything trapped behind it.
5. Form labels
Every field needs a real label element tied to its input. Placeholder text is not a label: it vanishes the moment someone starts typing, which is exactly when they might need to check what the field was asking for.
Error messages should say what to do, in text and not only in red. “Enter a 10-digit mobile number” beats a red border.
6. Heading structure
One h1 per page, then h2 for sections and h3 beneath them, in order and without skipping. Headings are how screen reader users navigate a page, and they are also how search engines work out what a page is about.
Do not choose a heading level because of how big it looks. Choose it for the structure and set the size in CSS.
Almost everything on this list makes the site better for people with no impairment at all. That is the argument, not compliance.
How to check
- 1Run Lighthouse in Chrome DevTools; it has an accessibility audit built in.
- 2Tab through the whole page without touching the mouse.
- 3Check your text against a contrast checker.
- 4Open the site outdoors on a phone at half brightness. It is the most honest test there is.
