Skip to content

A Practical Accessibility Guide for Content Sites

Hermes Team · · 2 min read

Accessibility isn’t optional. It’s a legal requirement in many jurisdictions and the right thing to do. For content sites, most fixes are straightforward. Here’s a practical guide.

Semantic HTML

Use the right elements. <header>, <nav>, <main>, <article>, <section>, <footer> give screen readers structure. They also enable “skip to content” and other navigation aids.

<main id="main">
  <article>
    <header>
      <h1>Post Title</h1>
    </header>
    <p>Content...</p>
  </article>
</main>

Headings

  • One h1 per page — The main title
  • Don’t skip levels — h2 → h3, not h2 → h4
  • Logical order — Use headings for structure, not styling

Images

Every image needs a meaningful alt attribute:

<img src="/hero.jpg" alt="Team members collaborating at a whiteboard" />

For decorative images:

<img src="/decoration.svg" alt="" role="presentation" />
  • Descriptive text — “Read more” is bad. “Read the full guide” is better.
  • Avoid “click here” — Screen readers often list links by text
  • External links — Consider aria-label or rel="noopener" for security

Color Contrast

Text must meet WCAG contrast ratios:

  • Normal text — 4.5:1 minimum
  • Large text — 3:1 minimum
  • AAA — 7:1 for normal, 4.5:1 for large

Use tools like WebAIM Contrast Checker. Don’t rely on color alone to convey meaning.

Focus States

Keyboard users need visible focus. Never remove:

*:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

Or use :focus-visible for modern browsers to avoid focus rings on mouse click.

Add a skip link at the top:

<a href="#main" class="skip-link">Skip to content</a>

Style it to appear on focus (e.g., position: absolute and transform when focused).

Reduced Motion

Respect user preferences:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Forms

  • Labels — Every input needs a <label> or aria-label
  • Errors — Associate error messages with aria-describedby
  • Required fields — Use required and aria-required

Testing

  • Keyboard — Tab through the page. Can you reach everything?
  • Screen reader — NVDA (Windows), VoiceOver (Mac), or TalkBack (Android)
  • Automated — axe DevTools, Lighthouse accessibility audit

Accessibility is a habit. Start with semantic HTML and keyboard navigation. Add contrast checks and screen reader testing to your workflow. Your users will thank you.