Why bother
Accessibility work overlaps almost entirely with things you already want — semantic markup, keyboard usability, readable contrast, and clear labels. It widens your audience, helps SEO, and most of it costs nothing if done from the start.
Accessibility is often framed as a compliance chore. In practice, most of it is simply building the site properly — and the same work that helps a screen reader user also helps Google, helps someone on a cracked phone in bright sunlight, and helps anyone navigating with a keyboard.
The high-impact basics
These cover the majority of real-world barriers and are inexpensive to get right:
- Use real HTML elements A
<button>is focusable, keyboard-operable, and announced correctly. A<div>styled to look like a button is none of those things. This single habit prevents a large share of problems. - Every image needs an alt attribute Descriptive for meaningful images, empty (
alt="") for decorative ones so screen readers skip them. - Label every form field A real
<label>tied to the input. Placeholder text is not a label — it disappears when typing. - Sufficient colour contrast Aim for at least 4.5:1 for body text. Light grey on white fails, and it also fails anyone outdoors.
- Keyboard operability Everything clickable must be reachable and usable with Tab and Enter, with a visible focus outline.
- Logical heading structure One H1, then H2s and H3s in order. Screen reader users navigate by headings; so do search engines.
- Do not convey meaning by colour alone A red field border needs accompanying text explaining the error.
The fastest useful test: put your mouse aside and navigate your own site with Tab and Enter only. Can you reach the menu, open it, fill the contact form, and submit? Can you always see where you are? Most sites fail this within thirty seconds, and the failures are usually quick to fix.
Where Indian sites commonly fall short
- Text embedded in images — pricing tables and offers as JPEGs are unreadable to screen readers and to search engines.
- Tiny tap targets on mobile menus and links.
- Low-contrast light grey body text, which is fashionable and genuinely hard to read.
- Carousels that auto-advance before slower readers finish.
- Missing form labels, relying on placeholders alone.
- PDF-only information with no HTML alternative.
- No visible keyboard focus, often removed deliberately in CSS because it "looks untidy".
Never remove focus outlines without replacing them. outline: none in CSS is one of the most common accessibility failures on the web. If the default outline does not suit your design, style a clearer one — do not delete it.
The overlap with SEO
| Accessibility practice | SEO benefit |
|---|---|
| Descriptive alt text | Image search visibility |
| Proper heading hierarchy | Clearer content structure for crawlers |
| Semantic HTML | Better content understanding |
| Descriptive link text | Stronger internal link signals |
| Text instead of images of text | Content becomes indexable |
| Fast, lightweight pages | Core Web Vitals |
Screen readers and search engine crawlers consume your site in almost the same way — as structured text without visual context. Building for one reliably improves the other.
How to check your site
- Run an automated scan — Lighthouse's accessibility audit or WAVE. These catch perhaps a third of issues, which is a useful start.
- Test with the keyboard — the manual test above finds what scanners miss.
- Check contrast on your actual colour palette with a contrast checker.
- Zoom to 200% and confirm nothing breaks or overlaps.
- Try a screen reader briefly — NVDA on Windows is free. Even ten minutes is illuminating.
A realistic priority order
If you cannot do everything, this sequence removes the most barriers per rupee:
- Fix contrast on body text and buttons.
- Add alt text to all meaningful images.
- Restore visible keyboard focus.
- Add proper labels to every form field.
- Replace text-in-images with real text.
- Fix heading order.
- Ensure the mobile menu works by keyboard.
Want your site checked for accessibility and given a prioritised fix list? Send us the URL. See also our conversion design guide and mobile-first guide.