Four Accessibility Fixes Worth Doing on a Small Site

Most small-business websites in India are built for one imaginary visitor: a sighted person, holding a new phone, in good light, with a steady hand, who can see colour normally and read English comfortably. Every real visitor who differs from that picture is handled by accident.

Accessibility is the work of removing those accidents. It is usually framed as compliance, which makes it sound like paperwork. It is better framed two ways at once. First, reach: a person who cannot complete your enquiry form is a lost enquiry, exactly like a person on a slow connection who gives up on a four-megabyte hero image. Second, decency: a shop with a step at the door and no ramp has made a decision about who it wants, whether or not anyone said it out loud.

You do not need to do everything. Four things carry most of the weight on a brochure or e-commerce site, and all four can be checked by a non-technical owner in an afternoon.

Contrast: the one you can see yourself

Light grey text on a white background is the most common accessibility failure on Indian small-business sites, and it is nearly always a design decision, not a budget problem. Somebody thought #999999 looked more refined than black.

There is a published, checkable number here. The Web Content Accessibility Guidelines — WCAG, the international standard most people mean when they say "accessibility rules" — set a contrast ratio of 4.5:1 between text and its background for normal body text at level AA, and 3:1 for large text, meaning roughly 18pt, or 14pt bold and above. WCAG 2.1 also asks for 3:1 on the visual boundaries of interface components, so a form field outlined in the palest grey fails too.

You can test this without a developer. Free contrast checkers let you paste two colour codes and get a ratio. Ask your designer for the hex codes of your body text and background, type them in, read the number. If it says 3.1:1 on body text, that is a fail and the fix is one line of CSS.

Three places this goes wrong repeatedly:

• Text over a photograph. White headline over a busy image. The ratio changes across the image, so it passes on the left and fails on the right. A dark overlay behind the text fixes it.
• Placeholder text used as a label. Light grey "Your name" inside the box. Low contrast, and it vanishes the moment someone types.
• Disabled or secondary buttons. "Cancel" in pale grey, often below any sensible ratio.

And a related one that is not about ratios: do not use colour alone to carry meaning. If your delivery form marks errors by turning the field border red and nothing else, a visitor with red-green colour vision deficiency gets no information. Add the words "Please enter a 10-digit mobile number" next to the field.

Labels: forms are where the money is lost

Your contact form, your checkout, your callback request — these are the pages that pay for the site. They are also where accessibility failures cost you directly rather than abstractly.

A form field needs a label that is programmatically tied to it, not just a bit of text that happens to sit nearby. In HTML that is a <label for="email"> pointing at a field with id="email". When that link exists, a screen reader announces "Email address, edit text" when the user arrives at the box. When it does not, it announces "edit text" and the person is guessing.

There is a bonus that has nothing to do with disability: a properly linked label is clickable. Tapping the words "Email address" puts the cursor in the box. On a phone, that roughly doubles the size of the target for everyone, including a customer poking at your form one-handed on a bus to Noida.

Two more form habits worth fixing:

1. Keep the label visible. Placeholder-only forms look clean and fail badly. The user types their phone number, gets distracted, comes back, and has no idea which box is which.
2. Put errors in text, next to the field. "Something went wrong" at the top of the page helps nobody. Name the field and say what is wrong with it.

If your forms feed a CRM or an automated follow-up, the same discipline matters on the other side — a form nobody can complete is an empty pipeline. We write about that plumbing in our work on CRM systems.

Keyboard: the five-minute test

Here is the single most useful accessibility test a non-technical owner can run. Open your own website on a laptop. Put the mouse away. Press the Tab key repeatedly and watch what happens.

You are checking three things:

• Can you see where you are? There should be a visible outline or highlight on whatever is currently selected. If the page looks completely unchanged as you tab, someone has removed the focus indicator because they thought it was ugly. That is a fail, and it is one of the most common ones.
• Can you reach everything? Tab to the menu, the dropdown, the search box, the enquiry button, the WhatsApp widget. Anything you can click with a mouse should be reachable with Tab and operable with Enter or the space bar.
• Can you get out? Open a popup — a newsletter modal, a cookie banner, an image lightbox — and try to close it with the keyboard and Escape. Popups that trap keyboard focus are a classic failure, and they affect sighted keyboard users too.

