:wheelchair: Added a bunch of accessibility fixes

app/components/CookieMonster.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="cookie_monster" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
+    <aside id="cookie_monster" role="dialog" :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>
@@ -20,16 +20,16 @@
                     <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
                 </div>
                 <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-                    <button class="btn btn-success" @click="acceptMyChoice">Accept my choice</button>
-                    <button class="btn btn-info btn-outline" @click="acceptAll">Accept all cookies</button>
-                    <button class="btn btn-error text-white" @click="rejectAll">Reject all cookies</button>
+                    <button class="btn btn-success" @click="acceptMyChoice" role="button">Accept my choice</button>
+                    <button class="btn btn-info btn-outline" @click="acceptAll" role="button">Accept all cookies</button>
+                    <button class="btn btn-error text-white" @click="rejectAll" role="button">Reject all cookies</button>
                 </div>
             </div>
         </div>
         <div v-else class="fixed max-w-0 bottom-2 sm:right-16 right-11 cursor-pointer" @click="isOpen = true">
             <ClientOnly><fa-icon icon="fa-solid fa-cookie-bite" class="sm:text-6xl text-4xl text-sky-500" /></ClientOnly>
         </div>
-    </div>
+    </aside>
 </template>
 
 <script lang="ts" setup>

app/components/Cubetti.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="cubetti" ref="cubetti" />
+    <figure id="cubetti" ref="cubetti" />
 </template>
 
 <style lang="pcss" scoped>
@@ -38,7 +38,7 @@
         WebGLRenderer,
         MathUtils,
         LinearToneMapping,
-    } from 'three' // from 'three/src/lights/AmbientLight';
+    } from 'three';
     import { animate, stagger, type AnimationParams } from 'animejs';
 
     const scene = new Scene()

app/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container mx-auto max-w-screen-lg sm:px-6 px-2">
+    <footer role="contentinfo" class="container mx-auto max-w-screen-lg sm:px-6 px-2">
         <div class="text-white grid grid-cols-3 py-6">
             <div class="col-start-1 col-span-3 sm:col-span-1">
                 <p><a href="/colophon"><client-only><fa-icon icon="fa-regular fa-circle-question" class="pr-2" /></client-only>About this site…</a></p>
@@ -9,7 +9,7 @@
                 <p class="mt-2 sm:mt-0 sm:text-right"><client-only><fa-icon icon="fa-regular fa-copyright" class="pr-2" /></client-only>Unless otherwise specified, the content of this site is licensed as <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>
             </div>
         </div>
-    </div>
+    </footer>
 </template>
 
 <style lang="pcss" scoped>

app/components/MainMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav id="main_menu" class="order-last bg-black print:hidden">
+    <nav id="main_menu" role="navigation" class="order-last bg-black print:hidden">
         <div class="inner_box overflow-x-scroll overflow-y-hidden whitespace-no-wrap border-b-[1px] border-b-slate-700">
         <ul class="flex md:px-0 py-2 justify-start ti:justify-around mx-auto max-w-screen-md">
             <li class="ml-0"><a href="/" class="text-white pr-3">Home</a></li>

app/components/TopBanner.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="`top_banner print:hidden page ${pageClasses.join(' ')}`">
+    <header :class="`top_banner print:hidden page ${pageClasses.join(' ')}`" role="banner">
         <div class="container mx-auto max-w-screen-xl z-10">
             <a href="/">
                 <ClientOnly>
@@ -17,7 +17,7 @@
                 <div class="subheadline ml-14 -mt-8 text-center"><h2 class="sm:text-5xl text-4xl text-white">I'm Andrea</h2></div>
             </div>
         </div>
-    </div>
+    </header>
 </template>
 
 <style lang="pcss">
