Web Accessibility Fundamentals
Creating accessible web applications ensures that everyone, including people with disabilities, can use your website effectively. Let’s explore the fundamentals of web accessibility.
Why Accessibility Matters#
Web accessibility benefits everyone, not just users with disabilities. It improves SEO, enhances mobile experience, and increases your potential user base.
Semantic HTML#
Use appropriate HTML elements for their intended purpose:
<!-- Bad -->
<div onclick="handleClick()">Click me</div>
<!-- Good -->
<button onclick="handleClick()">Click me</button>
<!-- Bad -->
<div class="heading">Page Title</div>
<!-- Good -->
<h1>Page Title</h1>ARIA Labels and Roles#
When semantic HTML isn’t enough, use ARIA attributes:
<button aria-label="Close dialog" onclick="closeDialog()">
<span aria-hidden="true">×</span>
</button>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Keyboard Navigation#
Ensure all interactive elements are keyboard accessible:
function handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
handleClick();
}
}
// Good component
<div
role="button"
tabIndex={0}
onClick={handleClick}
onKeyDown={handleKeyDown}
>
Click me
</div>Color Contrast#
Maintain sufficient color contrast ratios:
/* Bad - Insufficient contrast */
.text {
color: #999;
background-color: #eee;
}
/* Good - WCAG AA compliant */
.text {
color: #595959;
background-color: #ffffff;
}Focus Indicators#
Always provide visible focus indicators:
/* Don't do this */
* {
outline: none;
}
/* Do this instead */
button:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}Image Alt Text#
Always provide meaningful alt text for images:
<!-- Decorative image -->
<img src="decoration.png" alt="" />
<!-- Informative image -->
<img src="chart.png" alt="Sales increased by 25% in Q4 2024" />
<!-- Linked image -->
<a href="/home">
<img src="logo.png" alt="Company name - Home" />
</a>Testing Your Accessibility#
Use these tools to test accessibility:
- axe DevTools browser extension
- WAVE Web Accessibility Evaluation Tool
- Screen readers (NVDA, JAWS, VoiceOver)
- Keyboard-only navigation testing
// Automated testing with jest-axe
import { axe } from 'jest-axe';
import { render } from '@testing-library/react';
test('should have no accessibility violations', async () => {
const { container } = render(<MyComponent />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});Conclusion#
Accessibility should be built into your development process from the start, not added as an afterthought. These fundamentals will help you create more inclusive web applications.