What is Web Accessibility?

Web accessibility (often abbreviated as a11y) means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. This includes:

• Visual impairments (blindness, low vision, color blindness)
• Hearing impairments
• Motor impairments
• Cognitive impairments
• Temporary disabilities (broken arm, lost glasses)

Why Accessibility Matters

Accessibility benefits everyone:

• Legal compliance: WCAG compliance is required by law in many countries
• Broader audience: Over 1 billion people worldwide have disabilities
• Better SEO: Accessible sites rank better in search engines
• Improved UX: Accessible design is better design for everyone
• Mobile users: Many accessibility practices improve mobile experience

WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) provide standards for web accessibility. The guidelines are organized around four principles (POUR):

1. Perceivable

Information must be presentable to users in ways they can perceive.

• Provide text alternatives for images
• Provide captions for videos
• Use sufficient color contrast
• Make content readable and understandable

2. Operable

Interface components must be operable by all users.

• Keyboard accessible
• No seizure-inducing content
• Enough time to read and use content
• Clear navigation

3. Understandable

Information and UI operation must be understandable.

• Readable text
• Predictable functionality
• Input assistance (error identification)

4. Robust

Content must be robust enough for assistive technologies.

• Valid HTML
• Proper use of ARIA attributes
• Compatible with assistive technologies

Essential Accessibility Practices

1. Semantic HTML

Use proper HTML elements for their intended purpose:

❌ Bad
Click me

✅ Good
Click me

❌ Bad
...

✅ Good
...

❌ Bad
...

✅ Good

2. Alt Text for Images

Always provide meaningful alt text:

❌ Bad


✅ Good


❌ Decorative images

3. Proper Heading Structure

Use heading levels in order (h1 → h2 → h3):

✅ Good structure
Main Title
  
Section Title
    
Subsection Title
  
Another Section

❌ Bad: Skipping levels
Main Title
  
Subsection (skipped h2)

4. Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

// Ensure focusable elements have visible focus
button:focus,
a:focus,
input:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

// Skip links for keyboard users
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

5. ARIA Attributes

Use ARIA when HTML isn't enough:

// Button with loading state

    


// Modal dialog

    
Confirm Action
    ...


// Form validation

Invalid email address

6. Color Contrast

Ensure sufficient color contrast (WCAG AA: 4.5:1 for text):

/* ✅ Good contrast */
.text {
    color: #000000; /* Black */
    background: #ffffff; /* White */
    /* Contrast ratio: 21:1 */
}

/* ❌ Poor contrast */
.text {
    color: #cccccc; /* Light gray */
    background: #ffffff; /* White */
    /* Contrast ratio: 1.6:1 - Fails WCAG */
}

7. Form Accessibility

Make forms accessible:

✅ Good form
Email Address

We'll never share your email

❌ Bad form

8. Focus Management

Manage focus for dynamic content:

// When opening a modal
function openModal() {
    modal.show();
    // Move focus to modal
    modal.querySelector('button').focus();
    // Trap focus within modal
    trapFocus(modal);
}

// When closing modal
function closeModal() {
    modal.hide();
    // Return focus to trigger button
    triggerButton.focus();
}

9. Screen Reader Announcements

Announce dynamic content changes:

// Live region for announcements

    


// Or use alert role

    Error: Please check your input

10. Testing for Accessibility

Test your site with various tools and methods:

Automated Testing Tools

• axe DevTools: Browser extension for accessibility testing
• WAVE: Web accessibility evaluation tool
• Lighthouse: Built into Chrome DevTools
• Pa11y: Command-line accessibility testing

Manual Testing

• Keyboard-only navigation
• Screen reader testing (NVDA, JAWS, VoiceOver)
• Color contrast checkers
• Zoom testing (200% zoom)

Common Accessibility Mistakes

1. Missing alt text: Images without descriptions
2. Poor color contrast: Text that's hard to read
3. Keyboard traps: Users can't navigate with keyboard
4. Missing labels: Form inputs without labels
5. Inaccessible modals: Focus not managed properly
6. Missing skip links: No way to skip navigation
7. Auto-playing media: Videos/audio without controls
8. Poor heading structure: Skipping heading levels

Accessibility Checklist

• ✓ All images have meaningful alt text
• ✓ Proper heading hierarchy (h1 → h2 → h3)
• ✓ All interactive elements are keyboard accessible
• ✓ Forms have proper labels and error messages
• ✓ Sufficient color contrast (WCAG AA minimum)
• ✓ Focus indicators are visible
• ✓ ARIA attributes used appropriately
• ✓ Page is navigable with screen readers
• ✓ Content is readable at 200% zoom
• ✓ No keyboard traps

Resources

• WCAG Quick Reference
• WebAIM
• The A11y Project
• ARIA Authoring Practices Guide

Conclusion

Accessibility is not an afterthought—it should be integrated into every stage of the design and development process. By following WCAG guidelines and testing with real users and assistive technologies, we can create web experiences that are truly inclusive and usable by everyone.