Accessibility Best Practices

HTML Accessibility Best Practices

Accessibility (a11y) ensures your website can be used by everyone, including people with disabilities. HTML provides many built-in features to make content accessible.

Semantic HTML

Use semantic elements that convey meaning:

<!-- Good: Semantic -->
<header>
  <nav>Navigation</nav>
</header>
<main>
  <article>Content</article>
</main>
<footer>Footer</footer>

<!-- Bad: Non-semantic -->
<div class="header">
  <div class="nav">Navigation</div>
</div>

Alt Text for Images

Always provide descriptive alt attributes for images:

<!-- Good -->
<img src="cat.jpg" alt="A fluffy orange cat sitting on a windowsill">

<!-- Decorative images -->
<img src="decoration.png" alt="">

Form Labels

Always associate labels with form inputs:

<!-- Method 1: Label wraps input -->
<label>Name: <input type="text" name="name"></label>

<!-- Method 2: Label uses 'for' attribute -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

Headings Hierarchy

Use headings in proper order (h1 → h2 → h3, etc.) without skipping levels:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

ARIA Attributes

ARIA (Accessible Rich Internet Applications) provides additional accessibility information:

• aria-label - Provides a text label
• aria-describedby - References descriptive text
• aria-hidden - Hides decorative elements from screen readers
• role - Defines the element's purpose

<button aria-label="Close dialog">×</button>
<div role="alert" aria-live="polite">Form submitted successfully</div>

Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

• Use proper focus order
• Provide visible focus indicators
• Don't remove default keyboard behavior

Color and Contrast

While CSS handles styling, remember:

• Don't rely solely on color to convey information
• Ensure sufficient color contrast (WCAG guidelines)
• Provide text alternatives for color-coded information

Accessibility Checklist

• ✓ Use semantic HTML elements
• ✓ Provide alt text for images
• ✓ Associate labels with form inputs
• ✓ Use proper heading hierarchy
• ✓ Ensure keyboard navigation works
• ✓ Test with screen readers
• ✓ Maintain sufficient color contrast