āæ 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
alt
attributes 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
,Esc
Avoid
div
/span
click 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 |