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.