diff --git a/README.md b/README.md
index 549466d16d..3238b58955 100644
--- a/README.md
+++ b/README.md
@@ -26,9 +26,9 @@ Presentation <b>slide</b>s for <b>dev</b>elopers 🧑‍💻👩‍💻👨‍
 <table>
 <tbody>
 <td align="center">
-<img width="2000" height="0"><br>
+<img width="2000" height="0" alt="" aria-hiden><br>
 <sub>Made possible by my <a href="https://github.com/sponsors/antfu">Sponsor Program 💖</a></sub><br>
-<img width="2000" height="0">
+<img width="2000" height="0" alt="" aria-hiden>
 </td>
 </tbody>
 </table>
@@ -93,7 +93,7 @@ This project is made possible by all the sponsors supporting my work:
 
 <p align="center">
   <a href="https://github.com/sponsors/antfu">
-    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
+    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt="Logos from Sponsors" />
   </a>
 </p>
 
diff --git a/demo/composable-vue/components/VueUse.vue b/demo/composable-vue/components/VueUse.vue
index 535c5eadb7..6ea531107d 100644
--- a/demo/composable-vue/components/VueUse.vue
+++ b/demo/composable-vue/components/VueUse.vue
@@ -6,7 +6,7 @@ defineProps<{
 
 <template>
   <div class="px-2 -mx-2 mt-4 py-2">
-    <img src="https://vueuse.org/favicon.svg" class="h-1em -mb-0.5 mr-2 inline-block align-baseline">
+    <img src="https://vueuse.org/favicon.svg" class="h-1em -mb-0.5 mr-2 inline-block align-baseline" alt="">
     <span class="opacity-50">Avaliable in VueUse: </span><a class="font-mono opacity-75 hover:opacity-100" :href="`https://vueuse.org/${name}`">{{ name }}</a>
   </div>
 </template>
diff --git a/demo/composable-vue/slides.md b/demo/composable-vue/slides.md
index 50f257e51f..6053567b76 100644
--- a/demo/composable-vue/slides.md
+++ b/demo/composable-vue/slides.md
@@ -24,7 +24,7 @@ Anthony Fu
 </div>
 
 <div class="abs-bl mx-14 my-12 flex">
-  <img src="https://2020.vueday.it/img/themes/vueday/vueday-logo.png" class="h-8">
+  <img src="https://2020.vueday.it/img/themes/vueday/vueday-logo.png" class="h-8" alt="">
   <div class="ml-3 flex flex-col text-left">
     <div><b>Vue</b>Day</div>
     <div class="text-sm opacity-50">Apr. 29th, 2021</div>
@@ -53,7 +53,7 @@ A fanatical full-time open sourceror.<br>
   <div><a href="https://antfu.me" target="_blank">antfu.me</a></div>
 </div>
 
-<img src="https://antfu.me/avatar.png" class="rounded-full w-40 abs-tr mt-16 mr-12"/>
+<img src="https://antfu.me/avatar.png" class="rounded-full w-40 abs-tr mt-16 mr-12" alt="A comic art image of Anthony Fu"/>
 
 
 ---
@@ -61,7 +61,7 @@ name: Sponsors
 layout: center
 ---
 
-<img class="h-100 -mt-10" src="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.png" /><br>
+<img class="h-100 -mt-10" src="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.png" alt="A list of the sponsor logos" /><br>
 <div class="text-center text-xs opacity-50 -mt-8 hover:opacity-100">
   <a href="https://github.com/sponsors/antfu" target="_blank">
     Sponsor me at GitHub
@@ -82,7 +82,7 @@ layout: center
 
 <div class="grid grid-cols-[3fr_2fr] gap-4">
   <div class="text-center pb-4">
-    <img class="h-50 inline-block" src="https://vueuse.org/favicon.svg">
+    <img class="h-50 inline-block" src="https://vueuse.org/favicon.svg" alt="">
     <div class="opacity-50 mb-2 text-sm">
       Collection of essential Vue Composition Utilities
     </div>
@@ -323,7 +323,7 @@ The `setup()` only runs **once** on component initialization, to construct the r
   <Connections v-click class="mt-4"/>
   <div v-click class="p-4">
     <h3 class="pb-2">SpreadSheet Formula</h3>
-    <img class="h-40" src="https://cdn.wallstreetmojo.com/wp-content/uploads/2019/01/Division-Formula-in-Excel-Example-1-1.png">
+    <img class="h-40" src="https://cdn.wallstreetmojo.com/wp-content/uploads/2019/01/Division-Formula-in-Excel-Example-1-1.png" alt="">
   </div>
 </div>
 
@@ -1143,7 +1143,7 @@ Creates Universal Library for Vue 2 & 3<br><carbon-logo-github class="inline-blo
 import { defineComponent, reactive, ref } from 'vue-demi'
 ```
 
-<img class="h-50 mx-auto" src="https://cdn.jsdelivr.net/gh/vueuse/vue-demi/assets/banner.png" />
+<img class="h-50 mx-auto" src="https://cdn.jsdelivr.net/gh/vueuse/vue-demi/assets/banner.png" alt="" />
 
 
 ---
diff --git a/demo/starter/slides.md b/demo/starter/slides.md
index defe6a0ff9..c3167c65aa 100644
--- a/demo/starter/slides.md
+++ b/demo/starter/slides.md
@@ -30,7 +30,7 @@ Presentation slides for developers
   <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon:edit />
   </button>
-  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
     class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon-logo-github />
   </a>
@@ -103,7 +103,7 @@ level: 2
 
 Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html)
 
-### Keyboard Shortcuts
+## Keyboard Shortcuts
 
 |     |     |
 | --- | --- |
@@ -117,6 +117,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
   v-click
   class="absolute -bottom-9 -left-7 w-80 opacity-50"
   src="https://sli.dev/assets/arrow-bottom-left.svg"
+  alt=""
 />
 <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
 
@@ -225,9 +226,9 @@ theme: seriph
 ---
 ```
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
 
 </div>
 
@@ -259,6 +260,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-square.png"
+      alt=""
     />
     <img
       v-motion
@@ -266,6 +268,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-circle.png"
+      alt=""
     />
     <img
       v-motion
@@ -273,6 +276,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-triangle.png"
+      alt=""
     />
   </div>
 
@@ -346,7 +350,7 @@ You can create diagrams / graphs from textual descriptions, directly in your Mar
 
 <div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
 
-```mermaid {scale: 0.5}
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
diff --git a/packages/client/builtin/PlantUml.vue b/packages/client/builtin/PlantUml.vue
index 6e053a7208..2ac399c5e3 100644
--- a/packages/client/builtin/PlantUml.vue
+++ b/packages/client/builtin/PlantUml.vue
@@ -13,15 +13,18 @@ Alice -> Bob : Hello!
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   code: string
   server: string
   scale?: number
-}>()
+  alt?: string
+}>(), {
+  alt: 'PlantUML diagram',
+})
 
 const uri = computed(() => `${props.server}/svg/${props.code}`)
 </script>
 
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{ scale }">
+  <img :src="uri" :style="{ scale }" :alt="alt">
 </template>
diff --git a/packages/client/internals/DrawingControls.vue b/packages/client/internals/DrawingControls.vue
index 7fa51f6031..7006c0bc0d 100644
--- a/packages/client/internals/DrawingControls.vue
+++ b/packages/client/internals/DrawingControls.vue
@@ -13,6 +13,7 @@ import {
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
+import HiddenText from './HiddenText.vue'
 
 function undo() {
   drauu.undo()
@@ -40,24 +41,30 @@ function setBrushColor(color: typeof brush.color) {
     :initial-y="10"
   >
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+      <HiddenText text="Draw with stylus" />
       <carbon:pen />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+      <HiddenText text="Draw a line" />
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+      <HiddenText text="Draw an arrow" />
       <carbon:arrow-up-right />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+      <HiddenText text="Draw an ellipse" />
       <carbon:radio-button />
     </button>
     <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+      <HiddenText text="Draw a rectangle" />
       <carbon:checkbox />
     </button>
     <!-- TODO: not sure why it's not working! -->
     <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+      <HiddenText text="Erase" />
       <carbon:erase />
     </button> -->
 
@@ -70,6 +77,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
+      <HiddenText text="Set brush color" />
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
@@ -80,17 +88,21 @@ function setBrushColor(color: typeof brush.color) {
     <VerticalDivider />
 
     <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
+      <HiddenText text="Undo" />
       <carbon:undo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
+      <HiddenText text="Redo" />
       <carbon:redo />
     </button>
     <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
+      <HiddenText text="Delete" />
       <carbon:delete />
     </button>
 
     <VerticalDivider />
     <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
       <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
       <carbon:pin v-show="!drawingPinned" />
     </button>
@@ -100,6 +112,7 @@ function setBrushColor(color: typeof brush.color) {
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
+      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
     </button>
diff --git a/packages/client/internals/Editor.vue b/packages/client/internals/Editor.vue
index 3edce979de..62e0b7523b 100644
--- a/packages/client/internals/Editor.vue
+++ b/packages/client/internals/Editor.vue
@@ -5,6 +5,7 @@ import { activeElement, editorWidth, isInputting, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{
   resize: boolean
@@ -147,9 +148,11 @@ throttledWatch(
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
         <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
+          <HiddenText text="Switch to content tab" />
           <carbon:account />
         </button>
         <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
+          <HiddenText text="Switch to notes tab" />
           <carbon:align-box-bottom-right />
         </button>
       </div>
@@ -158,9 +161,11 @@ throttledWatch(
       </span>
       <div class="flex-auto" />
       <button class="slidev-icon-btn" @click="openInEditor()">
+        <HiddenText text="Open in editor" />
         <carbon:launch />
       </button>
       <button class="slidev-icon-btn" @click="close">
+        <HiddenText text="Close" />
         <carbon:close />
       </button>
     </div>
diff --git a/packages/client/internals/HiddenText.vue b/packages/client/internals/HiddenText.vue
new file mode 100644
index 0000000000..7f06fb52d9
--- /dev/null
+++ b/packages/client/internals/HiddenText.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <span class="sr-only">{{ text }}</span>
+</template>
diff --git a/packages/client/internals/InfoDialog.vue b/packages/client/internals/InfoDialog.vue
index 2ca6da45a5..a38e93c327 100644
--- a/packages/client/internals/InfoDialog.vue
+++ b/packages/client/internals/InfoDialog.vue
@@ -33,7 +33,7 @@ const hasInfo = computed(() => typeof configs.info === 'string')
           <img
             class="w-5 h-5"
             src="../assets/logo.png"
-            alt="Slidev"
+            alt="Slidev logo"
           >
           <div style="color: #2082A6">
             <b>Sli</b>dev
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index caccf032e9..08bb74fde0 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -8,6 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
+import HiddenText from './HiddenText.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -52,19 +53,28 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       @mouseleave="onMouseLeave"
     >
       <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <carbon:minimize v-if="isFullscreen" />
-        <carbon:maximize v-else />
+        <template v-if="isFullscreen">
+          <HiddenText text="Close fullscreen" />
+          <carbon:minimize />
+        </template>
+        <template v-else>
+          <HiddenText text="Enter fullscreen" />
+          <carbon:maximize />
+        </template>
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
+        <HiddenText text="Go to previous slide" />
         <carbon:arrow-left />
       </button>
 
       <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
+        <HiddenText text="Go to next slide" />
         <carbon:arrow-right />
       </button>
 
       <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
+        <HiddenText text="Show slide overview" />
         <carbon:apps />
       </button>
 
@@ -74,8 +84,14 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         title="Toggle dark mode"
         @click="toggleDark()"
       >
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
+        <template v-if="isDark">
+          <HiddenText text="Switch to light theme" />
+          <carbon-moon />
+        </template>
+        <template v-else>
+          <HiddenText text="Switch to dark mode theme" />
+          <carbon-sun />
+        </template>
       </button>
 
       <VerticalDivider />
@@ -92,13 +108,20 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           title="Show presenter cursor"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <ph-cursor-fill v-if="showPresenterCursor" />
-          <ph-cursor-duotone v-else class="opacity-50" />
+          <template v-if="showPresenterCursor">
+            <HiddenText text="Hide presenter cursor" />
+            <ph-cursor-fill />
+          </template>
+          <template v-else>
+            <HiddenText text="Show presenter cursor" />
+            <ph-cursor-duotone />
+          </template>
         </button>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
+          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
           <carbon:pen />
           <div
             v-if="drawingEnabled"
@@ -122,11 +145,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           class="slidev-icon-btn <md:hidden"
           @click="showEditor = !showEditor"
         >
+          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
         </button>
       </template>
       <template v-if="!__DEV__">
         <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
+          <HiddenText text="Download as PDF" />
           <carbon:download />
         </button>
       </template>
@@ -136,6 +161,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         class="slidev-icon-btn"
         @click="showInfoDialog = !showInfoDialog"
       >
+        <HiddenText text="Show info" />
         <carbon:information />
       </button>
 
@@ -143,6 +169,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <MenuButton>
           <template #button>
             <button class="slidev-icon-btn">
+              <HiddenText text="Adjust settings" />
               <carbon:settings-adjust />
             </button>
           </template>
diff --git a/packages/client/internals/NotesView.vue b/packages/client/internals/NotesView.vue
index 5d12457b3c..bf89ebd5d4 100644
--- a/packages/client/internals/NotesView.vue
+++ b/packages/client/internals/NotesView.vue
@@ -8,6 +8,7 @@ import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
 import NoteDisplay from './NoteDisplay.vue'
+import HiddenText from './HiddenText.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -57,13 +58,16 @@ function decreaseFontSize() {
     <div class="flex-none border-t border-gray-400 border-opacity-20">
       <div class="flex gap-1 items-center px-6 py-3">
         <button class="slidev-icon-btn" @click="toggleFullscreen">
+          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
         </button>
         <button class="slidev-icon-btn" @click="increaseFontSize">
+          <HiddenText text="Increase font size" />
           <carbon:zoom-in />
         </button>
         <button class="slidev-icon-btn" @click="decreaseFontSize">
+          <HiddenText text="Decrease font size" />
           <carbon:zoom-out />
         </button>
         <div class="flex-auto" />
diff --git a/packages/client/internals/Presenter.vue b/packages/client/internals/Presenter.vue
index d9fb43efff..21032b2ceb 100644
--- a/packages/client/internals/Presenter.vue
+++ b/packages/client/internals/Presenter.vue
@@ -88,7 +88,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;">
+        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
diff --git a/packages/client/internals/RecordingControls.vue b/packages/client/internals/RecordingControls.vue
index 616e3ab146..ea144a3fef 100644
--- a/packages/client/internals/RecordingControls.vue
+++ b/packages/client/internals/RecordingControls.vue
@@ -5,6 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
+import HiddenText from './HiddenText.vue'
 
 const {
   recording,
@@ -40,6 +41,7 @@ onMounted(() => {
     title="Show camera view"
     @click="toggleAvatar"
   >
+    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
   </button>
 
@@ -49,12 +51,14 @@ onMounted(() => {
     title="Recording"
     @click="toggleRecording"
   >
+    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
   </button>
   <MenuButton :disabled="recording">
     <template #button>
       <button class="slidev-icon-btn h-full !text-sm !px-0">
+        <HiddenText text="Select recording device" />
         <carbon:chevron-up class="opacity-50" />
       </button>
     </template>
diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue
index 56dfff6e73..52256f5978 100644
--- a/packages/client/internals/SlidesOverview.vue
+++ b/packages/client/internals/SlidesOverview.vue
@@ -9,6 +9,7 @@ import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
+import HiddenText from './HiddenText.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -157,6 +158,7 @@ watchEffect(() => {
     </div>
   </Transition>
   <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
+    <HiddenText text="Close" />
     <carbon:close />
   </button>
 </template>
diff --git a/packages/create-theme/template/example.md b/packages/create-theme/template/example.md
index b68b996100..16d9bc41ea 100644
--- a/packages/create-theme/template/example.md
+++ b/packages/create-theme/template/example.md
@@ -38,7 +38,7 @@ Read more about [Why Slidev?](https://sli.dev/guide/why)
 
 Hover on the bottom-left corner to see the navigation's controls panel
 
-### Keyboard Shortcuts
+## Keyboard Shortcuts
 
 |     |     |
 | --- | --- |
diff --git a/packages/slidev/template.md b/packages/slidev/template.md
index 9c8727097c..03cd939e39 100644
--- a/packages/slidev/template.md
+++ b/packages/slidev/template.md
@@ -26,7 +26,7 @@ Presentation slides for developers
   </span>
 </div>
 
-<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
   class="abs-br m-6 text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
   <carbon-logo-github />
 </a>
@@ -77,7 +77,7 @@ h1 {
 
 Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html)
 
-### Keyboard Shortcuts
+## Keyboard Shortcuts
 
 |     |     |
 | --- | --- |
@@ -91,6 +91,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
   v-click
   class="absolute -bottom-9 -left-7 w-80 opacity-50"
   src="https://sli.dev/assets/arrow-bottom-left.svg"
+  alt=""
 />
 <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
 
@@ -177,9 +178,9 @@ theme: seriph
 ---
 ```
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
 
 </div>
 
@@ -211,6 +212,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-square.png"
+      alt=""
     />
     <img
       v-motion
@@ -218,6 +220,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-circle.png"
+      alt=""
     />
     <img
       v-motion
@@ -225,6 +228,7 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-triangle.png"
+      alt=""
     />
   </div>