:wheelchair: Some more a11y fixes

app/pages/colophon.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Colophon">
         <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">

app/pages/contact.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Contact information">
         <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>

app/pages/cookies.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Cookie policy">
         <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.

app/pages/cv.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Curriculum Vitae of Andrea Franceschini">
         <article class="body">
             <section id="personal" class="macro">
                 <h2 class="">Personal information</h2>

app/pages/development.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Development">
         <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>

app/pages/eumyths.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="British EU Myths">
         <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>

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template><NuxtLayout name="default">
-    <div class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0">
+    <main class="container mx-auto max-w-screen-xl md:px-12 sm:px-0 px-0" role="main" aria-label="Home page">
         <h3 class="sm:text-5xl text-3xl text-center -mt-6 sm:-mt-16 font-display">
             I do things.
         </h3>
@@ -11,7 +11,7 @@
                 </video></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" title="Title screen for the game Cash or Card?"><figure>
                     <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" />
@@ -38,7 +38,7 @@
             <a href="/writing" class="writing flex-1"><span>Technical Writing</span></a>
             <a href="/contact" class="other flex-1"><span>Something else</span></a>
         </nav>
-    </div>
+    </main>
 </NuxtLayout></template>
 
 <style lang="pcss">

app/pages/research.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Research">
         <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">

app/pages/writing.vue

@@ -2,7 +2,7 @@
     <template #headline>{{ headline }}</template>
     <template #tagline>{{ tagline }}</template>
 
-    <main 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" role="main" aria-label="Writing">
         <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>