Web Accessibility Standards

In the previous episode, we discussed the importance of web accessibility and why it matters for everyone. In this episode, we’ll dive deeper into the web accessibility guidelines you should follow to make your website accessible and inclusive for all users, including those with disabilities.

The Web Content Accessibility Guidelines (WCAG) provide the foundation for creating accessible web content. These guidelines are widely recognized and offer concrete recommendations to improve accessibility for people with visual, auditory, cognitive, and motor impairments.

What Are the WCAG?

The Web Content Accessibility Guidelines (WCAG) are globally recognized standards for web accessibility. They are organized into three levels of compliance:

Level A: Minimum accessibility requirements.
Level AA: Most common standard for legal compliance.
Level AAA: The highest and most rigorous standard.

Let’s break down some of the most important WCAG principles and how you can apply them.

1. Provide Text Alternatives for Non-Text Content

Text alternatives, such as alt text, allow users with visual impairments to understand the purpose of non-text content through screen readers.

<img src="/dog.jpg" alt="A brown dog playing in the park." />

Use descriptive alt text for images.
For decorative images, use alt="" to inform assistive technologies to ignore them.
Provide detailed descriptions for complex visuals like charts or infographics.

For example:

<img
  src="/sales-chart.jpg"
  alt="Bar chart showing 2024 sales growth by region: North America leads with 50%."
/>

2. Ensure Adequate Contrast Between Text and Background

Sufficient contrast improves readability, especially for users with low vision or color blindness.

WCAG Contrast Standards

Normal text should have a contrast ratio of at least 4.5:1
Larget text (18pt or 14pt bold) should have a contrast ratio of at least 3:1

3. Provide Keyboard Accessibility

Websites should be navigable using just a keyboard. This is important for users with motor disabilities who may find it difficult to use a mouse. All interactive elements, such as forms, buttons, and links, should be accessible via keyboard shortcuts.

<div
  role="button"
  tabIndex={0}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      onClickHandler()
    }
  }}
  onClick={onClickHandler}
>
  Click Me
</div>

4. Create Clear and Consistent Navigation

Navigation is a key aspect of web accessibility. Ensure your website’s layout is consistent and that all interactive elements are easy to find and use. This helps users, especially those with cognitive disabilities, to understand the structure of the site and navigate with ease.

Managing Focus with ARIA

Focus management is vital for accessible modals, dialogs, and popups.

<div
  role="dialog"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
  aria-hidden={isOpen ? 'false' : 'true'}
>
  <h2 id="dialog-title">Subscribe to Our Newsletter</h2>
  <p id="dialog-description">Enter your email to receive updates.</p>
  <input type="email" placeholder="Your email" />
  <button type="button">Subscribe</button>
  <button type="button" aria-label="Close" onClick={closeModal}>
    ✖
  </button>
</div>

Example below shows a focus trapping in a modal dialog.
role="dialog" informs assistive technologies about the element's purpose.
aria-labelledby and aria-describedby connect the modal's title and description.
Focus should be programmatically trapped inside the modal until it is closed.

ARIA Live Regions for Dynamic Content

When your application updates content dynamically (e.g., loading spinners, toast notifications), ARIA live regions can notify assistive technologies.

<div aria-live="polite" aria-atomic="true">
  {isLoading && <p>Loading, please wait...</p>}
</div>

Example aboove shows a announcing a loading state.
aria-live="polite" ensures the message is announced without interrupting the current context.
aria-atomic="true" ensures the entire text is read when updated.

5. Make Forms Accessible

Forms are crucial for many websites, but they can often be a source of frustration for users with disabilities. Ensure that all form fields have appropriate labels, error messages, and instructions. This helps users understand how to complete the form correctly.

<form>
  <label htmlFor="username">Username</label>
  <input type="text" id="username" />

  <label htmlFor="password">Password</label>
  <input type="password" id="password" />

  <button type="submit">Login</button>
</form>

Example above shows a form with associated labels.
The label element is explicitly associated with the input using htmlFor.
Avoid using placeholder text as a substitute for labels.
Use inline error messages to indicate missing or incorrect information.

6. Provide Accessible Multimedia

Multimedia content, such as videos and audio, should include captions, transcripts, or sign language interpretation for users who are deaf or hard of hearing. This makes sure that multimedia content is accessible to a broader audience.

Use captions for videos.
Provide a text transcript for audio content, such as podcasts or interviews.

7. Design for Cognitive Accessibility

Consider the needs of users with cognitive disabilities, such as those with learning disabilities or memory impairments. You can enhance accessibility by simplifying content and design, avoiding jargon, and ensuring a logical flow of information.

Use simple, straightforward language.
Break down complex information into smaller chunks.
Provide visual cues to help users navigate the content.

Conclusion

By following these web accessibility guidelines, you’ll be able to create a more inclusive and user-friendly website for everyone. Accessibility isn't just about compliance—it’s about ensuring all users, regardless of ability, can access and enjoy your content.

In the next episode, we'll explore some useful tools that can help you test and improve your website’s accessibility.