Do you mean email

site/src/pages/index.astro

@@ -1004,6 +1004,10 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
       <p>This section includes task completion and form based failures. This includes a small number of errors.</p>
 
       <dl slot="wcag2">
+        <dt>1.4.3 and 1.4.6: Contrast</dt>
+        <dd>
+          The "did you mean" email prompt has insufficient contrast.
+        </dd>
         <dt>2.2.3: No Timing</dt>
         <dd>
           The volunteer form becomes unsubmittable after a short time,
@@ -1018,9 +1022,20 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           When the form becomes disabled, the toast that appears
           does not grab focus and is not announced.
         </dd>
+        <dd>
+          The "did you mean" email prompt doesn't grab focus and isn't announced.
+        </dd>
       </dl>
 
       <dl slot="wcag3">
+        <dt>Minimum text contrast</dt>
+        <dd>
+          The "did you mean" email prompt has insufficient contrast.
+        </dd>
+        <dt>Error identification</dt>
+        <dd>
+          The "did you mean" email prompt isn't programmatically associated with the error source.
+        </dd>
         <dt>Persistent error notification</dt>
         <dd>
           The timeout notification toast dismisses itself automatically

site/src/pages/museum/volunteer/index.astro

@@ -20,15 +20,41 @@ import Layout from "@/layouts/Layout.astro";
     </label>
     <label
       >Email address
-      <Fixable as="input" fixed={{ type: "email" }} name="email" />
+      <Fixable
+        as="input"
+        broken={{ type: "text" }}
+        fixed={{ type: "email", "aria-describedby": "email-suggestion" }}
+        name="email"
+        id="email"
+      />
     </label>
+    <Fixable
+      as="div"
+      broken={{ class: "email-did-you-mean__broken" }}
+      fixed={{ class: "email-did-you-mean__fixed", role: "alert" }}
+      id="email-suggestion"
+    />
     <label
       >Phone number
       <Fixable as="input" fixed={{ type: "tel" }} name="phone" />
     </label>
     <button type="submit">Submit</button>
   </FormLayout>
 </Layout>
+<style>
+  #email-suggestion {
+    display: none;
+    margin-block-start: -1rem;
+  }
+
+  .email-did-you-mean__broken {
+    color: var(--red-warm-400);
+  }
+
+  .email-did-you-mean__fixed {
+    color: var(--red-warm-500);
+  }
+</style>
 
 <script>
   import { disableInputs } from "@/lib/client/form";
@@ -42,4 +68,21 @@ import Layout from "@/layouts/Layout.astro";
     });
     disableInputs(document.querySelector("main form") as HTMLFormElement);
   }, 60000);
+
+  document.getElementById("email")!.addEventListener("blur", function () {
+    const email = (this as HTMLInputElement).value || "";
+    const suggestion = document.getElementById("email-suggestion")!;
+    if (
+      email &&
+      email.includes("@") &&
+      !email.endsWith("@gmail.com") &&
+      !email.endsWith("@hotmail.com")
+    ) {
+      suggestion.style.display = "block";
+      suggestion.textContent = "Did you mean gmail.com or hotmail.com?";
+    } else {
+      suggestion.style.display = "";
+      suggestion.textContent = "";
+    }
+  });
 </script>