:wheelchair: Some more a11y

app/components/CookieMonster.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside id="cookie_monster" role="dialog" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
+    <aside id="cookie_monster" role="dialog" 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>
@@ -26,7 +26,7 @@
                 </div>
             </div>
         </div>
-        <button v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" @click="isOpen = true">
+        <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>

app/components/TopBanner.vue

@@ -9,8 +9,8 @@
                 </ClientOnly>
             </a>
             <div v-if="!isIndexPage">
-                <div class="headline sm:ml-52 ml-24 pt-2 sm:pt-4"><h1 class="sm:text-4xl text-3xl text-white"><slot name="headline">Default Headline from TopBanner</slot></h1></div>
-                <div class="subheadline sm:ml-56 ml-28"><h2 class="sm:text-2xl text-xl text-white"><slot name="tagline">Default tagline from TopBanner</slot></h2></div>
+                <div class="headline sm:ml-52 ml-24 pt-2 sm:pt-4"><span class="sm:text-4xl text-3xl text-white"><slot name="headline">Default Headline from TopBanner</slot></span></div>
+                <div class="subheadline sm:ml-56 ml-28"><span class="sm:text-2xl text-xl text-white"><slot name="tagline">Default tagline from TopBanner</slot></span></div>
             </div>
             <div v-if="isIndexPage" class="ml-2">
                 <div class="headline sm:-ml-48 -ml-36 pt-3 sm:pt-4 text-center"><h1 class="sm:text-3xl text-2xl text-white">Hello</h1></div>
@@ -60,6 +60,7 @@ body {
     
         .headline, .subheadline {
             text-shadow: 0px 0px 8px var(--color-sky-900);
+            font-family: Oswald;
         }
 
         .cubetti_bg {

app/pages/cv.vue

@@ -314,6 +314,10 @@
 
     .body > section {
         padding-bottom: theme(spacing.6);
+
+        & > section {
+            border-left-color: theme(color.sky.100);
+        }
     }
 }
 </style>

app/pages/index.vue

@@ -10,7 +10,7 @@
                         <source src="/images/gneg.mp4" type="video/mp4" />
                         Your browser does not support the video tag.
                     </video>
-                    <caption class="hidden">Title card for project EduGames</caption>
+                    <span class="hidden">Read more about the EduGames project</span>
                 </a>
             </div>
             <div class="aspect-w-16 aspect-h-9 shadow-lg">
@@ -20,8 +20,7 @@
                         <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" />
                     </picture>
-                    <caption class="hidden">Title screen for the game "Cash or Card?"</caption>
-                </figure></a>
+                </figure><span class="hidden">Go play "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>