Improve accessibility (#35)

* improve accesibility by adding aria label property to links * add aria label for the dropdown icon in the header
wuletawwonte · Mar 3, 2024 · 90b858b · 90b858b
1 parent 2e5d856
commit 90b858b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/components/Article.vue b/components/Article.vue
@@ -15,7 +15,7 @@ const year = ref(dateObject.getFullYear());
 </script>
 
 <template>
-  <div class="group flex items-center">
+  <li class="group flex items-center">
     <div class="flex flex-col items-center border-r-2 px-4">
       <b>{{ month }}</b>
       <b>{{ day }}</b>
@@ -28,7 +28,7 @@ const year = ref(dateObject.getFullYear());
       >
         {{ title }}</nuxt-link
       >
-      <p class="text-gray-500">{{ excerpt }}</p>
+      <p class="text-base-content">{{ excerpt }}</p>
     </div>
-  </div>
+  </li>
 </template>
diff --git a/components/Header.vue b/components/Header.vue
@@ -11,7 +11,12 @@ const toggleColorMode = (e: Event) => {
   <div class="navbar fixed z-10 bg-base-100 pr-4 shadow lg:px-24">
     <div class="navbar-start">
       <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-link lg:hidden">
+        <div
+          tabindex="0"
+          role="button"
+          class="btn btn-link lg:hidden"
+          aria-label="dropdown menu"
+        >
           <Icon
             name="material-symbols:menu"
             class="h-6 w-6 text-base-content"
@@ -44,6 +49,7 @@ const toggleColorMode = (e: Event) => {
         to="https://github.com/wuletawwonte/wuletawwonte.com"
         target="_blank"
         class="btn btn-circle btn-link btn-sm"
+        aria-label="codebase link"
       >
         <Icon name="line-md:github-loop" class="h-6 w-6 text-base-content" />
       </nuxt-link>
@@ -52,6 +58,7 @@ const toggleColorMode = (e: Event) => {
           type="checkbox"
           @change="toggleColorMode"
           :checked="colorMode.preference === 'dark'"
+          aria-label="Toggle dark mode"
         />
         <Icon name="material-symbols-light:sunny" class="swap-on h-6 w-6" />
         <Icon

diff --git a/components/RecentArticles.vue b/components/RecentArticles.vue
@@ -22,7 +22,7 @@ const articles = await queryContent("blog").where({draft: {$eq: false}}).limit(5
       to="/blog"
       class="mt-8 flex items-center self-start text-xl text-primary text-opacity-80 hover:text-opacity-100 active:outline-dotted active:outline-2 active:outline-offset-2"
     >
-      <span>All Articles</span>
+      <span class="text-primary">All Articles</span>
       <Icon name="fa6-solid:angle-right" class="ml-1 h-4 w-4" />
     </nuxt-link>
   </div>