Table of Contents
HTML Accessibility
Accessibility ensures that web content is usable by people with disabilities and assistive technologies.
ARIA Attributes
<button aria-label="Close dialog" onclick="closeDialog()">×</button>
<div role="alert" aria-live="polite">
Form submitted successfully!
</div>
<nav aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>Form Accessibility
<form>
<label for="username">Username (required)</label>
<input type="text"
id="username"
name="username"
required
aria-describedby="username-help">
<div id="username-help">
Must be at least 3 characters long
</div>
<fieldset>
<legend>Preferred Contact Method</legend>
<input type="radio" id="email" name="contact" value="email">
<label for="email">Email</label>
<input type="radio" id="phone" name="contact" value="phone">
<label for="phone">Phone</label>
</fieldset>
</form>Image Accessibility
<!-- Informative image -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2">
<!-- Decorative image -->
<img src="decoration.png" alt="" role="presentation">
<!-- Complex image -->
<figure>
<img src="complex-chart.png" alt="Detailed sales data">
<figcaption>
Sales data showing 25% increase from Q1 ($100k) to Q2 ($125k)
</figcaption>
</figure>Keyboard Navigation
<!-- Skip link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Proper focus management -->
<button onclick="openModal()" aria-haspopup="dialog">
Open Settings
</button>
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
<h2 id="modal-title">Settings</h2>
<button onclick="closeModal()" aria-label="Close settings">×</button>
</div>Accessibility Checklist
- Use semantic HTML elements
- Provide alt text for images
- Ensure proper color contrast
- Make content keyboard accessible
- Use ARIA attributes appropriately
- Test with screen readers