diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
index aae50c8..d15a1e5 100644
--- a/components/sidebars/collapsible-aside.vue
+++ b/components/sidebars/collapsible-aside.vue
@@ -1,5 +1,5 @@
 <template>
-    <aside v-bind="$props"
+    <aside v-bind="$props" role="complementary"
         :class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
         <OverlayScrollbarsComponent :defer="true"
             class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 25d5aa1..08a191b 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -1,6 +1,7 @@
 <template>
     <aside
-        class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500">
+        class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500"
+        role="complementary">
         <NuxtLink href="/">
             <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
                 src="/logo.webp" alt="Lysand logo" />