diff --git a/astro/src/images/fixable/ac-logo-horizontal.png b/astro/src/images/fixable/ac-logo-horizontal.png
deleted file mode 100644
index c444bc97..00000000
Binary files a/astro/src/images/fixable/ac-logo-horizontal.png and /dev/null differ
diff --git a/astro/src/images/fixable/barred-rock-sm.jpg b/astro/src/images/fixable/barred-rock-sm.jpg
deleted file mode 100644
index 3710a011..00000000
Binary files a/astro/src/images/fixable/barred-rock-sm.jpg and /dev/null differ
diff --git a/astro/src/images/fixable/green-on-red.png b/astro/src/images/fixable/green-on-red.png
deleted file mode 100644
index 5f5e8863..00000000
Binary files a/astro/src/images/fixable/green-on-red.png and /dev/null differ
diff --git a/astro/src/pages/_fixable/index.astro b/astro/src/pages/_fixable/index.astro
deleted file mode 100644
index 07aaaa0e..00000000
--- a/astro/src/pages/_fixable/index.astro
+++ /dev/null
@@ -1,322 +0,0 @@
----
-import { getImage, Image } from "astro:assets";
-
-import Branding from "../../components/Branding.astro";
-import Column from "../../components/Column.astro";
-import ExternalLink from "../../components/ExternalLink.astro";
-import FlexColumn from "@components/FlexColumn.astro";
-import Layout from "../../layouts/Layout.astro";
-import Hero from "../../components/Hero.astro";
-import ShadowBoxSection from "../../components/ShadowBoxSection.astro";
-import ThemedColumn from "../../components/ThemedColumn.astro";
-import ThemedSection from "../../components/ThemedSection.astro";
-
-import heroBg from "../../images/colored-hero/woman-using-laptop.png";
-import greenOnRed from "../../images/fixable/green-on-red.png";
-import horizontalLogo from "../../images/fixable/ac-logo-horizontal.png";
-import chickenBg from "../../images/fixable/barred-rock-sm.jpg";
-
-const fixBgNoColor = await getImage({ src: chickenBg, format: "webp" });
-
-const title = "fixable";
-const heading = "fixable: An example of bad accessibility";
-const crumbs = [];
----
-
-<Layout title={title} crumbs={crumbs} heading={heading}>
-  <Hero image={heroBg} slot="header">
-    <div slot="heading" class="mb-4">
-      <h1 class="visually-hidden">fixable: An example of bad accessibility</h1>
-      <span class="display-2">
-        <strong>Incorrect</strong> accessibility is <Branding>fixable</Branding
-        >.
-      </span>
-    </div>
-    <p class="lead text-bg-hero text-brand mb-5">
-      <Branding>fixable</Branding> provides a bad example of accessibility to show
-      how important it is to implement it correctly. It's not only about how your
-      site looks, but how your content is structured and labelled.
-    </p>
-  </Hero>
-
-  <ThemedSection style="tertiary">
-    <h1 class="display-4">Headings indicate <strong>structure</strong>.</h1>
-    <FlexColumn
-      xlFlexRow class="justify-content-xl-evenly align-items-center"
-    >
-      <Column xl="8" xxl="9">
-        <p>
-          Headings in a document exist to indicate structure. Your users will
-          use headings to scan through your content and find the relevant
-          section.
-        </p>
-        <h4>Subheadings</h4>
-        <p>
-          Subheadings should be relevant to the previous heading and should
-          always increment one level. Never use a heading or subheading because
-          it's sized correctly.
-        </p>
-      </Column>
-      <Column lg="9" xl="3" xxl="2">
-        <h4
-          class="display-5 text-center text-primary py-3 border-primary-subtle border-top border-bottom"
-        >
-          Headings are for <strong>organization</strong>, not <strong
-            >size</strong
-          >.
-        </h4>
-      </Column>
-    </FlexColumn>
-  </ThemedSection>
-
-  <ThemedSection theme="secondary" style="subtle">
-    <h2 class="display-4">Color needs <strong>contrast</strong>.</h2>
-    <FlexColumn
-      lgFlexRow gap="4" class="py-3 justify-content-lg-evenly"
-    >
-      <Column lg="3" class="p-4">
-        <p class="text-center fs-3 bad-contrast">
-          This text is <strong>low contrast</strong> on this background.
-        </p>
-      </Column>
-      <ThemedColumn
-        lg="3"
-        border={1}
-        class="p-3 shadow rounded">
-        <p class="text-center fs-5">
-          <Image class="green-on-red" src={greenOnRed} alt="" />
-          and <span class="red-on-green py-1 px-2">Red</span> is the
-          <strong>most common</strong> combination of color blindness.
-        </p>
-      </ThemedColumn>
-      <Column
-        lg="3"
-        class="p-3 shadow rounded no-bg-color bg-example"
-      >
-        <p class="text-center text-light fs-4">
-          Always specify a <code>background-color</code>, even when an image is
-          used.
-        </p>
-      </Column>
-    </FlexColumn>
-  </ThemedSection>
-
-  <ShadowBoxSection theme="info" style="secondary">
-    <div class="p-3">
-      <h2 class="display-4 text-center"
-        >Forms require <strong>focus</strong>.</h2
-      >
-      <p class="text-center px-5">
-        And proper focus means that each field needs a <code>label</code> and a description.
-        These elements need to be linked, which means using the correct <code
-          >id</code
-        > and the correct <code>for</code> attribute or ARIA description.
-      </p>
-      <FlexColumn xlFlexRow class="justify-content-xl-evenly p-4">
-        <Column xl="5" class="pb-4">
-          <h3 class="display-5"
-            ><strong>Associate</strong> the fields and text.</h3
-          >
-
-          <div class="form-group px-4 pb-3">
-            <label class="form-label">Labels</label>
-            <select class="form-select" name="label-dropdown">
-              <option value="should">should be</option>
-              <option value="associated">associated with</option>
-              <option value="field">the form field.</option>
-            </select>
-          </div>
-
-          <div class="form-group px-4 pb-3">
-            <input
-              type="search"
-              class="form-control w-100"
-              placeholder="Placeholders are not labels."
-            />
-          </div>
-
-          <div class="form-group px-4">
-            <label class="form-label">Email address</label>
-            <input
-              type="email"
-              class="form-control"
-              placeholder="name@example.com"
-            />
-            <p class="form-text px-2">
-              Labels and descriptions also need to be associated by the <code
-                >id</code
-              >
-              or else they aren't correctly associated with the email address above.
-            </p>
-          </div>
-
-          <div class="form-group px-4">
-            <label class="form-label">File Uploads</label>
-            <input class="form-control" type="file" />
-            <p class="form-text px-2">... also need descriptions and labels.</p>
-          </div>
-        </Column>
-
-        <Column xl="5">
-          <h3 class="display-5"
-            >Choose the right <strong>field type</strong>.</h3
-          >
-
-          <div class="px-4 pb-3">
-            <div>What's your favorite color?</div>
-            <div class="form-check">
-              <input
-                name="colors"
-                class="form-check-input"
-                type="checkbox"
-                value="blue"
-              />
-              <label class="form-check-label"> Blue! </label>
-            </div>
-            <div class="form-check">
-              <input
-                name="colors"
-                class="form-check-input"
-                type="checkbox"
-                value="yellow"
-                checked
-              />
-              <label class="form-check-label"> No, yellow! </label>
-            </div>
-            <div class="form-check">
-              <input
-                name="colors"
-                class="form-check-input"
-                type="checkbox"
-                value="green"
-              />
-              <label class="form-check-label"> Or is it green? </label>
-            </div>
-            <div class="form-check">
-              <input
-                name="colors"
-                class="form-check-input"
-                type="checkbox"
-                value="orange"
-              />
-              <label class="form-check-label"> Definitely orange. </label>
-            </div>
-          </div>
-
-          <div class="px-4 pb-3">
-            <div>Are you sure you want a radio?</div>
-            <div class="form-check">
-              <input class="form-check-input" type="radio" name="radio" />
-              <label class="form-check-label"> I don't like this one. </label>
-            </div>
-            <div class="form-check">
-              <input class="form-check-input" type="radio" name="radio" />
-              <label class="form-check-label">
-                Not real sure about this one either.
-              </label>
-            </div>
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                type="radio"
-                name="radio"
-                checked
-              />
-              <label class="form-check-label">
-                These are my only options?
-              </label>
-            </div>
-            <div class="form-check">
-              <input class="form-check-input" type="radio" name="radio" />
-              <label class="form-check-label">
-                I'm not sure what any of these mean.
-              </label>
-            </div>
-          </div>
-
-          <div class="form-group px-4">
-            <label class="form-label">Password</label>
-            <input type="text" class="form-control" />
-            <p class="form-text px-2">
-              Passwords should be marked as such, or else assistive technology
-              will read the password to anyone who can hear it.
-            </p>
-          </div>
-        </Column>
-      </FlexColumn>
-    </div>
-  </ShadowBoxSection>
-
-  <ThemedSection style="secondary">
-    <h2 class="display-4 my-3"
-      >Links should be <strong>described</strong> and <strong>clickable</strong
-      >.</h2
-    >
-    <FlexColumn
-      lgFlexRow class="justify-content-lg-around align-items-center"
-    >
-      <Column lg="4" xxl="3">
-        <p class="fs-5 text-center text-primary py-3">
-          Make sure you properly describe your link content. None of these do
-          this well.
-        </p>
-      </Column>
-
-      <Column xl="5" xxl="4">
-        <ul style="--bs-gutter-x: 6rem;">
-          <li>
-            Read more at <a href="https://accessiblecommunity.org"
-              ><Image
-                src={horizontalLogo}
-                class="d-inline"
-                width="200px"
-                alt
-              /></a
-            >
-          </li>
-          <li>
-            <a href="https://accessiblecommunity.org">Read more</a>
-          </li>
-          <li>
-            Read more at Accessible Community
-            <ExternalLink href="https://accessiblecommunity.org" />
-          </li>
-        </ul>
-      </Column>
-    </FlexColumn>
-  </ThemedSection>
-</Layout>
-
-<style lang="scss">
-  @import "../../styles/dark-mode.scss";
-
-  .bad-contrast {
-    color: var(--bs-light);
-  }
-
-  .green-on-red {
-    width: 4em;
-    height: auto;
-  }
-
-  .red-on-green {
-    color: red;
-    background-color: green;
-  }
-
-  .no-bg-color {
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    align-content: center;
-  }
-
-  .bg-example {
-    background-image: url(${fixBgNoColor.src});
-  }
-
-  @include color-mode(dark) {
-    .bad-contrast {
-      color: var(--bs-dark);
-    }
-  }
-</style>