Web Accessibility (WCAG) Guide [2026]

Why Accessibility Matters

Web accessibility is not a niche concern — it affects a massive and growing audience:

• 1.3 billion people worldwide have significant disabilities (WHO, 2023). In India, 2.68 crore people (2.21% of population) have disabilities according to the 2011 Census — the actual number is estimated to be 2-3x higher.
• Everyone benefits: Accessibility features help all users — captions help people in noisy environments, keyboard navigation helps power users, readable fonts help people on small screens, and clear contrast helps people in bright sunlight.
• Legal requirements: In India, the Rights of Persons with Disabilities Act 2016 mandates accessibility for government and government-funded websites. Globally, the EU Accessibility Act (2025) and ADA in the US have driven lawsuits against inaccessible websites — 4,600+ web accessibility lawsuits were filed in the US in 2023 alone.
• SEO benefits: Accessible websites have better HTML structure, meaningful headings, descriptive alt text, and proper semantic markup — all of which Google uses for ranking. Accessible sites consistently outperform inaccessible competitors in search.
• Larger market: An inaccessible website excludes 15-20% of potential customers. For an e-commerce store, that is 15-20% of revenue left on the table.

WCAG 2.2: The Standard

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, published by the W3C (World Wide Web Consortium). WCAG 2.2, released in 2023, is the current version.

Compliance levels:

• Level A: Minimum accessibility. Must-have for any website. Addresses the most severe barriers.
• Level AA: Standard compliance. The target for most websites and the level required by most laws. Addresses the most common barriers.
• Level AAA: Highest accessibility. Aspirational goal — not always achievable for all content types.

Target Level AA for your website — it covers the most impactful accessibility requirements without the extreme demands of AAA.

The Four WCAG Principles (POUR)

1. Perceivable

Users must be able to perceive the content — through sight, hearing, or touch.

• Alt text for images: Every image needs descriptive alt text. "Company team meeting in progress" — not "image1.jpg" or empty alt text. Decorative images use alt="" (empty alt) so screen readers skip them.
• Colour contrast: Text must have sufficient contrast against its background. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+). Test with tools like WebAIM Contrast Checker.
• Do not use colour alone: "Click the red button" fails if the user is colour-blind. Use colour + another indicator (icon, text label, underline for links).
• Captions and transcripts: Videos need captions. Audio content needs transcripts. Live video needs real-time captions.
• Responsive text: Text must be resizable up to 200% without loss of content or functionality. Do not use fixed pixel font sizes — use rem/em units.

2. Operable

Users must be able to navigate and interact with the website.

• Keyboard navigation: Every interactive element (links, buttons, forms, menus) must be operable with keyboard only (Tab, Enter, Escape, Arrow keys). Test by unplugging your mouse and navigating your site with Tab key. If you get stuck anywhere, keyboard users are stuck too.
• Focus indicators: When an element is focused via keyboard, it must have a visible focus ring (outline). Never add outline: none to focusable elements without providing an alternative focus indicator.
• Skip navigation: Add a "Skip to main content" link at the top of every page. This lets keyboard and screen reader users skip repetitive navigation menus.
• Touch targets: Buttons and links must have a minimum touch target of 44x44 CSS pixels (WCAG 2.2 requirement). Small targets are difficult for users with motor impairments.
• No time limits: If content has a time limit (session timeout, auto-advancing carousel), users must be able to extend or disable it. Alternatively, warn the user before the timeout.

3. Understandable

Content and interface must be understandable to users.

• Language attribute: Set the page language: <html lang="en">. Screen readers use this to select the correct pronunciation engine.
• Clear labels: Every form input needs a visible label (not just a placeholder). Placeholders disappear when users start typing, leaving them with no context. Use <label> elements properly associated with inputs.
• Error messages: When a form submission fails, clearly identify which fields have errors, what the error is, and how to fix it. "Please enter a valid email address" — not just a red border around the field.
• Consistent navigation: Navigation menus, headers, and footers should appear in the same location and order on every page. Consistency helps users predict where to find things.
• Readable content: Write at an 8th-grade reading level for public-facing content. Use short sentences, simple words, and break up text with headings and lists.

4. Robust

Content must work with current and future technologies, including assistive devices.

