:wheelchair: Some more a11y

app/components/CookieMonster.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside id="cookie_monster" role="dialog" aria-label="Cookie Preferences" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
+    <dialog id="cookie_monster" aria-label="Cookie Preferences" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
         <div v-if="isOpen" class="fixed bottom-2 right-2 left-2 sm:w-10/12 max-w-screen-md sm:mx-auto">
             <div class="border-2 bg-white border-sky-700 px-4 pt-3 pb-4 overflow-scroll">
                 <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /></client-only>
@@ -29,7 +29,7 @@
         <button v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" aria-label="Open Cookie Preferences" @click="isOpen = true">
             <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
         </button>
-    </aside>
+    </dialog>
 </template>
 
 <script lang="ts" setup>

app/components/ScrollDownSVG.vue

@@ -1,5 +1,5 @@
 <template>
-    <svg width="50" height="50" viewBox="0 0 13.229166 13.229167" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <svg aria-hidden="true" focusable="false" width="50" height="50" viewBox="0 0 13.229166 13.229167" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
         <defs id="defs2" />
         <g
             id="layer1">

app/pages/index.vue

@@ -6,21 +6,21 @@
         <div class="grid sm:grid-cols-2 gap-6 mx-auto sm:py-8 py-6 col">
             <div class="aspect-w-16 aspect-h-9 shadow-lg">
                 <a href="https://edugames.andreafranceschini.org/">
-                    <video autoplay loop muted class="rounded">
+                    <video autoplay loop muted class="rounded" aria-hidden="true">
                         <source src="/images/gneg.mp4" type="video/mp4" />
                         Your browser does not support the video tag.
                     </video>
-                    <span class="hidden">Read more about the EduGames project</span>
+                    <span class="sr-only">Read more about the EduGames project</span>
                 </a>
             </div>
             <div class="aspect-w-16 aspect-h-9 shadow-lg">
-                <a href="https://edugames.andreafranceschini.org/cash-or-card"><figure>
+                <a href="https://edugames.andreafranceschini.org/cash-or-card"><figure aria-hidden="true">
                     <picture>
                         <source srcset="/images/cash_or_card-2x.webp" type="image/webp" />
                         <source srcset="/images/cash_or_card.jpg 1x, /images/cash_or_card-2x.jpg 2x" type="image/jpeg" />
-                        <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Circular Bells" />
+                        <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Cash or Card? title screen" />
                     </picture>
-                </figure><span class="hidden">Go play "Cash or Card?"</span></a>
+                </figure><span class="sr-only">Play the game "Cash or Card?"</span></a>
             </div>
             <!-- <div class="aspect-w-16 aspect-h-9 shadow-lg hidden sm:block">
                 <iframe ref="video" lang="en" loading="lazy" data-src="https://www.youtube-nocookie.com/embed/AszBiqrvAaU" title="How to make your computer go BOOP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -36,10 +36,12 @@
             </span>
         </h3>
         <nav id="home_bars" class="flex flex-row sm:max-w-screen-lg mx-auto">
-            <a href="/research" class="research flex-1"><span>Research</span></a>
-            <a href="/development" class="development flex-1"><span>Development</span></a>
-            <a href="/writing" class="writing flex-1"><span>Technical Writing</span></a>
-            <a href="/contact" class="other flex-1"><span>Something else</span></a>
+            <ul class="contents">
+                <li class="contents"><a href="/research" class="research flex-1"><span>Research</span></a></li>
+                <li class="contents"><a href="/development" class="development flex-1"><span>Development</span></a></li>
+                <li class="contents"><a href="/writing" class="writing flex-1"><span>Technical Writing</span></a></li>
+                <li class="contents"><a href="/contact" class="other flex-1"><span>Something else</span></a></li>
+            </ul>
         </nav>
     </main>
 </NuxtLayout></template>
@@ -66,6 +68,11 @@
     }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .scroll-down svg { animation: none !important; }
+  video[autoplay] { animation: none !important; }
+}
+
 html.no-webp {
     #home_bars a {
         &.research {
@@ -82,6 +89,12 @@ html.no-webp {
         }
     }
 }
+
+#home_bars a:focus-visible {
+  outline: 3px solid #000;
+  outline-offset: 4px;
+}
+
 #home_bars {
     a {
         width: 25%;
@@ -90,6 +103,7 @@ html.no-webp {
         margin: 0;
         position: relative;
         background: grey;
+        text-shadow: 0px 0px 4px black;
 
         &.research {
             background-image: url(../images/home-research-2x.webp);
@@ -149,6 +163,17 @@ useHead({
     ]
 });
 
+onMounted(() => {
+  const m = window.matchMedia('(prefers-reduced-motion: reduce)');
+  if (m.matches) {
+    document.querySelectorAll<HTMLVideoElement>('video[autoplay]').forEach(v => {
+      v.pause();
+      v.removeAttribute('autoplay');
+      v.removeAttribute('loop');
+    });
+  }
+});
+
 // const video = ref<HTMLIFrameElement>();
 
 // onMounted(() => {