Website Accessibility

We are working on making our website more accessible. This is how we will do it….

Use the WP Accessibility enhancing plugin: This adds skip‑links, focus outlines, site language declarations, accessibility toolbar, and alt‑text enhancements. Ideal for quick, effective improvements.
Enhance Semantic HTML with ARIA Roles: Adding appropriate roles helps screen readers navigate the site more effectively.
Ensure Proper Form and Link Accessibility:
- Form labels: Make sure each field in our “Contact Us” form has a visible <label> linked to its input (e.g., <label for="first-name">First Name</label>). Use aria-label or aria-labelledby when necessary.
- Alt text: All images—especially in guide pages—need descriptive alt attributes. For complex visuals, you may employ longdesc for fuller descriptions.
- Keyboard navigation: Add skip-links so keyboard users can jump past menus directly to content. WP Accessibility and others add this automatically.
Conduct Regular Accessibility Audits: Use tools like Equalize Digital’s plugin to scan our site regularly for issues like missing alt-tags, improper heading structure, color contrast problems, and more.

Step-by-step (classic theme like Hestia)

Goal: make clear, screen-reader-friendly landmarks: header/banner, navigation, main, complementary (sidebar), and footer/contentinfo. Use native HTML5 elements first (<header>, <nav>, <main>, <aside>, <footer>), then ARIA only where helpful (labels, regions).

0) Make a child theme (so updates don’t overwrite changes)

In WordPress: Plugins → Add New → “Child Theme Configurator” → Install/Activate → Tools → Child Themes → select Hestia, click Analyze → Create New Child Theme.
Appearance → Themes → Activate Hestia Child.

From here, edit files in the child theme.

1) Add a “Skip to content” link (first focusable thing on the page)

This lets keyboard and screen-reader users jump past the menu.

a) header.php (child theme): add this as the first thing after <body>:

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

b) styles.css (child theme): make it visible on focus (don’t use display:none).

.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  position:static; left:auto; width:auto; height:auto; padding:.5rem 1rem; outline:2px solid;
}

Guidance: skip links should be first focusable element and become visible on focus. Make WordPress CSS-Tricks Equalize Digital WebAIM

2) Mark up the header and primary navigation

a) Wrap header area in <header>
In header.php, wrap the site masthead in:

<header id="site-header" role="banner">
  <!-- existing header markup -->

…and close it with </header> where appropriate.

b) Ensure the main menu is output inside a <nav> with an accessible name
Find the wp_nav_menu(...) call that renders the main menu (usually in header.php). Change/ensure args like this:

<?php
wp_nav_menu([
  'theme_location'       => 'primary',              // Hestia’s main menu location
  'container'            => 'nav',                  // wrap in <nav>
  'container_class'      => 'primary-navigation',
  'container_aria_label' => 'Primary',              // accessible name
  'menu_class'           => 'menu primary-menu',
]);
?>

container_aria_label is the official arg that sets the aria-label on the <nav> container. Use a different label for other menus (e.g., “Footer”). WordPress Developer Resources+1 Whiteley Designs

Prefer one primary nav landmark. If you have multiple <nav> elements (e.g., footer links), label each (“Footer”, “Social”) so screen-reader users can tell them apart. Delicious Brains

3) Wrap the main content correctly (exactly once)

Make sure there is one <main> landmark per page.

For templates that output page/post content (e.g., index.php, page.php, single.php), wrap the loop/content area:

<main id="main-content" tabindex="-1" role="main">
  <?php
  // The Loop or page content here
  ?>
</main>

Why tabindex="-1"? It lets the skip link move focus into <main> even if no focusable elements are at the top. (WCAG-friendly pattern.) Delicious Brains

4) Mark up sidebar (if used) as complementary

If you use sidebar.php, do:

<aside id="sidebar" class="site-sidebar" role="complementary" aria-labelledby="sidebar-heading">
  <h2 id="sidebar-heading" class="screen-reader-text">Site sidebar</h2>
  <?php dynamic_sidebar('sidebar-1'); ?>
</aside>

The hidden <h2> gives the region a label for screen-reader “landmarks”. Delicious Brains

5) Mark up the footer

In footer.php:

<footer id="site-footer" role="contentinfo">
  <?php
  // If you output a footer menu, give it a labeled <nav> too:
  wp_nav_menu([
    'theme_location'       => 'footer',
    'container'            => 'nav',
    'container_class'      => 'footer-navigation',
    'container_aria_label' => 'Footer',
    'menu_class'           => 'menu footer-menu',
  ]);
  ?>
  <!-- existing footer markup -->
</footer>

WordPress Developer Resources+1

6) (Optional but recommended) Make the mobile menu button announce state

Find the hamburger/toggle button and ensure it:

is a real <button>
has aria-controls="<id of the collapsible menu>"
toggles aria-expanded="false" → "true" in your JS

Example:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
  Menu
</button>
<nav id="primary-menu" aria-label="Primary">
  <!-- menu here -->
</nav>
<script>
  const btn = document.querySelector('.menu-toggle');
  const menu = document.getElementById('primary-menu');
  btn.addEventListener('click', () => {
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!expanded));
    menu.classList.toggle('is-open');
  });
</script>

(Aria labels must be set in HTML/JS, not CSS.) WordPress.org

7) Add ARIA where it helps (but don’t overdo it)

Prefer semantic HTML (<nav>, <main>, <header>, <footer>, <aside>).
Use ARIA to label or group: aria-label for multiple navs, aria-labelledby for regions tied to a visible heading, etc.
Avoid redundant roles (e.g., <nav role="navigation"> is fine but unnecessary).

Good practice overview for WordPress + ARIA. Delicious Brains

8) Test it

Keyboard: Tab from the top — the Skip to content link should appear and jump focus inside <main>.
Screen reader (VoiceOver/NVDA): Open the Landmarks/Rotor — you should see: Banner, Navigation (Primary), Main, Complementary (if any), Content info, plus any additional labeled navs (“Footer”).
Quick automated checks: WAVE or axe DevTools browser extensions to confirm landmarks & labels (and color contrast, etc.). WebAIM

If you were using a block (FSE) theme instead

You’d do most of this in the Site Editor:

Appearance → Editor.
Open Templates (e.g., “Page”) and Template Parts (“Header”, “Footer”).
Header: insert a Navigation block and set its ARIA label (block settings → Advanced → Aria label). Add a Custom HTML block at the very top for the skip link (<a class="skip-link" href="#main-content">…</a>), and style as above. Some behaviors are editor-driven; the Navigation block stores labels with its own ID. Full Site Editing
Main: ensure your central content area is set to the “main” HTML element (group/container block → Advanced → HTML element: main).
Sidebar areas: use Group/Columns with HTML element: aside and give them an ARIA label or aria-labelledby.
Footer: nav in a <nav> with a clear Aria label (“Footer”).

Copy-paste checklist (what to actually change today)

Child theme created & active.
Skip link added after <body> + CSS focus style. Make WordPress CSS-Tricks
Header wrapped in <header role="banner">.
Primary nav rendered with container => 'nav' and container_aria_label => 'Primary'. WordPress Developer Resources+1
One <main id="main-content" role="main" tabindex="-1"> around The Loop.
Sidebar (if present) wrapped in <aside role="complementary" aria-labelledby="…"> with a hidden <h2> label.
Footer wrapped in <footer role="contentinfo"> and footer menu labeled <nav aria-label="Footer">.
Mobile toggle uses aria-controls + toggles aria-expanded. WordPress.org
Keyboard + screen-reader tests pass. WebAIM