• Semantic HTML: Use proper HTML elements: <nav> for navigation, <main> for main content, <button> for buttons (not <div onclick>), <h1>-<h6> for headings in order. Screen readers rely on these elements to understand page structure.
• ARIA attributes: When native HTML cannot convey the meaning (custom components, dynamic content), use ARIA (Accessible Rich Internet Applications) attributes. aria-label for elements without visible text, aria-expanded for collapsible sections, role for custom widgets.
• Valid HTML: Broken HTML (unclosed tags, duplicate IDs) can confuse assistive technology. Validate your HTML regularly.

Most Common Accessibility Issues

Issue	Prevalence	Fix	Effort
Missing alt text	Found on 55% of websites	Add descriptive alt text to all images	Low
Poor colour contrast	Found on 83% of websites	Ensure 4.5:1 ratio for text	Low
Missing form labels	Found on 46% of websites	Associate <label> with every input	Low
No keyboard navigation	Found on 65% of websites	Ensure all interactive elements are focusable	Medium
Empty links/buttons	Found on 50% of websites	Add text or aria-label to all links/buttons	Low
Missing page language	Found on 18% of websites	Add lang attribute to <html>	1 minute
No skip navigation link	Found on 80% of websites	Add "Skip to content" link	Low

Data from WebAIM Million annual study (2025) — analysis of the top 1 million websites.

Testing Tools

Tool	Type	Cost	Best For
axe DevTools	Browser extension	Free	Quick automated scanning in Chrome DevTools
WAVE	Web tool + extension	Free	Visual overlay showing accessibility issues
Lighthouse	Chrome DevTools	Free	Accessibility score as part of performance audit
Screen reader testing	Manual	Free	VoiceOver (Mac), NVDA (Windows), TalkBack (Android)
Keyboard testing	Manual	Free	Tab through the entire site — can you reach everything?
Pa11y	CLI tool	Free	Automated testing in CI/CD pipeline

Testing approach: Start with automated tools (axe, WAVE, Lighthouse) to catch the obvious issues — they find 30-50% of problems. Then test manually with keyboard navigation and a screen reader to catch the remaining 50-70% that automated tools miss.

Quick Wins: Fix These First

1. Add alt text to all images (1-2 hours for a typical website)
2. Fix colour contrast — use WebAIM Contrast Checker on your brand colours (30 minutes)
3. Add labels to all form inputs (30-60 minutes)
4. Add lang attribute to your HTML element (1 minute)
5. Add a "Skip to content" link (15 minutes)
6. Ensure all links and buttons have descriptive text — no "click here" (1 hour)
7. Test keyboard navigation — fix any traps or missing focus indicators (1-2 hours)

These seven fixes address 80% of the most common accessibility issues and can be completed in a single day.

Common Mistakes to Avoid

• "We will add accessibility later": Retrofitting accessibility is 5-10x more expensive than building it in. Include accessibility in your design and development process from Day 1.
• Relying only on automated testing: Automated tools catch 30-50% of issues. The rest requires manual testing with keyboard and screen readers.
• Using ARIA incorrectly: Bad ARIA is worse than no ARIA. The first rule of ARIA: if you can use a native HTML element (<button>, <nav>, <input>), use it instead of ARIA.
• Hiding content instead of fixing it: Adding aria-hidden="true" to problematic elements hides them from screen readers but does not fix the underlying issue.
• Overlay widgets: Accessibility overlay tools (that add a widget to "fix" accessibility) do not work. They create a worse experience for screen reader users and do not achieve WCAG compliance. Build accessibility into the code.

How JK Tech Hub Builds Accessible Websites

JK Tech Hub includes accessibility in every project:

• Semantic HTML structure with proper heading hierarchy, landmarks, and ARIA attributes
• WCAG AA colour contrast verified during design phase
• Keyboard navigation testing on every interactive component
• Alt text for all images, labels for all forms
• Lighthouse accessibility score of 90+ on all pages
• Accessibility audit available as a standalone service for existing websites

Get a free accessibility audit or estimate your project.

Related Resources

• How to Build a Website for Business
• Website Speed Optimisation Guide
• Website Development Services
• Web Application Development
• Development Cost Calculator

Sources & References

• W3C — Web Content Accessibility Guidelines (WCAG) 2.2
• WebAIM — The WebAIM Million (Annual Accessibility Study)
• WHO — Disability and Health (Global Statistics)

Is your website accessible? Contact JK Tech Hub for a free accessibility audit. We build WCAG-compliant websites — 150+ projects, 4.9/5 rating, Rajkot, Gujarat. Get an instant estimate.