fix(icon): add alt attributes to images and icons for better accessib…

…ility.
Theo-Messi · Jan 2, 2025 · c732d8b · c732d8b
1 parent a5059ca
commit c732d8b
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 36 deletions.
diff --git a/src/components/Announcement.vue b/src/components/Announcement.vue
@@ -5,12 +5,20 @@ const prelink: Prelink | undefined = usePrelink()
 </script>
 
 <template>
-  <a v-if="prelink" :href="prelink.link" :target="prelink.target" rel="noopener" class="prelink">
+  <a
+    v-if="prelink"
+    :href="prelink.link"
+    :target="prelink.target"
+    rel="noopener"
+    class="prelink"
+    :title="prelink.title"
+    :aria-label="prelink.title"
+  >
     <div class="prelink-content">
       <span class="title" v-html="prelink.title"></span>
       <span v-if="prelink.content" class="content" v-html="prelink.content"></span>
       <span v-if="prelink.date" class="time-info">
-        <Icon :icon="prelink.dateIcon || 'line-md:calendar'" class="iconify"></Icon>
+        <Icon :icon="prelink.dateIcon || 'line-md:calendar'" alt="Icon" class="iconify"></Icon>
         <span v-html="prelink.dateText || '活动时间: 即日至'"></span>
         <span class="date">{{ prelink.date }}</span>
       </span>

diff --git a/src/components/DocAsideLogo.vue b/src/components/DocAsideLogo.vue
@@ -12,9 +12,10 @@ const props = defineProps<{ Aside_Data: AsideItem[] }>()
       :href="aside.link"
       :class="{ 'has-activity': aside.activity, 'has-name': aside.name }"
       :title="aside.activity || aside.name"
-      class="aside-class"
+      :aria-label="aside.activity || aside.name"
       :target="isExternal(aside.link) ? '_blank' : '_self'"
       rel="noopener"
+      class="aside-class"
     >
       <img :src="aside.icon" width="22" height="22" :alt="aside.activity || aside.name" />
       <span>

diff --git a/src/components/DocBox.vue b/src/components/DocBox.vue
@@ -10,30 +10,33 @@ const props = defineProps<{ items: BoxItem[] }>()
       v-for="(box, index) in props.items"
       :key="box.link + index"
       :href="box.link"
-      :title="box.name"
       class="box"
       :target="isExternal(box.link) ? '_blank' : '_self'"
       rel="noopener"
+      :title="box.name"
+      :aria-label="box.name"
     >
       <template v-if="box.icon">
         <Icon
           v-if="typeof box.icon === 'object'"
           :icon="box.icon.light"
-          class="iconify light-only"
           :style="{ color: typeof box.color === 'object' ? box.color.light : box.color }"
+          :alt="box.name"
+          class="iconify light-only"
         />
         <Icon
           v-if="typeof box.icon === 'object'"
           :icon="box.icon.dark"
-          class="iconify dark-only"
           :style="{ color: typeof box.color === 'object' ? box.color.dark : box.color }"
+          :alt="box.name"
+          class="iconify dark-only"
         />
-        <Icon v-else :icon="box.icon" class="iconify" :style="{ color: box.color }" />
+        <Icon v-else :icon="box.icon" :style="{ color: box.color }" :alt="box.name" class="iconify" />
       </template>
       <template v-else-if="box.image">
-        <img v-if="typeof box.image === 'object'" :src="box.image.light" alt="Icon" class="icon light-only" />
-        <img v-if="typeof box.image === 'object'" :src="box.image.dark" alt="Icon" class="icon dark-only" />
-        <img v-else :src="box.image" alt="Icon" class="icon" />
+        <img v-if="typeof box.image === 'object'" :src="box.image.light" :alt="box.name" class="icon light-only" />
+        <img v-if="typeof box.image === 'object'" :src="box.image.dark" :alt="box.name" class="icon dark-only" />
+        <img v-else :src="box.image" :alt="box.name" class="icon" />
       </template>
       <span class="name">{{ box.name }}</span>
       <span v-if="box.tag" class="tag">{{ box.tag }}</span>

diff --git a/src/components/DocBoxCube.vue b/src/components/DocBoxCube.vue
@@ -11,29 +11,42 @@ const props = defineProps<{ items: BoxCubeItem[] }>()
       :key="boxcube.link + index"
       class="link"
       :href="boxcube.link"
-      :title="boxcube.name"
       :target="isExternal(boxcube.link) ? '_blank' : '_self'"
       rel="noopener"
