āæ Web Accessibility (a11y) ā Make Your Website Usable for Everyone
Accessibility (a11y) ensures that everyone, including people with disabilities, can perceive, understand, navigate, and interact with your website or web app.
ā It’s not just ethical ā itās required by law in many regions (e.g., ADA, WCAG, Section 508).
š Why Accessibility Matters
1 in 6 people worldwide live with a disability
Improves SEO, usability, and inclusivity
Required for compliance: WCAG 2.1, ADA, EN 301 549
Enhances UX for everyone, including mobile and voice users
ā 7 Core Accessibility Principles (WCAG 2.1)
| Principle | Description |
|---|---|
| Perceivable | Users must be able to see or hear your content |
| Operable | UI must be navigable via keyboard, not just mouse |
| Understandable | Content must be clear and readable |
| Robust | Must work with assistive tech (e.g., screen readers) |
ā”ļø Known as the POUR model.
š ļø Accessibility Best Practices
1. Semantic HTML
Use proper tags for structure:
<header>, <nav>, <main>, <section>, <footer>, <article>
2. Text Alternatives
Use
altattributes on all<img>elementsAvoid using images as text
<img src="logo.png" alt="WebGyan logo" />
3. Keyboard Navigation
Ensure all functionality is usable with
Tab,Enter,Space,EscAvoid
div/spanclick handlers without keyboard support
4. Forms & Labels
Label all form inputs using
<label for="...">Include helper text, ARIA descriptions where necessary
5. Color Contrast
Use tools like contrast-ratio.com
WCAG recommends 4.5:1 minimum contrast for text
6. Focus Management
Always show a visible focus ring for keyboard users
Donāt disable focus outlines without alternatives
7. ARIA (Accessible Rich Internet Applications)
Use ARIA only when native HTML doesnāt work.
<div role="dialog" aria-labelledby="modal-title" aria-hidden="true">
š§Ŗ Accessibility Testing Tools
| Tool | Use |
|---|---|
| š§© axe DevTools | Chrome/Firefox extension for testing |
| āæ Lighthouse a11y audit | Built into Chrome DevTools |
| š„ļø Screen Readers | NVDA (Windows), VoiceOver (macOS), JAWS |
| š WAVE Tool | Online a11y scanner |
š§ eslint-plugin-jsx-a11y | ESLint plugin for React projects |
š§ Framework Tips
React
Use react-aria
Avoid divs as buttons (
<button>handles keyboard focus)
Tailwind CSS
Tailwind doesnāt break accessibility, but you must implement it yourself (e.g., focus rings, contrast)
Next.js / Vite
Run Lighthouse audits in local dev and CI
Use semantic layouts and alt attributes
ā Simple Accessibility Checklist
| ā | Item |
|---|---|
| ā | All images have alt attributes |
| ā | All form inputs have associated <label>s |
| ā | Page is navigable using keyboard |
| ā | Sufficient color contrast |
| ā | Headings follow a logical hierarchy |
| ā | Links describe purpose (not just āclick hereā) |
| ā | ARIA used only when necessary |

































































































