diff --git a/app.vue b/app.vue
index 849c4c48..7f70b999 100644
--- a/app.vue
+++ b/app.vue
@@ -17,6 +17,11 @@ html {
   @apply antialiased bg-brand-4;
 }
 
+/* Add global focus styles */
+:focus-visible {
+  @apply outline-none ring-2 ring-brand-1 ring-offset-2 rounded ring-offset-transparent;
+}
+
 p a {
   @apply transform decoration-1 decoration-gray/50 underline underline-offset-3;
 }
diff --git a/components/Blog/Card.vue b/components/Blog/Card.vue
index 1ce19726..b1403c4a 100644
--- a/components/Blog/Card.vue
+++ b/components/Blog/Card.vue
@@ -11,14 +11,12 @@ defineProps<{
 <template>
   <Card class="blog-card overflow-clip">
     <template #header>
-      <AppLink :href="item.link" class="aspect-ratio-video overflow-hidden">
-        <img
-          :src="item.images?.[0]"
-          loading="lazy"
-          :alt="item.title"
-          class="h-full w-full object-cover object-left"
-        >
-      </AppLink>
+      <img
+        :src="item.images?.[0]"
+        loading="lazy"
+        :alt="item.title"
+        class="h-full w-full object-cover object-left"
+      >
     </template>
     <article>
       <AppLink :href="item.link" style="display:block">
@@ -29,7 +27,7 @@ defineProps<{
           <time class="h5 text-sm" :datetime="item.pubDate">
             {{ useAppDateFormat(item.pubDate) }}
           </time>
-          <p v-if="showSnippet" class="text-base p1 break-words">
+          <p v-if="showSnippet" class="break-words text-base p1">
             {{ item.snippet }}
           </p>
         </div>
diff --git a/components/Carousel.vue b/components/Carousel.vue
index 9a0cd1e7..499d56e5 100644
--- a/components/Carousel.vue
+++ b/components/Carousel.vue
@@ -40,6 +40,7 @@ useEventListener(el, 'mouseup', onMouseUp)
 <template>
   <div
     ref="el"
+    tabindex="-1"
     class="carousel" :style="{
       cursor: isDragging ? 'grabbing' : 'grab',
       scrollSnapType: isDragging ? '' : '',
diff --git a/components/EcosystemCard.vue b/components/EcosystemCard.vue
index efd76797..fe5021e1 100644
--- a/components/EcosystemCard.vue
+++ b/components/EcosystemCard.vue
@@ -54,7 +54,11 @@ function getIcon(icon?: string, hostname?: string) {
       <div v-if="description" class="flex items-center gap-1 lh-none">
         Read More<AppIcon i="i-carbon:arrow-right" />
       </div>
-      <AppLink :href="action?.href" class="back absolute inset-0 flex flex-col gap-4 p-4 opacity-0 backdrop-blur-xl transition-all">
+      <AppLink
+        :href="action?.href"
+        class="back absolute inset-0 flex flex-col gap-4 p-4 opacity-0 backdrop-blur-xl transition-all"
+        tabindex="0"
+      >
         <div class="mt-a flex">
           {{ description }}
         </div>
diff --git a/components/Header.vue b/components/Header.vue
index 8285615c..d0076a33 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -67,7 +67,13 @@ function toggleMobileMenu() {
   >
     <Notice v-bind="useAppConfig().notice" />
     <div class="grid-margins h-20 flex items-center justify-between transition-all">
-      <AppLink class="ident transition" href="/" title="">
+      <AppLink
+        class="ident transition"
+        href="/"
+        title="Storacha Home"
+        aria-label="Storacha Home"
+        tabindex="0"
+      >
         <Ident :site-name="siteName" class="ident h-10 translate-x--1rem" :invert="nav.mobileActive" />
       </AppLink>
       <nav class="navbar hidden justify-right gap-1 b-2 b-brand-3 md:flex">