@@ -59,7 +59,7 @@ body {
         position: relative;
     
         .headline, .subheadline {
-            text-shadow: 0px 0px 4px var(--color-sky-900);
+            text-shadow: 0px 0px 8px var(--color-sky-900);
         }
 
         .cubetti_bg {

app/error.vue

@@ -8,7 +8,7 @@
             <ClientOnly><CookieMonster /></ClientOnly>
             <MainMenu />
 
-            <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+            <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
                 <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
                     <h3 class="text-5xl text-center -mt-6 sm:-mt-16">
                         Sorry, I messed up.
@@ -29,7 +29,7 @@
 
                     <p>&nbsp;</p><p>&nbsp;</p>
                 </article>
-            </div>
+            </main>
         </div>
         <Footer />
     </div>

app/layouts/default.vue

@@ -1,17 +1,15 @@
 <template>
-    <div>
-        <!-- <Breakpoint /> -->
-        <TopBanner>
-            <template #headline><slot name="headline">Default Headline from layout</slot></template>
-            <template #tagline><slot name="tagline">Default Tagline from layout</slot></template>
-        </TopBanner>
-        <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
-            <ClientOnly><CookieMonster /></ClientOnly>
-            <MainMenu />
-            <slot />
-        </div>
-        <Footer />
+    <!-- <Breakpoint /> -->
+    <TopBanner>
+        <template #headline><slot name="headline">Default Headline from layout</slot></template>
+        <template #tagline><slot name="tagline">Default Tagline from layout</slot></template>
+    </TopBanner>
+    <div id="content_box" :class="`flex flex-col bg-white pt-12 sm:pt-24`">
+        <ClientOnly><CookieMonster /></ClientOnly>
+        <MainMenu />
+        <slot />
     </div>
+    <Footer />
 </template>
 
 <style lang="pcss">

app/pages/404.vue

@@ -2,13 +2,13 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <p>Things come, things go. The page you were looking for must have gone.</p>
             <p>Sorry.</p>
             <p>You can <a href="contact">let me know</a> and I'll do my best to fix this!</p>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script setup>

app/pages/cbprivacy.vue

@@ -2,7 +2,7 @@
 	<template #headline>{{ headline }}</template>
 	<template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <p><strong>🇬🇧 English</strong></p>
 			<p>Circular Bells does not collect personal data without your consent.</p>
@@ -23,7 +23,7 @@
 			<p><strong>Esto puede cambiar en el futuro y se le informará si esto sucede.</strong></p>
 			<p>&nbsp;</p>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/colophon.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Colophon</h2>
             <section class="col-span-1 sm:col-span-2">
@@ -35,7 +35,7 @@
                 </ul>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/contact.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 mb-12 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="links">
                 <p>You can find me on these web sites…</p>
@@ -32,7 +32,7 @@
                 <p>… or drop me an email at<br /><a :href="`mailto:${emailUser}\u0040${emailDomain}`"><client-only><fa-icon icon="fa fa-envelope" alt="Email" aria-hidden="true" /></client-only>&ensp;{{emailUser}}{{'\u0040'}}{{emailDomain}}</a></p>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <style lang="pcss" scoped>

app/pages/cookies.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="col-span-1 sm:col-span-2 pb-8">
                 <p><strong>Cookies are not always bad</strong>. Sometimes they are bad, sometimes they are useful.
@@ -25,7 +25,7 @@
                     platform is, but I may end up going back to Google in the future.</p>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/cv.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body">
             <section id="personal" class="macro">
                 <h2 class="">Personal information</h2>
@@ -300,7 +300,7 @@
                 </div>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <style lang="pcss" scoped>

app/pages/development.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full col-start-1 sm:col-span-2">
                 <p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>
@@ -267,7 +267,7 @@
                 <p class="calltoaction">Have a cool project in mind? <a href="/contact">Let's talk about it!</a></p>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/eumyths.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <h2>British EU Myths</h2>
             <h3><strong>A <a href="https://en.wikipedia.org/wiki/Internet_bot">bot</a> that <a href="https://en.wikipedia.org/wiki/Debunker">debunks</a> <a href="https://en.wikipedia.org/wiki/Fake_news">fake news</a></strong></h3>
@@ -23,7 +23,7 @@
             <p><sup>**</sup> This turned out to be false. However, what happened is much, much worse.</p>
             <p>&nbsp;</p>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/index.vue

@@ -32,12 +32,12 @@
                 <ScrollDownSVG />
             </span>
         </h3>
-        <div id="home_bars" class="flex flex-row sm:max-w-screen-lg mx-auto">
+        <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>
-        </div>
+        </nav>
     </div>
 </NuxtLayout></template>
 

app/pages/qualia.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid grid-cols-1 gap-x-12 gap-y-0">
             <h2>Qualia Computing</h2>
             <p>On the 13<sup>th</sup> of May 2020, I woke up to find an email from <a href="https://www.linkedin.com/in/nicholas-rayner-2251903a/?originalSubdomain=uk">Nicholas Rayner</a> about this project of his, Qualia Computing.
@@ -31,7 +31,7 @@
             <p>&raquo; <a href="/files/qualia/Qualia Computing email 02.pdf">Read the second message</a>.</p>
             <p>The saga continues.<br />Last updated: 2020-05-29 10:00 BST.</p>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/research.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <h2>Current research</h2>
             <section class="sm:col-start-1">
@@ -61,7 +61,7 @@
                 <p class="calltoaction">Curious? <a href="/contact">Get in touch!</a></p>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>

app/pages/writing.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <div class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
+    <main class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose">
         <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
             <section class="full sm:col-span-2">
                 <p>Did you know that researchers spend about half of their professional lives doing academic and technical writing? For example, research students spend at least a third of their studies writing their theses, without counting papers, and bids for grants.</p>
@@ -53,7 +53,7 @@
                 <p class="calltoaction">Need something written? <a href="/contact">Get in touch!</a></p>
             </section>
         </article>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <script lang="ts" setup>