+      :title="boxcube.name"
+      :aria-label="boxcube.name"
     >
       <template v-if="boxcube.icon">
         <Icon
           v-if="typeof boxcube.icon === 'object'"
           :icon="boxcube.icon.light"
-          class="iconify light-only"
           :style="{ color: typeof boxcube.color === 'object' ? boxcube.color.light : boxcube.color }"
+          :alt="boxcube.name"
+          class="iconify light-only"
         />
         <Icon
           v-if="typeof boxcube.icon === 'object'"
           :icon="boxcube.icon.dark"
-          class="iconify dark-only"
           :style="{ color: typeof boxcube.color === 'object' ? boxcube.color.dark : boxcube.color }"
+          :alt="boxcube.name"
+          class="iconify dark-only"
         />
-        <Icon v-else :icon="boxcube.icon" class="iconify" :style="{ color: boxcube.color }" />
+        <Icon v-else :icon="boxcube.icon" :style="{ color: boxcube.color }" :alt="boxcube.name" class="iconify" />
       </template>
       <template v-else-if="boxcube.image">
-        <img v-if="typeof boxcube.image === 'object'" :src="boxcube.image.light" alt="Icon" class="icon light-only" />
-        <img v-if="typeof boxcube.image === 'object'" :src="boxcube.image.dark" alt="Icon" class="icon dark-only" />
-        <img v-else :src="boxcube.image" alt="Icon" class="icon" />
+        <img
+          v-if="typeof boxcube.image === 'object'"
+          :src="boxcube.image.light"
+          :alt="boxcube.name"
+          class="icon light-only"
+        />
+        <img
+          v-if="typeof boxcube.image === 'object'"
+          :src="boxcube.image.dark"
+          :alt="boxcube.name"
+          class="icon dark-only"
+        />
+        <img v-else :src="boxcube.image" :alt="boxcube.name" class="icon" />
       </template>
       <span class="name">{{ boxcube.name }}</span>
       <span class="desc">{{ boxcube.desc }}</span>

diff --git a/src/components/DocLinks.vue b/src/components/DocLinks.vue
@@ -11,29 +11,32 @@ const props = defineProps<{ items: LinkItem[] }>()
       :key="link.link + index"
       :href="link.link"
       :title="link.name"
+      :aria-label="link.name"
       :target="isExternal(link.link) ? '_blank' : '_self'"
-      class="link"
       rel="noopener"
+      class="link"
     >
       <template v-if="link.icon">
         <Icon
           v-if="typeof link.icon === 'object'"
           :icon="link.icon.light"
-          class="iconify light-only"
           :style="{ color: typeof link.color === 'object' ? link.color.light : link.color }"
+          :alt="link.name"
+          class="iconify light-only"
         />
         <Icon
           v-if="typeof link.icon === 'object'"
           :icon="link.icon.dark"
-          class="iconify dark-only"
           :style="{ color: typeof link.color === 'object' ? link.color.dark : link.color }"
+          :alt="link.name"
+          class="iconify dark-only"
         />
-        <Icon v-else :icon="link.icon" class="iconify" :style="{ color: link.color }" />
+        <Icon v-else :icon="link.icon" :style="{ color: link.color }" :alt="link.name" class="iconify" />
       </template>
       <template v-else-if="link.image">
-        <img v-if="typeof link.image === 'object'" :src="link.image.light" alt="Icon" class="icon light-only" />
-        <img v-if="typeof link.image === 'object'" :src="link.image.dark" alt="Icon" class="icon dark-only" />
-        <img v-else :src="link.image" alt="Icon" class="icon" />
+        <img v-if="typeof link.image === 'object'" :src="link.image.light" :alt="link.name" class="icon light-only" />
+        <img v-if="typeof link.image === 'object'" :src="link.image.dark" :alt="link.name" class="icon dark-only" />
+        <img v-else :src="link.image" :alt="link.name" class="icon" />
       </template>
       <template v-else>
         <Icon class="default-icon" icon="fa6-solid:arrow-up-right-from-square" alt="Icon" />

diff --git a/src/components/DocPill.vue b/src/components/DocPill.vue
@@ -8,29 +8,32 @@ const pill = defineProps<Pill>()
   <a
     :href="pill.link"
     :title="pill.name"
-    class="pill"
+    :aria-label="pill.name"
     :target="isExternal(pill.link) ? '_blank' : '_self'"
     rel="noopener"
+    class="pill"
   >
     <template v-if="pill.icon">
       <Icon
         v-if="typeof pill.icon === 'object'"
         :icon="pill.icon.light"
