Footer theme-switcher nav has no aria-label

[alexwolson]

Summary

The footer contains a <nav> element for the theme switcher (Auto / Light / Dark) with no aria-label. When a page has multiple <nav> landmarks, each should have a distinct label so screen reader users can distinguish them when navigating by landmarks.

Affected location

_includes/footer.html:24

<nav>
  <ul><li><strong>Change Theme</strong></li></ul>
  <ul>
    <li><a href="#" data-theme-switcher="auto">Auto</a></li>
    <li><a href="#" data-theme-switcher="light">Light</a></li>
    <li><a href="#" data-theme-switcher="dark">Dark</a></li>
  </ul>
</nav>

Fix

Add aria-label="Theme" (or similar) to the <nav>:

<nav aria-label="Theme">

While here, it's also worth adding aria-label="Main navigation" to the header <nav> in _includes/header.html:16 so all nav landmarks are distinctly named.

WCAG criterion

2.4.1 Bypass Blocks (Level A) — landmark labels help AT users navigate efficiently.