fix: ♿ Improve accessibility of entire site

components/social-elements/instance/Presentation.vue

@@ -3,7 +3,7 @@
         <div
             class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
             <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out" v-if="instance?.banner"
-                :src="instance.banner" />
+                alt="Instance banner" :src="instance.banner" />
         </div>
 
         <div class="prose prose-invert prose-sm">

components/social-elements/notes/attachment.vue

@@ -1,7 +1,7 @@
 <template>
-    <div @click="lightbox = true"
+    <div @click="lightbox = true" tabindex="0" aria-label="Open attachment in lightbox" @keydown="lightbox = true"
         class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-        <img v-if="attachment.type === 'image'"
+        <img v-if="attachment.type === 'image'" tabindex="-1"
             class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out" :src="attachment.url"
             :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
         <video v-else-if="attachment.type === 'video'" class="object-cover w-full h-full rounded" controls

components/social-elements/notes/mention.vue

@@ -2,7 +2,7 @@
     <a :href="`/@${account.acct}`"
         class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
         <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1" :src="account.avatar"
-            alt="" />
+            :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
     </a>
 </template>

components/social-elements/notes/note.vue

@@ -4,7 +4,8 @@
         <div class="flex flex-row">
             <Skeleton :enabled="isLoading" shape="rect" class="!h-12 w-12">
                 <NuxtLink :href="accountUrl">
-                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" alt="" />
+                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
+                        :alt="`${note?.account.acct}'s avatar`" />
                 </NuxtLink>
             </Skeleton>
             <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
@@ -64,6 +65,7 @@
                 <template #button>
                     <HeadlessMenuButton>
                         <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                        <span class="sr-only">Open menu</span>
                     </HeadlessMenuButton>
                 </template>
 
@@ -104,10 +106,10 @@ const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
 const content =
     props.note && process.client
         ? await useParsedContent(
-              props.note.content,
-              props.note.emojis,
-              mentions.value,
-          )
+            props.note.content,
+            props.note.emojis,
+            mentions.value,
+        )
         : "";
 const numberFormat = (number = 0) =>
     new Intl.NumberFormat(undefined, {

components/social-elements/users/Account.vue

@@ -3,14 +3,16 @@
         <div class="w-full rounded ring-1 ring-white/10 pb-10">
             <Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
                 <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
-                    <img v-if="account?.header" :src="account.header" class="object-cover w-full h-full" />
+                    <img v-if="account?.header" :src="account.header" class="object-cover w-full h-full"
+                        :alt="`${account.acct}'s header image'`" />
                 </div>
             </Skeleton>
 
             <div class="flex items-start justify-between px-4 py-3">
                 <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded overflow-hidden">
                     <Skeleton :enabled="skeleton" class="!h-full !w-full">
-                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar" />
+                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar"
+                            :alt="`${account?.acct}'s avatar'`" />
                     </Skeleton>
                 </div>
                 <ButtonsSecondary v-if="account">Edit Profile</ButtonsSecondary>

components/social-elements/users/SmallCard.vue

@@ -2,7 +2,8 @@
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="skeleton" shape="rect" class="!h-12 w-12">
             <div>
-                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar" alt="" />
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
+                    :alt="`${account?.acct}'s avatar'`" />
             </div>
         </Skeleton>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">