Skip to Content
DocsDeveloper GuideAccessibility

Accessibility

Making your WebF application accessible ensures that all users, including those with disabilities, can use your app effectively.

Use Semantic HTML

Use appropriate HTML elements that convey meaning:

// ✅ Good - semantic elements
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
 
// ❌ Bad - div soup
<div>
  <div onClick={goHome}>Home</div>
  <div onClick={goAbout}>About</div>
</div>

Add ARIA Attributes

Use ARIA attributes to enhance accessibility when semantic HTML isn’t enough:

<button
  aria-label="Close dialog"
  aria-expanded={isOpen}
  onClick={handleClose}
>
  <CloseIcon />
</button>
 
<div
  role="alert"
  aria-live="polite"
>
  Your changes have been saved
</div>

Provide Text Alternatives

Always provide text alternatives for non-text content:

// Images
<img src="logo.png" alt="Company Logo" />
 
// Icon buttons
<button aria-label="Delete item">
  <TrashIcon aria-hidden="true" />
</button>
 
// Complex graphics
<svg role="img" aria-labelledby="chart-title">
  <title id="chart-title">Sales data for 2024</title>
  {/* chart content */}
</svg>

Color and Contrast

Ensure sufficient color contrast (WCAG AA: 4.5:1 for normal text, 3:1 for large text):

/* ✅ Good - sufficient contrast */
.text {
  color: #000;
  background-color: #fff;
}
 
/* ❌ Bad - insufficient contrast */
.text {
  color: #999;
  background-color: #ccc;
}

Next Steps

SVGOverview