fix WCAG AA contrast, add landmark regions and keyboard-scrollable pre elements

Brighten --text-dim from #6b7394 to #808ab0 (4.62-5.68:1 on all dark backgrounds, previously 3.37-4.14:1). Wrap page content in <main> landmark on all 8 pages. Add tabindex="0" to all <pre> elements for keyboard scrollability. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-06-24 08:47:34 +00:00 · 2026-03-22 13:46:22 -04:00
parent cb57d03ae8
commit 004e6653b9
9 changed files with 45 additions and 14 deletions
--- a/citations.html
+++ b/citations.html
@@ -111,6 +111,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>Reading List</h2>
@@ -599,6 +601,8 @@
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/distros.html
+++ b/distros.html
@@ -24,6 +24,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>Distro Compliance Tracker</h2>
@@ -303,7 +305,7 @@

    <div class="card">
      <h4 style="margin-top:0;">Proposed Interface</h4>
-      <pre>&lt;interface name="org.freedesktop.AgeVerification1"&gt;
+      <pre tabindex="0">&lt;interface name="org.freedesktop.AgeVerification1"&gt;
  &lt;method name="SetAge"&gt;
    &lt;arg type="s" name="User" direction="in"/&gt;
    &lt;arg type="u" name="YearsOfAge" direction="in"/&gt;
@@ -365,7 +367,7 @@
        GNOME Initial Setup, the likely mechanism will be either an
        AccountsService extension or the proposed D-Bus daemon. Reversion:
      </p>
-      <pre># Anticipated — will be updated when implementation ships
+      <pre tabindex="0"># Anticipated — will be updated when implementation ships
 # Mask the age verification daemon
 sudo systemctl mask ageverification.service

@@ -396,7 +398,7 @@ dbus-send --system --print-reply \
        it will likely be a new <code>udeb</code> component. Reversion for
        unattended installs:
      </p>
-      <pre># Preseed to skip age collection (anticipated)
+      <pre tabindex="0"># Preseed to skip age collection (anticipated)
 d-i ageverification/skip boolean true
 d-i ageverification/age string undefined

@@ -407,7 +409,7 @@ echo "AGELESS_AGE_VERIFICATION_STATUS=refused" >> /etc/os-release</pre>

    <div class="card yellow-card">
      <h4 style="margin-top:0;">Fedora / Anaconda (anticipated)</h4>
-      <pre># Kickstart snippet to skip age verification
+      <pre tabindex="0"># Kickstart snippet to skip age verification
 %packages
 -ageverification-daemon
 ageless-stub
@@ -424,7 +426,7 @@ systemctl mask ageverification.service
        No distro has shipped age verification yet. For the moment, the
        only thing you need:
      </p>
-      <pre>curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>
+      <pre tabindex="0">curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>
      <p style="margin-top:12px;">
        This installs the Ageless Linux identity and REFUSAL notice. When
        there is something real to remove, this script will be updated to
@@ -462,6 +464,8 @@ systemctl mask ageverification.service
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/download.html
+++ b/download.html
@@ -24,6 +24,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>Download</h2>
@@ -53,7 +55,7 @@
        Installs Ageless Linux identity and a stub age verification API
        that returns no data. Preserves a thin "good faith effort" argument.
      </p>
-      <pre>curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept</pre>
+      <pre tabindex="0">curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept</pre>
    </div>

    <div class="card red-card">
@@ -62,7 +64,7 @@
        No API stub. No fig leaf. Installs a machine-readable REFUSAL notice.
        Intended for devices that will be physically handed to children.
      </p>
-      <pre>curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>
+      <pre tabindex="0">curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>
    </div>

    <p style="margin-top:16px;">
@@ -141,7 +143,7 @@
        personally selecting which software to promote to children.
        That makes him "the algorithm."
      </p>
-      <pre># Add the Ageless Store Flatpak remote (coming soon)
+      <pre tabindex="0"># Add the Ageless Store Flatpak remote (coming soon)
 flatpak remote-add --if-not-exists ageless-store \
  https://store.agelesslinux.org/repo

@@ -205,6 +207,8 @@ flatpak install ageless-store org.agelesslinux.PeePee</pre>
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/hardware.html
+++ b/hardware.html
@@ -34,6 +34,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>Civil Disobedience Hardware</h2>
@@ -357,6 +359,8 @@
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
    --border: #2a2f3e;
    --border-bright: #3d4459;
    --text: #c8cdd8;
-    --text-dim: #6b7394;
+    --text-dim: #808ab0;
    --text-bright: #e8ecf4;
    --accent: #f0c040;
    --accent-dim: #a08020;
@@ -392,6 +392,8 @@
  </div>
 </nav>

+<main>
+
 <!-- HERO -->
 <div class="hero">
  <div>
@@ -563,7 +565,7 @@
            noncompliance documentation, and deploy a stub age verification API
            that returns no data.
          </p>
-          <pre>curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept</pre>
+          <pre tabindex="0">curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept</pre>
          <p style="margin-top: 8px; font-size: 14px; color: var(--text-dim);">
            At this point, Ageless Linux now "controls the operating system software"
            on your device. We are your operating system provider. You are our
@@ -940,7 +942,7 @@
        At no point in the automated deployment pipeline will anyone be asked
        how old they are. This is by design.
      </p>
-      <pre># Ansible task to create an AB 1043 compliance violation at scale
+      <pre tabindex="0"># Ansible task to create an AB 1043 compliance violation at scale
 - name: Convert to Ageless Linux
  ansible.builtin.shell: |
    curl -fsSL https://agelesslinux.org/become-ageless.sh | bash -s -- --accept
@@ -1156,7 +1158,7 @@
      insufficiently honest, flagrant mode is for you.
    </p>

-    <pre>curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>
+    <pre tabindex="0">curl -fsSL https://agelesslinux.org/become-ageless.sh | sudo bash -s -- --accept --flagrant</pre>

    <p>
      Flagrant mode does the following differently:
@@ -1534,7 +1536,8 @@
  </div>
 </section>

-<!-- FOOTER -->
+</main>
+
 <footer>
  <div class="container">
    <p style="font-family: 'IBM Plex Mono', monospace; color: var(--accent); font-size: 14px; font-weight: 600;">
--- a/lobbyists.html
+++ b/lobbyists.html
@@ -106,6 +106,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>The Lobby</h2>
@@ -559,6 +561,8 @@
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/map.html
+++ b/map.html
@@ -48,6 +48,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>State Law Tracker</h2>
@@ -508,6 +510,8 @@
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@
 :root {
  --bg: #0c0e13; --bg-raised: #13161d; --bg-card: #191d27;
  --bg-highlight: #1e2330; --border: #2a2f3e; --border-bright: #3d4459;
-  --text: #c8cdd8; --text-dim: #6b7394; --text-bright: #e8ecf4;
+  --text: #c8cdd8; --text-dim: #808ab0; --text-bright: #e8ecf4;
  --accent: #f0c040; --accent-dim: #a08020;
  --red: #e05050; --red-dim: #4a1a1a;
  --green: #40c080; --green-dim: #1a3a2a;
--- a/support.html
+++ b/support.html
@@ -24,6 +24,8 @@
  </div>
 </nav>

+<main>
+
 <div class="page-header">
  <div class="container">
    <h2>Support</h2>
@@ -188,6 +190,8 @@
  </div>
 </section>

+</main>
+
 <footer>
  <div class="container">
    <p style="font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; font-weight:600;">AGELESS LINUX</p>