:wheelchair: IBM Equal Access shows 0 violations

app/assets/css/main.css

@@ -79,9 +79,10 @@ a {
         width: 100%;
         bottom: 0;
         font-size: .75rem;
+        font-weight: bold;
         color: #fff;
         line-height: 1.75rem;
-        background: rgba(0,0,0,.5);
+        background: rgba(0,0,0,.666);
         padding: 0 theme("spacing.3") .2em theme("spacing.3");
         border-bottom-right-radius: .25rem;
         border-bottom-left-radius: .25rem;

app/components/CookieMonster.vue

@@ -2,19 +2,19 @@
     <dialog :open="isOpen" closedby="any" id="cookie_monster" aria-label="Cookie Preferences" :class="`print:hidden z-50 ${isOpen ? 'mix-blend-normal' : 'mix-blend-difference'}`">
         <div 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>
+                <client-only><fa-icon :icon="['fas', 'circle-xmark']" class="text-error text-4xl float-right" @click="isOpen = false" /><span class="sr-only">Close dialog</span></client-only>
                 <div class="pb-4">
                     <p>I use <strong>cookies</strong> for <a href="/cookies">reasons</a>. Please read the reasons before setting your preferences.</p>
                     <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
-                        <p><input type="checkbox" class="form-control toggle toggle-primary" checked disabled aria-label="Consent cookie required" aria-describedby="cookie-consent-toggle" /></p>
+                        <p><input type="checkbox" class="form-control toggle toggle-primary" checked disabled aria-label="Consent cookie" aria-describedby="cookie-consent-toggle" /></p>
                         <p id="cookie-consent-toggle" class="col-span-5 sm:col-span-11"><strong>Consent</strong>: I must use a cookie to keep track of your choices, no way around it.</p>
                     </div>
                     <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
-                        <p><input type="checkbox" class="form-control toggle toggle-primary" aria-label="Enable analytics cookies" aria-describedby="cookie-analytics-toggle" v-model="consentStore.analytics" @change="(e: Event) => consentStore.analytics = (e.target as HTMLInputElement).checked " /></p>
-                        <p id="cookie-analytics-toggle" class="col-span-5 sm:col-span-11"><strong>Analytics</strong>: optional, but it'd be great if you agreed 😊</p>
+                        <p><input type="checkbox" class="form-control toggle toggle-primary" aria-label="Analytics cookies" aria-describedby="cookie-analytics-toggle" v-model="consentStore.analytics" @change="(e: Event) => consentStore.analytics = (e.target as HTMLInputElement).checked " /></p>
+                        <p id="cookie-analytics-toggle" class="col-span-5 sm:col-span-11"><strong>Analytics</strong>: optional, but it'd be great if you agreed <abbr title="smile">😊</abbr></p>
                     </div>
                     <div class="sm:pl-4 pt-2 grid sm:grid-cols-12 grid-cols-6">
-                        <p><input type="checkbox" class="form-control toggle toggle-primary" aria-label="Enable advertising labels (although currently unused)" aria-describedby="cookie-advertising-toggle" v-model="consentStore.ads" @change="(e: Event) => consentStore.ads = (e.target as HTMLInputElement).checked" /></p>
+                        <p><input type="checkbox" class="form-control toggle toggle-primary" aria-label="Advertising cookies (currently unused)" aria-describedby="cookie-advertising-toggle" v-model="consentStore.ads" @change="(e: Event) => consentStore.ads = (e.target as HTMLInputElement).checked" /></p>
                         <p id="cookie-advertising-toggle" class="col-span-5 sm:col-span-11"><strong>Advertising</strong>: fully optional, feel free to skip this one.</p>
                     </div>
                     <p class="pt-2">You can read more on how I use cookies on <a href="/cookies">this page</a>.</p>
@@ -27,10 +27,11 @@
             </div>
         </div>
     </dialog>
-    <button v-if="!isOpen" 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>
-
+    <div role="region" aria-label="Cookie Preferences">
+        <button v-if="!isOpen" 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>
+    </div>
 </template>
 
 <script lang="ts" setup>

app/components/Footer.vue

@@ -6,7 +6,7 @@
                 <p class="hidden"><a rel="me" href="https://livellosegreto.it/@morpheu5">Me on Mastodon</a></p>
             </div>
             <div class="col-start-1 col-span-2 sm:col-start-2 sm:col-span-2">
-                <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>
+                <p class="mt-2 sm:mt-0 sm:text-right"><client-only><fa-icon icon="fa-regular fa-copyright" class="pr-2" alt="Copyright" /></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>
     </footer>

app/components/MainMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav id="main_menu" role="navigation" class="order-last bg-black print:hidden">
+    <nav id="main_menu" aria-label="Primary menu" 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,6 @@
 <template>
     <header :class="`top_banner print:hidden page ${pageClasses.join(' ')}`">
+        <div class="backdrop-blur-xs pb-2">
         <div class="container mx-auto max-w-screen-xl z-10">
             <a href="/">
                 <ClientOnly>
@@ -10,15 +11,17 @@
             </a>
             <div v-if="!isIndexPage">
                 <a href="#main" class="skip sr-only">Skip to main content</a>
-                <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>
+                <h1>
+                    <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>
+                </h1>
             </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>
                 <div class="subheadline ml-14 -mt-8 text-center"><h2 class="sm:text-5xl text-4xl text-white">I'm Andrea</h2></div>
                 <a href="#main" class="skip sr-only">Skip to main content</a>
             </div>
-        </div>
+        </div></div>
     </header>
 </template>
 

app/error.vue

@@ -9,9 +9,9 @@
 
         <main id="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">
+                <h2 class="text-5xl text-center -mt-6 sm:-mt-16">
                     Sorry, I messed up.
-                </h3>
+                </h2>
 
                 <p class="pt-12 py-6">Please copy the following error report and <a href="/contact" class="text-sky-500 underline">get in touch</a>.</p>
 

app/pages/contact.vue

@@ -7,25 +7,25 @@
             <section class="links">
                 <p>You can find me on these web sites…</p>
                 <div class="text-center ml-2">
-                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only><span class="hidden">MorphLog</span></a>
-                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only><span class="hidden">ORCID</span></a>
-                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only><span class="hidden">LinkedIn</span></a>
-                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only><span class="hidden">GitHub</span></a>
+                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only><span class="sr-only">MorphLog</span></a>
+                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only><span class="sr-only">ORCID</span></a>
+                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only><span class="sr-only">LinkedIn</span></a>
+                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only><span class="sr-only">GitHub</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only><span class="hidden">Apple App Store</span></a>
-                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only><span class="hidden">Google Play Store</span></a>
-                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only><span class="hidden">Twitter</span></a>
-                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" style="color: #6364FF" aria-hidden="true" /></client-only><span class="hidden">Mastodon</span></a>
+                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only><span class="sr-only">Apple App Store</span></a>
+                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only><span class="sr-only">Google Play Store</span></a>
+                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only><span class="sr-only">Twitter</span></a>
+                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" style="color: #6364FF" aria-hidden="true" /></client-only><span class="sr-only">Mastodon</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only><span class="hidden">Instagram</span></a>
-                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only><span class="hidden">Flickr</span></a>
-                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only><span class="hidden">SoundCloud</span></a>
+                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only><span class="sr-only">Instagram</span></a>
+                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only><span class="sr-only">Flickr</span></a>
+                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only><span class="sr-only">SoundCloud</span></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only><span class="hidden">YouTube</span></a>
-                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only><span class="hidden">DeviantArt</span></a>
+                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only><span class="sr-only">YouTube</span></a>
+                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only><span class="sr-only">DeviantArt</span></a>
                 </div>
             </section>
             <section class="email">

app/pages/development.vue

@@ -37,7 +37,7 @@
                 <p>Enough talk, let's see some of the projects I worked on over the years.</p>
             </section>
 
-            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_cashorcard">
+            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_adriarattle">
                 <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                     <h3>Adria's rattle</h3>
                 </section>
@@ -54,7 +54,7 @@
                 </section>
             </section>
 
-            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_rfk2d">
+            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_autoritratto">
                 <section class="_left sm:float-left sm:w-1/2 sm:pr-2 ">
                     <h3><em>Autoritratto per 4 camere e 4 voci</em></h3>
                     <p>Michele Sambin, 1977</p>

app/pages/index.vue

@@ -35,7 +35,7 @@
                 <ScrollDownSVG />
             </span>
         </h3>
-        <nav id="home_bars" class="flex flex-row sm:max-w-screen-lg mx-auto">
+        <nav id="home_bars" aria-label="Secondary menu" class="flex flex-row sm:max-w-screen-lg mx-auto">
             <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>

app/pages/research.vue

@@ -76,7 +76,7 @@ const title = `${headline} ••• Andrea Franceschini, PhD`;
 const keywords = "research, science, qualitative, quantitative, experiments, music, learning, tabletop, research, the open university, university of cambridge, isaac physics, reactable";
 const description = "Science!";
 
-useState('top-banner-image', () => '/images/banner_research-2x.webp');
+// useState('top-banner-image', () => '/images/banner_research-2x.webp');
 useState('pageClasses', () => ['research', 'page']);
 useHead({
     title,

nuxt.config.ts

@@ -7,13 +7,13 @@ export default defineNuxtConfig({
     app: {
         head: {
             htmlAttrs: {
-                lang: 'en'
+                lang: 'en',
             },
             noscript: [
                 { innerHTML: `<div class="noscript">
                         <center>Hi.</center>
                         First of all: I am <strong>genuinely</strong> interested to know why you disabled JavaScript
-                        so <a href="/contact">please send me an e-mail</a> — no judgement.<br />
+                        so <a href="mailto:andrea.franceschini@gmail.com">please send me an e-mail</a> — no judgement.<br />
                         Second: yes, I hate it too, but in this day and age JavaScript is kinda ubiquitous so I caved in.
                         I am still making an effort but this site may look a bit weird and hardly usable without JS. Sorry…
                     <noscript><p><img src="https://merida.morpheu5.net/balmyogre?idsite=1&amp;rec=1" style="border:0;" alt="" /></p></noscript>
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
         },
     },
     compatibilityDate: '2025-07-15',
-    devtools: { enabled: true },
+    devtools: { enabled: false },
     sourcemap: process.dev || false,
     components: true,
     telemetry: false,