Accessibility pass: fix real WCAG contrast failures, add skip link and nav landmarks

Computed actual contrast ratios rather than eyeballing: - White button text on teal was 3.67:1, fails AA (needs 4.5:1) — darkened the CTA color to 007f73, now 4.90:1. - Rose nav-hover text was 2.50:1 on the header, 1.82:1 on the footer — both far below any AA threshold. Rose now shows as an underline instead of a text color change, so the accent survives without breaking legibility. - Added a skip-to-content link (hidden until focused, standard pattern), aria-label on both nav landmarks (header nav and footer nav previously both announced as plain 'navigation' with no way to distinguish them), and an explicit high-contrast focus-visible ring — including a header-specific override since the default cta-color ring was only ~1:1 against the slate blue header background. All values re-verified in both light and dark mode, not just light.
2026-07-08 19:17:03 -04:00
parent 13cd32d878
commit 39e8cdcd12
2 changed files with 53 additions and 6 deletions
@@ -17,10 +17,12 @@
  {{ end }}
 </head>
 <body>
+  <a class="skip-link" href="#main-content">Skip to content</a>
+
  <header class="site">
    <div class="inner">
      <a class="brand" href="/">{{ .Site.Title }}</a>
-      <nav>
+      <nav aria-label="Primary">
        {{ range .Site.Menus.main }}
        <a href="{{ .URL }}">{{ .Name }}</a>
        {{ end }}
@@ -28,14 +30,14 @@
    </div>
  </header>

-  <main>
+  <main id="main-content">
    {{ block "main" . }}{{ end }}
  </main>

  <footer class="site">
    <div class="inner">
      <span>&copy; {{ now.Year }} {{ .Site.Title }}</span>
-      <nav>
+      <nav aria-label="Footer">
        {{ range .Site.Menus.footer }}
        <a href="{{ .URL }}">{{ .Name }}</a>
        {{ end }}