UI/UX Design
Website Accessibility Basics: Making Your Site Usable for Everyone

In this article
- Why accessibility matters for a business
- The standard: WCAG in brief
- The most common problems and fixes
- Structure: headings and landmarks
- Video, audio and motion
- How to test your website yourself
- Designing for older customers
- A checklist for every new page
- A word on “accessibility overlay” plugins
- Where to start
Accessibility means making sure people can use your website regardless of disability, age, device or circumstances. That includes people who are blind and use screen readers, people with low vision who zoom in, people who can’t use a mouse, people with colour blindness, and older customers who find small text and fiddly buttons difficult.
It also helps everyone else: someone reading a phone in bright sunlight, holding a baby in one arm, or using a slow connection in a moving bus.
Many accessibility improvements are simple, inexpensive and make websites better for all visitors. This guide covers what accessibility means, the most common problems on business websites and how to fix them.
Why accessibility matters for a business
- More customers. India has tens of millions of people living with disabilities, and an ageing population with declining eyesight and dexterity. An inaccessible website turns them away.
- Better usability for everyone. Clear text, good contrast and large buttons help every visitor, especially on phones.
- Better SEO. Many accessibility practices — clear headings, descriptive links, image alt text, proper page structure — also help search engines understand your content.
- Legal expectations. India’s Rights of Persons with Disabilities Act, 2016, addresses accessibility, and government websites follow specific accessibility guidelines. Expectations on private businesses are growing too.
The standard: WCAG in brief
The Web Content Accessibility Guidelines (WCAG) are the international standard. Most organisations aim for level AA. The guidelines are organised around four principles — content should be:
- Perceivable: people can see or hear it, or get it another way (text alternatives for images, captions for video).
- Operable: people can use it with a keyboard, touch or assistive technology, with enough time.
- Understandable: text and controls are clear and behave predictably.
- Compatible: it works with different browsers, devices and assistive technologies, now and as they change.
You don’t need to read the full standard to make major improvements. The issues below account for most of the problems we find on business websites.
The most common problems and fixes
Low colour contrast
Light grey text on a white background, or white text on a pale photo, is hard to read for many people and in bright light. Text should contrast strongly with its background. Free contrast checkers tell you instantly whether a colour pair passes.
Missing image descriptions
Screen readers read out the “alt text” of images. Without it, users hear a file name or nothing. Describe meaningful images briefly (“Dental chair in our Morena clinic treatment room”). Purely decorative images should have empty alt text so they’re skipped.
Text too small or fixed
Body text should be comfortably readable on a phone, and the page must still work when users zoom in to 200%. Avoid disabling zoom on mobile.
Buttons and links too small
Tap targets should be large enough for a finger, with space between them. Tiny icons placed close together frustrate everyone.
Unclear links
“Click here” and “Read more” make no sense when a screen reader lists links out of context. Use descriptive link text: “Read our guide to website costs”.
Forms without labels
Every form field needs a visible label, not just placeholder text that disappears when typing starts. Error messages should explain what’s wrong and how to fix it, in text, not only with red colour.
Keyboard traps and invisible focus
Some people navigate with a keyboard. They should be able to reach every link, button and form field using Tab, see clearly where they are, and close menus and pop-ups with Escape.
Information conveyed only by colour
“Fields in red are required” doesn’t work for colour-blind users. Add text or symbols alongside colour.
Structure: headings and landmarks
Screen reader users often jump between headings to scan a page, just as sighted users scan visually. Use one main heading (H1) per page, followed by H2s for sections and H3s for sub-sections, in order. Don’t choose heading levels for their size; style them with CSS instead.
Use proper HTML elements for navigation, main content and footer, so assistive technology can identify each region. A “skip to content” link lets keyboard users bypass long menus.
Video, audio and motion
- Add captions to videos, which also help the many people who watch with sound off
- Avoid auto-playing video or audio, or provide an obvious way to stop it
- Respect the “reduce motion” setting on devices by limiting large animations
- Avoid flashing content, which can trigger seizures
How to test your website yourself
- Keyboard test: put your mouse aside and use Tab, Shift+Tab, Enter and Escape to move through your homepage and submit the contact form.
- Zoom test: zoom your browser to 200% and check nothing overlaps or disappears.
- Screen reader test: turn on TalkBack on Android or VoiceOver on iPhone and try to find your phone number and services.
- Automated checks: tools such as Lighthouse in Chrome or the axe browser extension flag many issues automatically. They catch only some problems, but they’re a good start.
- Sunlight test: read your site on a phone outdoors. Low contrast shows up immediately.
Designing for older customers
Many of the people who visit business websites — patients, parents, property buyers, business owners — are over fifty. As eyesight and dexterity change with age, small design choices make a big difference:
- Body text large enough to read without zooming, with generous line spacing
- Strong contrast between text and background
- Clear, labelled buttons instead of icons whose meaning isn’t obvious
- Simple navigation with fewer choices on each screen
- Forms that allow enough time and don’t clear everything after an error
- A phone number that can be tapped to call, for people who would rather talk than type
These changes don’t make a website look dated. Done well, they make it feel calm, clear and confident — qualities every visitor appreciates.
A checklist for every new page
- One H1, with headings in a logical order
- Meaningful images have short, accurate alt text
- Text and buttons pass a contrast check
- Link text makes sense on its own
- Every form field has a visible label
- Everything works with a keyboard, with a visible focus indicator
- The page works when zoomed to 200% and on a small phone
- Videos have captions and nothing plays sound automatically
Building these checks into your routine costs very little. Fixing them after a site is finished takes much longer.
A word on “accessibility overlay” plugins
Some plugins promise to make any website accessible instantly with a toolbar or automatic fixes, usually for a monthly fee. They rarely deliver what they promise, and disability advocates have widely criticised them. They can’t fix underlying problems like missing labels, poor structure or keyboard traps reliably, and they sometimes interfere with the assistive technology people already use. Fixing the website itself is the dependable approach.
Where to start
Start with the pages that matter most — home, key services, contact and checkout — and fix contrast, alt text, form labels and keyboard access. Then build accessibility into every new page and design.
It also helps to add a short accessibility statement to your website: what standard you aim for, what you know still needs work, and how people can contact you if they have difficulty using the site. It shows good faith and gives visitors a way to tell you about problems you might never find yourself.
We design and build websites to WCAG AA as standard, and we can audit your existing site and give you a prioritised list of fixes. Get in touch if you’d like a review.



