feat: add html validation for static sites

components/AppNavbar.vue

@@ -15,7 +15,7 @@ const appConfig = useAppConfig()
         <div class="flex h-16 justify-between">
           <div class="flex">
             <div class="flex shrink-0 items-center">
-              <NuxtLink to="/">
+              <NuxtLink to="/" aria-hidden="true">
                 <img class="h-8 w-auto" src="/logo.webp" width="48" height="48" alt="logo">
               </NuxtLink>
               <!-- <img
@@ -55,6 +55,7 @@ const appConfig = useAppConfig()
               target="_blank"
               title="Twitter"
               class="opacity-75 hover:opacity-100 dark:text-gray-100"
+              aria-label="Go to Twitter"
             >
               <Icon name="iconoir:twitter" class="h-5 w-5" />
             </a>
@@ -64,10 +65,15 @@ const appConfig = useAppConfig()
               target="_blank"
               title="GitHub"
               class="opacity-75 hover:opacity-100 dark:text-gray-100"
+              aria-label="Go to GitHub"
             >
               <Icon name="iconoir:github" class="h-5 w-5" />
             </a>
-            <ColorModeSwitch class="opacity-75 hover:opacity-100 dark:text-gray-100" title="Toggle color mode" />
+            <ColorModeSwitch
+              class="opacity-75 hover:opacity-100 dark:text-gray-100"
+              title="Toggle color mode"
+              aria-hidden="true"
+            />
           </div>
 
           <!-- Mobile menu -->

components/ColorModeSwitch.vue

@@ -4,7 +4,7 @@ const onClick = () => (colorMode.value === 'light' ? (colorMode.preference = 'da
 </script>
 
 <template>
-  <button aria-label="Color Mode" class="action-btn h-12 w-12" @click="onClick">
+  <button type="button" aria-label="Switch color mode" class="action-btn h-12 w-12" @click="onClick">
     <ColorScheme>
       <Icon v-if="colorMode.value === 'dark'" name="line-md:sunny-outline-to-moon-loop-transition" />
       <Icon v-else name="line-md:moon-alt-to-sunny-outline-loop-transition" />

components/content/BlogPostFooter.vue

@@ -20,51 +20,59 @@ const hasTwoAdjacentBlogPosts = computed(() => {
         v-if="prev && prev._path.includes('blog/')"
         class="flex flex-row gap-2 p-1 text-center"
       >
-        <NuxtLink :to="prev._path">
+        <NuxtLink
+          :to="prev._path"
+          aria-hidden="true"
+        >
           <img
             class="my-0 aspect-video max-w-[10rem] rounded-lg object-cover"
-            :src="prev.imageUrl" alt=""
+            :src="prev.imageUrl"
           >
         </NuxtLink>
-        <div class="self-center text-start">
-          <dd class="text-xs">
+        <dl class="self-center text-start">
+          <dt class="text-xs">
             Vorheriger Beitrag
-          </dd>
+          </dt>
           <dd class="text-xl font-bold tracking-tight text-teal-600">
             <NuxtLink
               :to="prev._path"
+              aria-label="Go to previous post"
             >
               {{ prev.title }}
             </NuxtLink>
           </dd>
           <dd class="text-xs">
             {{ prev.description }}
           </dd>
-        </div>
+        </dl>
       </div>
       <div
         v-if="next && next._path.includes('blog/')"
         class="flex flex-row justify-end gap-2 p-1 text-center"
       >
-        <div class="self-center text-end">
-          <dd class="text-xs">
+        <dl class="self-center text-end">
+          <dt class="text-xs">
             Nächster Beitrag
-          </dd>
+          </dt>
           <dd class="text-xl font-bold tracking-tight text-teal-600">
             <NuxtLink
               :to="next._path"
+              aria-label="Go to next post"
             >
               {{ next.title }}
             </NuxtLink>
           </dd>
           <dd class="text-xs">
             {{ next.description }}
           </dd>
-        </div>
-        <NuxtLink :to="next._path">
+        </dl>
+        <NuxtLink
+          :to="next._path"
+          aria-hidden="true"
+        >
           <img
             class="my-0 aspect-video max-w-[10rem] rounded-lg object-cover"
-            :src="next.imageUrl" alt=""
+            :src="next.imageUrl"
           >
         </NuxtLink>
       </div>

components/content/ScrollToTop.vue

@@ -16,6 +16,7 @@ function scrollToTop() {
       :class="{ hidden: isHidden }"
       class="action-btn group fixed right-4 bottom-4 z-50 h-10 w-10 p-1 sm:right-12 sm:bottom-12"
       title="Scroll to top"
+      aria-label="Scroll to top"
       @click="scrollToTop"
     >
       <Icon name="line-md:arrow-small-left" class="rotate-90 text-teal-800 opacity-75 group-hover:opacity-100 dark:text-gray-100" aria-hidden="true" />

layouts/post.vue

@@ -14,11 +14,11 @@ const route = useRoute()
             class="action-btn group mb-8 flex h-10 w-10 lg:absolute  lg:-left-10"
             :to="route.path.split('/').slice(0, -1).join('/') || '/'"
             title="Back to blog"
+            aria-label="Go back to blog"
           >
             <Icon
               name="line-md:arrow-small-left"
               class="text-teal-800 opacity-75 group-hover:opacity-100 dark:text-gray-100"
-              aria-hidden="true"
             />
           </NuxtLink>
           <article>

nuxt.config.ts

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
     '@nuxt/image-edge',
     '@nuxtjs/color-mode',
     '@nuxtjs/critters',
+    '@nuxtjs/html-validator',
     '@nuxtjs/plausible',
     '@nuxtjs/robots',
     '@nuxtjs/tailwindcss',
@@ -41,6 +42,15 @@ export default defineNuxtConfig({
       theme: 'vitesse-dark',
     },
   },
+  htmlValidator: {
+    logLevel: 'verbose',
+    failOnError: false,
+    options: {
+      rules: {
+        'attribute-empty-style': 'off',
+      },
+    },
+  },
   image: {
     presets: {
       blogImg: {

package.json

@@ -32,6 +32,7 @@
     "@antfu/eslint-config": "^0.36.0",
     "@nuxt/devtools": "^0.2.5",
     "@nuxt/image-edge": "1.0.0-27954023.4cee565",
+    "@nuxtjs/html-validator": "^1.2.4",
     "@nuxtjs/plausible": "0.2.0",
     "@types/node": "^18.14.6",
     "eslint": "8.35.0",