Building an accessible website means following the Web Content Accessibility Guidelines (WCAG) to ensure people with disabilities — visual, auditory, motor, and cognitive — can perceive, navigate, and interact with your content effectively. WCAG compliance involves proper semantic HTML, sufficient colour contrast, keyboard navigation support, screen reader compatibility, and alternative text for non-text content.
What Is WCAG and Why Does Accessibility Matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the World Wide Web Consortium (W3C). The current version is WCAG 2.2, with three conformance levels:
- Level A: Minimum accessibility requirements
- Level AA: The standard most organisations target and most regulations reference
- Level AAA: Highest level, not always achievable for all content types
In India, the Rights of Persons with Disabilities Act (2016) mandates accessible digital content for government and government-funded organisations. While private businesses are not yet legally required to comply, accessibility expands your audience, improves SEO, and demonstrates social responsibility. Moreover, accessible design often results in better usability for all users.
What Are the Four Principles of WCAG?
WCAG is organised around four principles, known by the acronym POUR:
| Principle | Meaning | Key Requirements |
|---|---|---|
| Perceivable | Users must be able to perceive the content | Alt text, captions, sufficient contrast, text alternatives |
| Operable | Users must be able to operate the interface | Keyboard navigation, sufficient time, no seizure triggers |
| Understandable | Content and interface must be understandable | Readable text, predictable navigation, input assistance |
| Robust | Content must work with assistive technologies | Valid HTML, ARIA attributes, compatibility testing |
How Do You Make Content Perceivable?
- Alternative text: Every meaningful image needs descriptive alt text. Decorative images should use empty alt attributes (alt=””) so screen readers skip them.
- Colour contrast: Text must meet minimum contrast ratios — 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular). Use tools like the WebAIM Contrast Checker.
- Do not rely on colour alone: Use icons, text labels, or patterns in addition to colour to convey information (for example, error states should not depend solely on red colour).
- Captions and transcripts: Video content needs synchronised captions. Audio content needs transcripts.
- Responsive text: Users must be able to resize text up to 200% without loss of content or functionality.
How Do You Make a Website Operable?
- Keyboard navigation: Every interactive element must be reachable and usable with keyboard alone (Tab, Enter, Space, arrow keys). Test by unplugging your mouse.
- Focus indicators: Visible focus styles on interactive elements so keyboard users know where they are. Never remove outline styles without providing a visible alternative.
- Skip navigation: Provide a “Skip to main content” link at the top of each page so keyboard users do not have to tab through the entire navigation on every page.
- No keyboard traps: Users must be able to navigate away from any component using standard keyboard controls.
- Sufficient time: If content has time limits (auto-advancing carousels, session timeouts), users must be able to pause, extend, or disable the timer.
- No seizure triggers: Avoid content that flashes more than three times per second.
How Do You Make Content Understandable?
- Language declaration: Set the lang attribute on the HTML element (lang=”en” for English, lang=”hi” for Hindi). Screen readers use this to select the correct pronunciation.
- Readable content: Use clear, simple language. Break content into short paragraphs with descriptive headings.
- Consistent navigation: Navigation should appear in the same location and order across all pages.
- Form labels and instructions: Every form field needs a visible label. Provide clear instructions for required formats (date format, phone number format).
- Error identification: Form errors must be clearly described in text, identify the field with the error, and suggest a correction where possible.
How Do You Ensure Robustness?
- Valid, semantic HTML: Use correct heading hierarchy (h1 through h6), lists for list content, buttons for actions, links for navigation. Do not use divs and spans for everything.
- ARIA attributes: Use ARIA (Accessible Rich Internet Applications) roles and properties to enhance accessibility of complex widgets. But follow the first rule of ARIA: do not use ARIA if a native HTML element already provides the functionality.
- Test with assistive technologies: Test with actual screen readers (NVDA on Windows is free, VoiceOver on Mac is built-in) and voice control software.
What Are Common Accessibility Mistakes on Indian Websites?
- Missing alt text on images (especially product images and decorative banners)
- Poor colour contrast, particularly with light grey text on white backgrounds
- Forms without proper labels (placeholder text is not a label)
- Auto-playing videos with no pause control
- PDF documents that are scanned images rather than accessible text
- Mobile menus that cannot be operated without touch gestures
- CAPTCHA without an accessible alternative
How Do You Test for WCAG Compliance?
Use a combination of automated and manual testing:
- Automated tools: axe DevTools, WAVE, Lighthouse (built into Chrome DevTools). These catch approximately 30% of accessibility issues.
- Keyboard testing: Navigate your entire site using only the keyboard. Can you reach every link, button, and form field?
- Screen reader testing: Use NVDA (free) or VoiceOver to experience your site as a blind user would.
- Colour contrast checking: WebAIM Contrast Checker or Colour Contrast Analyser for each text/background combination.
- User testing: If possible, include people with disabilities in your testing process.
Frequently Asked Questions
Is WCAG compliance legally required in India?
Currently, the RPwD Act (2016) mandates accessibility for government and government-funded entities. Private businesses are not explicitly required to comply, but this is evolving. Regardless of legal requirements, accessibility expands your market (India has over 26 million people with disabilities), improves SEO, and is simply the right thing to do.
Does WCAG compliance hurt website design?
No. Accessible design and attractive design are not mutually exclusive. Most WCAG requirements (contrast, structure, clear navigation) actually improve the experience for all users. The constraint of accessibility often leads to cleaner, more thoughtful design.
How long does it take to make an existing website WCAG compliant?
It depends on the site’s current state and size. A small business website (10-20 pages) typically takes a few weeks of focused work to reach Level AA compliance. Larger sites may require several months and ongoing maintenance. The key is to start with the highest-impact issues and improve incrementally.
Can WordPress sites be made accessible?
Yes. WordPress itself is designed with accessibility in mind. The main risks come from themes and plugins that do not follow accessibility standards. Choose themes that declare accessibility-ready status (Hello Elementor is relatively clean), test all plugins for keyboard and screen reader compatibility, and follow WCAG guidelines when creating content.
