Web accessibility means making your website usable by as many people as possible, including those with visual, auditory, motor, or cognitive disabilities. It is not a niche concern. The World Health Organization estimates that over 1.3 billion people (roughly 16% of the global population) have some form of significant disability. In India alone, the 2011 Census identified over 26.8 million people with disabilities, and advocacy groups estimate the actual number is significantly higher.
For small businesses, accessibility is often overlooked because it sounds technical and complicated. It does not have to be. The most impactful accessibility improvements are straightforward and benefit all users, not just those with disabilities. An accessible website is simply a better website.
Why accessibility matters for your business
More customers, more revenue
Inaccessible websites exclude potential customers. People who cannot navigate your site or read your content will go to a competitor. The global spending power of people with disabilities is estimated at over $13 trillion annually (Return on Disability Group). Even locally, you are leaving money on the table if your website excludes a significant portion of the population.
Consider this: accessibility does not only affect people with permanent disabilities. It also affects people with:
- Temporary impairments: a broken arm, an eye infection, a concussion
- Situational limitations: using a phone in bright sunlight, browsing in a loud environment, holding a baby with one arm
- Age-related changes: declining vision, reduced motor control, slower processing speed
When you design for accessibility, you improve the experience for everyone.
Better SEO
Many accessibility best practices overlap directly with SEO:
- Proper heading structure helps both screen readers and search engines
- Alt text on images helps both visually impaired users and Google Image search
- Semantic HTML helps both assistive technology and crawlers
- Fast load times benefit everyone
- Transcripts for videos provide additional indexable content
- Descriptive link text helps both screen reader users and search engines understand context
Google has explicitly stated that accessible websites tend to rank better because they follow good technical practices.
Legal protection
The legal landscape for web accessibility is expanding rapidly:
India: The Rights of Persons with Disabilities Act (2016) includes provisions for accessible information and communication technology. Government websites are required to meet accessibility standards, and the expectation is gradually extending to private businesses.
United States: Over 4,600 web accessibility lawsuits were filed in 2023 alone (UsableNet report), a figure that has grown every year. The Americans with Disabilities Act (ADA) has been interpreted by courts to apply to websites.
European Union: The European Accessibility Act (EAA) takes full effect in 2025, requiring websites and mobile apps of businesses selling to EU customers to meet accessibility standards.
While small businesses in India are less likely to be targeted by lawsuits today, building accessibly from the start is far cheaper than retrofitting later. And the regulatory trajectory is clearly toward stricter enforcement globally.
Better user experience for everyone
Accessible websites are easier to use for everyone:
- Good colour contrast helps users in bright sunlight, not just those with low vision
- Keyboard navigation helps power users, not just those who cannot use a mouse
- Clear heading structure helps skimmers, not just screen reader users
- Large tap targets on mobile help everyone, not just those with motor impairments
- Readable text sizes reduce eye strain for all visitors
- Clear error messages help everyone fill out forms correctly
The WCAG standard explained
The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, published by the World Wide Web Consortium (W3C). WCAG defines three conformance levels:
- Level A: The bare minimum. Addresses the most critical accessibility barriers.
- Level AA: The widely accepted standard. What most laws and regulations reference. This is what you should aim for.
- Level AAA: The highest level. Includes requirements that are difficult to meet for all content types.
WCAG is organized around four principles (POUR):
- Perceivable: Information must be presentable in ways users can perceive (see, hear, or touch)
- Operable: Interface components must be operable by all users (keyboard, mouse, touch, voice)
- Understandable: Information and UI operation must be understandable
- Robust: Content must be robust enough to work with current and future assistive technologies
The essentials: what to implement
1. Sufficient colour contrast
Text must have enough contrast against its background to be readable. The WCAG AA standard requires:
- Normal text (under 18px or under 14px bold): contrast ratio of at least 4.5:1
- Large text (18px+ or 14px+ bold): contrast ratio of at least 3:1
- UI components and graphical objects: contrast ratio of at least 3:1
Common violations:
- Light grey text on white backgrounds (grey #999 on white #fff = 2.85:1, fails)
- Coloured text on coloured backgrounds without testing
- Placeholder text in forms that is nearly invisible
- Disabled button text that is unreadable
How to check: Use a contrast checker tool like WebAIM's Contrast Checker (webaim.org/resources/contrastchecker). Enter your text color and background color, and it tells you if you pass. For more on choosing accessible colors, see our color palette guide.
2. Alt text on images
Every meaningful image needs alt text, a short description of what the image shows. This is read aloud by screen readers and displayed when images fail to load.
Good alt text:
- "Plumber repairing a kitchen sink in a residential home"
- "Chocolate layer cake with fresh strawberries on a white plate"
- "Team photo of ABC Consulting staff in the Mumbai office"
- "Before and after comparison of a bathroom renovation"
Bad alt text:
- "image1.jpg" (file name, not a description)
- "photo" (meaningless)
- Empty alt text on meaningful images (screen readers skip it entirely)
- "Image of a person doing something in a place" (too vague)
Decorative images (backgrounds, spacers, purely visual elements) should have empty alt text (alt="") so screen readers skip them. Not every image needs alt text, only those that convey information or meaning.
3. ARIA labels guide
ARIA (Accessible Rich Internet Applications) attributes provide additional context to assistive technologies when standard HTML is not sufficient.
When to use ARIA
- Custom interactive elements that do not use standard HTML buttons, links, or form inputs
- Icons used as buttons that have no visible text label
- Complex widgets like tabs, accordions, carousels, and modal dialogs
- Live regions that update dynamically (like a notification area)
Common ARIA attributes
aria-label: Provides a text label for an element that has no visible text. For example, a close button that only shows an "X" can use aria-label="Close dialog" so screen readers announce its purpose. A phone icon link can use aria-label="Call us at 98765 43210" so users know what the link does.
aria-labelledby: References another element that serves as the label. For instance, a list of services can reference a nearby heading with aria-labelledby pointing to the heading's id. This tells screen readers that the heading describes the list.
aria-describedby: References an element that provides additional description. A password input can reference a hint paragraph that says "Password must be at least 8 characters" using aria-describedby, so screen reader users hear the requirements when they focus the input.
aria-expanded: Indicates whether a collapsible section is open or closed. A menu toggle button uses aria-expanded="false" when the menu is hidden and aria-expanded="true" when open. This tells screen reader users the current state of the element.
The first rule of ARIA: Do not use ARIA if you can use a standard HTML element instead. A real button element is always better than a div with role="button". Native HTML elements have built-in accessibility that ARIA attempts to replicate.
4. Keyboard navigation
Everything that can be done with a mouse should be doable with a keyboard. This is critical for users who cannot use a mouse (motor impairments, some visual impairments) and for power users who prefer keyboard navigation.
Requirements:
- All interactive elements (links, buttons, form fields) must be reachable with the Tab key
- The currently focused element must have a visible focus indicator (focus ring)
- Never remove the focus outline (outline: none in CSS) without providing a clear alternative
- Dropdown menus and modals must be keyboard-operable
- The Escape key should close modals and dropdowns
- Focus should be trapped inside modals (tabbing should cycle within the modal, not escape behind it)
- After a modal is closed, focus should return to the element that opened it
Testing method: Unplug your mouse (or trackpad) and try to navigate your entire website using only the keyboard. Can you reach every link, button, and form field? Can you see where you are at all times? Can you complete every important action?
5. Proper heading hierarchy
Headings (H1-H6) create an outline of your page. Screen reader users navigate by jumping between headings, similar to scanning a table of contents.
Rules:
- One H1 per page (your main page title)
- Do not skip levels (do not go from H1 to H3 without an H2)
- Use headings for structure, not for styling (do not use H3 just because you like the font size; use CSS instead)
- Headings should make sense when read in sequence without the surrounding content
6. Form accessibility
Forms are where many accessibility failures happen:
- Every input needs a visible label (not just placeholder text, because placeholders disappear when the user starts typing)
- Labels must be programmatically associated with inputs (using the "for" attribute or wrapping)
- Error messages should be descriptive ("Password must be at least 8 characters" not just "Invalid input")
- Required fields should be marked clearly (not just with a red asterisk; use text like "Required")
- Form validation errors should be announced to screen readers (using aria-live or by moving focus to the error)
- Group related fields with fieldset and legend elements
7. Readable text
- Minimum 16px font size for body text
- Line height of at least 1.5 for body text
- Line length of 50-75 characters (use max-width on text containers)
- Avoid justified text (creates uneven spacing that harms readability)
- Avoid all-caps for passages longer than a few words (significantly harder to read)
- Allow users to zoom to 200% without loss of content or functionality
For detailed typography guidance, see our complete fonts guide.
Testing tools walkthrough
You can audit most accessibility issues yourself using free tools:
Automated testing
Lighthouse (built into Chrome):
- Open DevTools (F12), go to Lighthouse tab, check "Accessibility," run audit
- Catches about 30-40% of accessibility issues automatically
- Good for contrast issues, missing alt text, heading hierarchy, and basic ARIA
axe DevTools (browser extension):
- Free extension for Chrome and Firefox
- More comprehensive than Lighthouse for accessibility specifically
- Provides clear explanations of each issue and how to fix it
WAVE (web accessibility evaluation tool):
- Visit wave.webaim.org or install the browser extension
- Visual overlay showing accessibility issues directly on your page
- Particularly good for identifying contrast issues and structural problems
Manual testing checklist
Automated tools only catch about 30-40% of accessibility issues. Manual testing catches the rest:
- [ ] Keyboard navigation: Tab through the entire site. Can you reach everything? Can you see focus?
- [ ] Zoom test: Zoom to 200%. Does everything still work and remain readable?
- [ ] Screen reader test: Use VoiceOver (Mac), NVDA (Windows), or TalkBack (Android) to navigate your site. Does it make sense when read aloud?
- [ ] Heading structure: Install the HeadingsMap browser extension. Does the hierarchy make sense?
- [ ] Colour contrast: Run WAVE or axe. Are there any contrast failures?
- [ ] Images: Do all meaningful images have descriptive alt text?
- [ ] Forms: Can you complete all forms using only a keyboard? Are errors announced?
- [ ] Links: Do all links have descriptive text? (No "click here" links)
- [ ] Media: Do videos have captions? Do audio files have transcripts?
The ROI of accessibility
Accessibility is not just an expense. It delivers measurable business value:
Increased market reach: Accessible websites serve a larger audience. The 16% of the global population with disabilities represents trillions in purchasing power.
Better SEO rankings: The overlap between accessibility and SEO best practices means accessible sites tend to rank higher. Proper headings, alt text, semantic HTML, and fast load times all benefit both.
Lower legal risk: Proactive accessibility compliance costs a fraction of reactive remediation after a lawsuit or complaint.
Improved conversion rates: Accessible websites are more usable for everyone. Clear navigation, readable text, good contrast, and obvious CTAs improve conversion rates across the board. A study by Nucleus Research found that accessible websites generate 4x more revenue per visitor than inaccessible ones.
Positive brand perception: Companies that demonstrate commitment to accessibility are perceived more positively. It signals that you care about all your customers, not just the majority.
Accessibility checklist for small business websites
Use this as a practical checklist when building or auditing your website:
Essential (Level A)
- [ ] All images have alt text (or empty alt for decorative images)
- [ ] All form inputs have labels
- [ ] All videos have captions
- [ ] No content flashes more than 3 times per second
- [ ] All pages have a descriptive title
- [ ] Link text is descriptive (not "click here")
- [ ] Colour is not the only way information is conveyed
- [ ] All functionality is available via keyboard
Important (Level AA: the standard to aim for)
- [ ] Text contrast ratio is at least 4.5:1 (3:1 for large text)
- [ ] Text can be resized to 200% without loss of content
- [ ] Multiple ways to find pages (navigation, search, sitemap)
- [ ] Consistent navigation across pages
- [ ] Error suggestions are provided for form inputs
- [ ] Headings and labels describe the topic or purpose
- [ ] Focus indicator is visible on all interactive elements
- [ ] Content does not require horizontal scrolling at 320px width
How Web Waala builds for accessibility
Every website we generate includes:
- WCAG-compliant colour contrast (checked automatically during palette selection)
- Proper semantic HTML with correct heading hierarchy
- Alt text on all images
- Keyboard-navigable layouts
- Responsive design tested across devices
- Readable font sizes and line heights
- ARIA labels where needed
- Properly associated form labels
We handle accessibility at the code level so you do not have to think about it. The result is a website that works for everyone, which is what a good website should be.
Accessibility is one part of a larger picture. Learn about choosing accessible color palettes, what Lighthouse scores mean, and SEO fundamentals that overlap with accessibility. Get started with Web Waala for free.