Why does this matter beyond screen readers? Plenty of people use a keyboard because a mouse hurts, because of a tremor, because of a temporary injury, or simply because they are fast. The keyboard path is also roughly the path an assistive technology takes through your page, so if tabbing works sensibly, a lot else is probably fine.

While you are there, check the tab order. If pressing Tab jumps from the logo to the footer and back up to the menu, your markup order and your visual order have come apart — usually a side effect of a page builder. That is a development job rather than a content one; it sits in the same bucket as the rest of careful front-end build work.

Alt text: describe the purpose, not the pixels

Alt text is the written description attached to an image. It is read aloud by screen readers, shown when an image fails to load, and used by search engines as a signal about what the picture contains.

The usual advice — "describe the image" — produces bad alt text. The better instruction is: write what the image is doing on the page.

Image	Weak alt	Better alt
Product photo of a steel tiffin	"image1234.jpg"	"Three-tier stainless steel tiffin with clip lock"
Your logo in the header, linking home	"logo"	"Sharma Electricals, home"
A decorative pattern behind a heading	"decorative background design"	Empty alt — alt="" — so it is skipped
A poster with your offer written on it	"offer poster"	The full text of the offer, including dates

That last row is the one that bites Indian businesses hardest. Festival offers, price lists, menus and timings are constantly published as a single image — often a WhatsApp forward reused on the site. To a screen reader, and to a search engine, that image is silent. If the information only exists inside a picture, write it out in real text underneath as well. It costs five minutes and it is the same work that makes a page quotable, which is relevant if you care about how your pages get found.

The thing not to buy

You will eventually be sold an accessibility overlay: a single line of JavaScript, paid monthly, that drops a little accessibility icon in the corner of your site and promises compliance. It typically offers a panel of toggles — bigger text, higher contrast, a "dyslexia font", a reading guide.

We would not buy it, and we would rather tell you that than sell you one.

The reasons are structural. An overlay runs after your page loads and guesses at what your markup means. It cannot know that the image of your price list contains prices. It cannot know whether that unlabelled box wants a name or a GST number. It guesses, and a wrong guess read aloud confidently is worse than silence. Meanwhile the toggles it offers largely duplicate things the user's own operating system, browser and screen reader already do better — people who need magnification already have magnification, configured the way they like it, and they did not come to your site to reconfigure it.

There has been sustained, public criticism of these products from disabled users and accessibility practitioners for years. That is the part worth weighing: the people the product claims to serve are, loudly and repeatedly, not asking for it.

Spend the same money on fixing contrast, labels, focus indicators and alt text in the actual site. Those fixes stay fixed and do not renew annually.

What about the law in India

Be careful with anyone who opens with a legal threat. The Rights of Persons with Disabilities Act, 2016 obliges establishments to provide accessible services and empowers the government to notify accessibility standards. The clearest published web standards in India — the Guidelines for Indian Government Websites — are written for government bodies, and they lean on WCAG. How all of this applies to a private business website has not been tested in the way it has in some other countries, and anyone telling you with certainty that your bakery's site is illegal is selling something.

So do not do this because you are frightened. Do it because the four fixes above are cheap, permanent, help every visitor, and are simply the right way to build. If a customer with low vision cannot read your phone number, that is a business problem before it is a legal one.

What to do this week

1. Run the Tab test on your home page and your enquiry page. Note anything you cannot reach, see or escape.
2. Check two colours — body text on background, and your main button text on the button — against 4.5:1 in a free contrast checker.
3. Open your contact form and confirm each field has a visible label that stays put, and that clicking the label text focuses the field.
4. Find every image that contains words — offers, menus, price lists, timings — and add that text to the page as real text.

That list is short enough to finish and specific enough to hand to whoever maintains your site. If the answers come back awkward — the focus outline was deliberately removed, the forms are generated by a plugin you cannot edit, the tab order is scrambled by the page builder — that is a build problem rather than a content one, and it is worth a conversation about the site itself before you spend anything more on traffic to it.

Questions we get asked