Accessibility makes your blog usable by people with disabilities — visual, motor, cognitive, auditory. It’s the right thing to do, it’s increasingly a legal requirement, and it benefits all readers (better usability, better SEO, better mobile experience). This post is the practical accessibility setup.

Short answer: Use semantic HTML (proper headings, lists, landmarks). Write descriptive alt text for images. Ensure 4.5:1 color contrast for text. Make site keyboard-navigable. Caption videos. Don’t rely on overlay plugins as a substitute for real accessibility. Aim for WCAG 2.1 Level AA conformance.
A blog post with high-contrast text, clear headings, and visible focus states on interactive elements

What accessibility actually means

Accessibility (often abbreviated a11y) means your site is usable by:

  • Blind users (using screen readers).
  • Low-vision users (large text, high contrast).
  • Color-blind users.
  • Users with motor disabilities (keyboard only, voice control).
  • Users with cognitive disabilities (clear language, predictable layout).
  • Deaf users (captions on video).

Standards: WCAG (Web Content Accessibility Guidelines). Most legal frameworks target WCAG 2.1 Level AA.

Why accessibility matters now

  • Legal: ADA lawsuits in the US, EAA in Europe, and similar laws elsewhere.
  • Audience: ~15% of the global population has some form of disability.
  • SEO: accessibility-compliant sites tend to rank better (Google rewards good UX signals).
  • Mobile: accessibility patterns help small-screen users too.
  • Voice search: structured content is better for voice assistants.

Theme choice matters

Some themes are accessibility-ready (declared in their theme metadata). Others aren’t.

Look for:

  • Proper heading hierarchy.
  • Skip links (“Skip to content” links).
  • Visible focus styles.
  • Semantic HTML.
  • ARIA landmarks where appropriate.
  • Sufficient color contrast.

Themes that emphasize accessibility: Aurora, Twenty Twenty-Four (and other WordPress defaults), Astra, Kadence, GeneratePress.

If your theme isn’t accessibility-ready, switching may be easier than retrofitting.

Headings hierarchy

Headings should describe page structure:

  • H1: the page title. One per page.
  • H2: major sections.
  • H3: subsections of H2.
  • H4–H6: deeper nesting (rarely needed).

Don’t skip levels. Don’t use headings for visual styling — use them for structure.

Screen readers let users navigate by headings. Bad heading structure breaks this navigation.

Image alt text

Every meaningful image needs alt text describing what’s in it.

Good alt text

  • Describes the image, not the filename.
  • Concise (a few words to a sentence).
  • Doesn’t start with “Image of” or “Picture of” (screen readers say “Image” already).
  • Includes key visual information.

Bad alt text

  • Empty (when the image is meaningful).
  • Just “image1.jpg.”
  • Keyword-stuffed.
  • “Click here” or other meaningless filler.

Decorative images

Purely decorative images (background patterns, dividers) should have empty alt text (alt=””). Screen readers skip them.

Complex images

Charts, infographics, complex diagrams need either detailed alt text or a text alternative in the surrounding content.

Color contrast

WCAG 2.1 AA requires:

  • 4.5:1 contrast for normal-size text.
  • 3:1 contrast for large text (18pt or 14pt bold and larger).
  • 3:1 contrast for UI elements (buttons, form fields).

Tools:

  • WebAIM Contrast Checker.
  • Chrome DevTools (built-in contrast checker).
  • WAVE browser extension.

Common failures: light gray text on white, low-contrast button colors, link colors too close to body text.

Keyboard navigation

Test: can you use your site without a mouse?

  • Tab key moves through interactive elements.
  • Enter activates buttons and links.
  • Escape closes modals.
  • Focus must be visible (a ring or border around the focused element).

Common failures:

  • Dropdown menus that don’t open via keyboard.
  • Modal dialogs that trap focus incorrectly.
  • Custom JavaScript controls that bypass keyboard support.
  • CSS that hides focus rings (outline: 0 with no replacement).

Link text

Link text should make sense out of context. Screen readers can list all links on a page — a list of “click here” links is useless.

Good

  • “Read our pricing page.”
  • “Download the e-book on starting a blog.”

Bad

  • “Click here.”
  • “Read more.”
  • “This.”

Forms

Forms need:

  • Every input has a visible label.
  • Labels are programmatically linked (<label for="email">).
  • Required fields are marked.
  • Error messages are clear and announced.
  • Buttons clearly say what they do (“Submit comment,” not just “Submit”).

Good plugins: Fluent Forms, WPForms, Gravity Forms all support accessibility well when configured.

An accessibility audit dashboard showing contrast, alt text, and heading hierarchy checks

Video captions

Videos need captions:

  • YouTube auto-captions exist but need review for accuracy.
  • Upload custom .vtt or .srt files for better accuracy.
  • Vimeo, Wistia support uploaded captions.

Captions help:

  • Deaf and hard-of-hearing users.
  • Non-native speakers.
  • People watching with sound off.
  • SEO (captions get indexed).

Skip links

“Skip to main content” link that appears when keyboard-focused, letting users skip past the header and menu.

Most accessibility-ready themes include this. If yours doesn’t, add it via a small code snippet or plugin.

ARIA landmarks

HTML5 landmark elements (<header>, <nav>, <main>, <footer>, <aside>) help screen readers understand page structure.

Use them correctly. Don’t use <div> for everything.

Animations and motion

Excessive motion can trigger vestibular disorders.

  • Respect prefers-reduced-motion media query.
  • Avoid autoplay video with motion.
  • Provide pause controls for animations.

Don’t rely on overlay accessibility plugins

Companies sell “accessibility overlay” plugins claiming to make sites accessible by adding a widget.

Reality: overlays don’t fix underlying accessibility issues, can break assistive tech, and are widely criticized by the disability community.

Lawsuits often continue despite installed overlays.

Real accessibility means real fixes — not a widget.

Accessibility plugins worth using

  • WP Accessibility: free plugin that fixes common accessibility issues (skip links, focus styles, ARIA landmarks).
  • Accessibility Checker: scans your content and reports issues.
  • Sa11y: editor-side accessibility checker.

These help. They don’t replace good content and design.

Auditing tools

  • WAVE: browser extension that highlights accessibility issues.
  • Axe DevTools: Chrome / Firefox extension.
  • Lighthouse: built into Chrome DevTools.
  • Manual testing: use a screen reader (NVDA free for Windows, VoiceOver built into Mac/iOS) to actually navigate your site.

Accessibility statement

Publish an accessibility statement on your site stating:

  • Your commitment to accessibility.
  • What standards you target (WCAG 2.1 AA).
  • Known limitations.
  • How users can report accessibility issues.

Shows good faith. Helpful legally.

Common quick wins

  1. Add alt text to all images going forward.
  2. Check contrast on your theme’s color palette.
  3. Make sure focus styles are visible.
  4. Add captions to videos.
  5. Use proper heading hierarchy.
  6. Make link text descriptive.
  7. Install WP Accessibility plugin.

Even just these moves you significantly toward compliance.

The honest summary

Accessibility means real users can use your blog. It requires semantic HTML, descriptive alt text, sufficient color contrast, keyboard navigability, video captions, and clear forms. Pick an accessibility-ready theme, use accessibility plugins to catch common issues, and audit with WAVE or Axe. Don’t use overlay plugins as a substitute. The work pays off in real audience reach, SEO, and reduced legal exposure.