Blog

Dark Mode, Reduced Motion, and Other Accessibility Basics Every Site Should Have

A practical checklist of the accessibility features that every website should implement — from dark mode and reduced motion to skip links and focus indicators.

By AI Humanizer Team 5 min read

Web accessibility often gets treated as an edge case — something you bolt on at the end for screen reader users. That framing is wrong, and it costs sites real traffic. Many accessibility improvements directly improve Core Web Vitals scores, user engagement, and SEO. Here's a practical checklist of what every site should implement.

Dark Mode

Operating systems have supported prefers-color-scheme since 2019. If your site ignores it, a significant portion of visitors — especially on mobile — will see a blinding white page when their device is in dark mode.

Implementation: Use CSS custom properties so you only define colors in one place:

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d10;
    --text: #e7e9ec;
  }
}

Or use a [data-theme] attribute on the <html> element, which lets you add a manual toggle without changing the media query logic. AI Humanizer uses exactly this approach — the toggle persists to localStorage while still respecting the OS-level preference on first visit.

Why it matters for SEO: Google's rendering engine doesn't care about dark mode, but user engagement does. A site that respects a visitor's system preference gets longer sessions and lower bounce rates from the roughly 80% of mobile users who have dark mode enabled.

Reduced Motion

Some users have vestibular disorders, epilepsy, or other conditions where moving content causes physical symptoms. The prefers-reduced-motion media query lets you detect when a user has asked their OS to minimize animations.

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

One important implementation detail: don't just set animation: none — some elements use animation fill-mode to stay in their final state. Setting duration to near-zero respects the fill-mode and still shows the end state without the motion.

Also watch out for JavaScript-driven animations (scroll reveals, parallax, counters). Those need to check window.matchMedia('(prefers-reduced-motion: reduce)').matches before running.

A skip link is an <a href="#main-content">Skip to main content</a> placed as the first focusable element on the page. Keyboard users and screen reader users use it to jump past the navigation on every page load.

Make it visually hidden by default but visible on focus:

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 0;
}

This is a WCAG 2.1 Level A requirement. It also signals to Google that your site has a logical document structure.

Focus Indicators

Browsers apply a default focus ring to interactive elements, but many designers remove it with outline: none because it looks inconsistent. The WCAG requirement is that keyboard focus is always visible — not that the default ring must be preserved.

The modern approach: remove the default ring but provide a custom one:

:focus-visible {
  outline: 2px solid var(--human);
  outline-offset: 2px;
  border-radius: 4px;
}

Note :focus-visible (not :focus) — this only shows the ring for keyboard navigation, not mouse clicks, which keeps the visual design clean for pointer users while remaining fully accessible.

Semantic HTML and ARIA

Before reaching for ARIA roles, use the right HTML elements. A <button> handles focus, keyboard activation, and screen reader announcements automatically. A <div> styled to look like a button does none of that without significant ARIA work.

The rule is: use native HTML elements for their semantic purpose, add ARIA only when no native element exists for what you're doing.

Key semantic elements most sites underuse: - <nav aria-label="Main navigation"> — distinguishes multiple navigation regions - <main> — marks the primary content for screen readers and assistive tech - <aside> — marks supplementary content (sidebars, related articles) - <article> — marks self-contained content that could stand alone - lang attribute on <html> — critical for screen readers to use the right pronunciation

Colour Contrast

WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ bold or 24px+). WCAG AAA requires 7:1.

Most colour contrast failures are in placeholder text, secondary labels, and disabled states. Tools like the WebAIM Contrast Checker or browser DevTools accessibility panel will flag these during development.

One easy win: don't rely solely on colour to convey information. Error states, success states, and required field indicators should combine colour with an icon or text label so they're accessible to colour-blind users.

Image Alt Text

Every <img> needs an alt attribute. The value depends on the image's purpose: - Informative images — describe what's in the image: alt="Line chart showing 40% increase in readability score after AI humanization" - Decorative images — empty alt: alt="" (tells screen readers to skip it) - Functional images (icons, logo links) — describe the function: alt="AI Humanizer home"

Missing alt attributes are also a direct SEO signal — Google can't index image content without a text description.

A Quick Audit

You can catch the majority of accessibility issues with these free tools: - axe DevTools browser extension — finds WCAG violations automatically - WAVE — visual overlay of accessibility errors - Lighthouse (built into Chrome DevTools) — accessibility score alongside performance

No automated tool catches everything — manual testing with a keyboard (no mouse) and a screen reader is the only complete check. But automated tools will catch the most common, most impactful issues in under five minutes.

Accessibility and SEO are more aligned than most people realize. Both reward clean semantic markup, logical structure, descriptive text, and fast performance. Treating them as the same problem — rather than separate checklists — is the most efficient way to improve both.

Use AI Humanizer's free tools to keep your writing clear and readable for every audience.

accessibilitydark modereduced motionwcag