Web Accessibility Guide

Web Accessibility Guide

Making the web accessible isn’t just good practice—it’s essential. This guide covers practical implementation tips for WCAG compliance and creating inclusive digital experiences.

Semantic HTML

Use the right elements for the job:

<!-- Bad -->
<div onclick="submit()">Submit</div>

<!-- Good -->
<button type="submit">Submit</button>

ARIA When Needed

Enhance semantics when HTML falls short:

<div role="alert" aria-live="polite">Your changes have been saved.</div>

<button aria-expanded="false" aria-controls="menu">Menu</button>

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

element.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    handleActivation();
  }
});

Focus Management

Make focus visible and logical:

:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
}

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

Color Contrast

Maintain WCAG AA standards (4.5:1 for normal text):

/* Good contrast */
.text {
  color: #333;
  background: #fff;
}

/* Check contrast ratios with tools */

Alt Text Best Practices

Write meaningful alternative text:

<!-- Bad -->
<img src="photo.jpg" alt="photo" />

<!-- Good -->
<img
  src="sunset.jpg"
  alt="Golden sunset over mountain range with purple clouds"
/>

<!-- Decorative -->
<img src="decorative.jpg" alt="" role="presentation" />

Form Accessibility

Label all form inputs:

<label for="email">Email Address</label>
<input id="email" type="email" required aria-describedby="email-hint" />
<span id="email-hint">We'll never share your email.</span>

Screen Reader Testing

Test with actual screen readers:

• NVDA (Windows, free)
• JAWS (Windows, commercial)
• VoiceOver (macOS/iOS, built-in)

Accessibility Tree

Understand what assistive technology sees:

// Check accessibility properties
const button = document.querySelector("button");
console.log(button.getAttribute("aria-label"));
console.log(button.getAttribute("role"));

Conclusion

Accessibility is not a feature—it’s a requirement. By building with accessibility in mind from the start, we create better experiences for everyone.

---