-        class="iconify light-only"
         :style="{ color: typeof pill.color === 'object' ? pill.color.light : pill.color }"
+        :alt="pill.name"
+        class="iconify light-only"
       />
       <Icon
         v-if="typeof pill.icon === 'object'"
         :icon="pill.icon.dark"
-        class="iconify dark-only"
         :style="{ color: typeof pill.color === 'object' ? pill.color.dark : pill.color }"
+        :alt="pill.name"
+        class="iconify dark-only"
       />
-      <Icon v-else :icon="pill.icon" class="iconify" :style="{ color: pill.color }" />
+      <Icon v-else :icon="pill.icon" :style="{ color: pill.color }" :alt="pill.name" class="iconify" />
     </template>
     <template v-else-if="pill.image">
-      <img v-if="typeof pill.image === 'object'" :src="pill.image.light" alt="Icon" class="icon light-only" />
-      <img v-if="typeof pill.image === 'object'" :src="pill.image.dark" alt="Icon" class="icon dark-only" />
-      <img v-else :src="pill.image" alt="Icon" class="icon" />
+      <img v-if="typeof pill.image === 'object'" :src="pill.image.light" :alt="pill.name" class="icon light-only" />
+      <img v-if="typeof pill.image === 'object'" :src="pill.image.dark" :alt="pill.name" class="icon dark-only" />
+      <img v-else :src="pill.image" :alt="pill.name" class="icon" />
     </template>
     <span class="name">{{ pill.name }}</span>
   </a>

diff --git a/src/components/HomeFooter.vue b/src/components/HomeFooter.vue
@@ -17,24 +17,33 @@ const Year = dayjs().year()
       <div class="list-item" v-for="(section, index) in footer.group || []" :key="section.title + index">
         <div class="list-title">
           <template v-if="section.icon">
-            <Icon :icon="section.icon" class="iconify" :style="{ color: section.style }" />&nbsp;&nbsp;</template
+            <Icon
+              :icon="section.icon"
+              :style="{ color: section.style }"
+              :alt="section.title"
+              class="iconify"
+            />&nbsp;&nbsp;</template
           >{{ section.title }}
         </div>
         <ul class="list-links">
           <li v-for="(link, idx) in section.links" :key="link.name + idx">
-            <template v-if="link.icon"> <Icon :icon="link.icon" :style="{ color: link.style }" />&nbsp; </template>
+            <template v-if="link.icon">
+              <Icon :icon="link.icon" :style="{ color: link.style }" :alt="link.name" />&nbsp;
+            </template>
             <a
               :name="link.name"
-              :title="link.name"
               :href="link.href"
-              rel="noopener"
+              :title="link.name"
+              :aria-label="link.name"
               :target="link.target || section.target || '_blank'"
+              rel="noopener"
             >
               {{ link.name }}
               <Icon
                 v-if="(link.target || section.target || '_blank') === '_blank'"
                 icon="heroicons-outline:arrow-sm-up"
                 style="color: var(--vp-c-text-3); transform: rotate(45deg); font-size: 1em"
+                alt="External Link"
               />
             </a>
           </li>
@@ -48,6 +57,7 @@ const Year = dayjs().year()
           <Icon
             v-if="footer.beian?.showIcon"
             :icon="footer.beian.icpIcon || 'fluent:globe-shield-48-filled'"
+            alt="ICP备案"
             class="info-icon"
           />&nbsp;
           <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/" title="ICP备案">
@@ -59,6 +69,7 @@ const Year = dayjs().year()
           <Icon
             v-if="footer.beian?.showIcon"
             :icon="footer.beian.policeIcon || 'fluent:shield-checkmark-48-filled'"
+            alt="公安备案"
             class="info-icon"
           />&nbsp;
           <a target="_blank" rel="noopener" href="https://beian.mps.gov.cn/" title="公安备案">
@@ -69,7 +80,7 @@ const Year = dayjs().year()
       <span class="info-spacing-copyright"></span>
       <div v-if="footer.author?.name" class="info-item">
         <span>
-          <Icon icon="ri:copyright-line" class="info-icon" style="font-size: 1em" />&nbsp;{{ Year }}
+          <Icon icon="ri:copyright-line" style="font-size: 1em" alt="版权" class="info-icon" />&nbsp;{{ Year }}
           <a target="_blank" rel="noopener" title="GitHub" :href="footer.author?.link">{{ footer.author?.name }}</a
           >.&nbsp;All Rights Reserved.
         </span>