Accessibility and ARIA

50 min

Web accessibility ensures that websites and applications are usable by everyone, including people with disabilities. Accessibility is not optional—it's a legal requirement in many jurisdictions (ADA, Section 508, EN 301 549) and a moral imperative that makes the web inclusive. Accessible websites benefit all users by providing clearer structure, better navigation, keyboard support, and more robust functionality. Accessibility should be considered from the start of development, not added as an afterthought.

ARIA (Accessible Rich Internet Applications) is a set of attributes that supplement HTML when semantic elements aren't sufficient to convey meaning to assistive technologies. ARIA roles describe what elements do (`role="button"`, `role="navigation"`), ARIA states and properties provide additional information (`aria-expanded="true"`, `aria-hidden="true"`), and ARIA labels and descriptions offer text alternatives (`aria-label`, `aria-labelledby`, `aria-describedby`). However, prefer semantic HTML over ARIA when possible—semantic HTML is simpler, more reliable, and works without JavaScript.

Common ARIA patterns include landmarks (`role="banner"`, `role="navigation"`, `role="main"`, `role="complementary"`, `role="contentinfo"`), live regions for dynamic content (`aria-live="polite"` or `"assertive"`), form labels and descriptions, and widget roles for custom interactive elements. ARIA should enhance, not replace, semantic HTML. Use ARIA when you need to communicate information that semantic HTML can't express, such as complex widget states or dynamic content updates.

Semantic HTML elements naturally provide good accessibility. Elements like `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, and `<footer>` create landmarks that screen readers can navigate. Form elements with proper `<label>` associations, heading hierarchy (H1-H6), and alt text for images provide accessibility by default. Using semantic HTML reduces the need for ARIA and creates more maintainable, accessible code. Always prefer semantic HTML first, then add ARIA only when necessary.

Keyboard navigation is essential for accessibility. All interactive elements must be keyboard accessible—users should be able to tab through elements in a logical order, see clear focus indicators, and activate elements using keyboard shortcuts. Ensure sufficient color contrast (WCAG AA requires 4.5:1 for normal text, 3:1 for large text), never rely solely on color to convey information, and provide text alternatives for visual information. Focus management is crucial for single-page applications and dynamic content.

Testing accessibility is essential. Test with screen readers (NVDA, JAWS, VoiceOver), navigate using only keyboard, check color contrast with tools, validate HTML structure, test with real users when possible, and use automated accessibility testing tools. Accessibility is an ongoing process, not a one-time check. Following WCAG (Web Content Accessibility Guidelines) 2.1 Level AA ensures your content meets international standards. Accessible websites are better websites for everyone—they're more usable, maintainable, and reach a wider audience.

Key Concepts

Accessibility ensures websites are usable by people with disabilities.
ARIA attributes supplement HTML when semantic elements aren't sufficient.
Semantic HTML elements naturally provide good accessibility.
Keyboard navigation must work for all interactive elements.
Testing with screen readers and keyboard navigation is essential.

Learning Objectives

Master

Understanding web accessibility principles and WCAG guidelines
Using ARIA attributes to enhance accessibility
Creating keyboard-accessible interfaces
Testing accessibility with screen readers and tools

Develop

Inclusive design thinking and accessibility awareness
Understanding assistive technologies and user needs
Creating websites usable by everyone

Tips

Prefer semantic HTML over ARIA when possible.
Test your site using only keyboard navigation.
Use ARIA to enhance, not replace, semantic HTML.
Test with screen readers to understand how your site is experienced.

Common Pitfalls

Using ARIA when semantic HTML would be sufficient.
Creating keyboard traps or missing focus indicators.
Relying solely on color to convey information.
Not testing with assistive technologies, missing accessibility issues.

Summary

Accessibility ensures websites are usable by everyone.
ARIA supplements HTML when semantic elements aren't sufficient.
Semantic HTML naturally provides good accessibility.
Keyboard navigation must work for all interactive elements.
Testing with assistive technologies is essential for accessibility.

Exercise

Create an accessible form with proper ARIA labels and semantic markup.

<form role="form" aria-labelledby="form-title">
  <h2 id="form-title">Contact Information</h2>
  
  <div role="group" aria-labelledby="name-group">
    <label id="name-group" for="first-name">First Name:</label>
    <input type="text" id="first-name" name="firstName" 
           aria-required="true" aria-describedby="name-help">
    <div id="name-help" role="tooltip">Enter your first name</div>
  </div>
  
  <div role="group" aria-labelledby="email-group">
    <label id="email-group" for="email">Email:</label>
    <input type="email" id="email" name="email" 
           aria-required="true" aria-describedby="email-help">
    <div id="email-help" role="tooltip">Enter a valid email address</div>
  </div>
  
  <button type="submit" aria-label="Submit contact form">Submit</button>
</form>

Accessibility and ARIA