diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue
index eb4e9424a..aa2418406 100644
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -17,19 +17,19 @@
     <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
       <template v-for="(shelf, index) in shelves">
         <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening' || shelf.id === 'continue-reading'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-item-slider>
         <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-episode-slider>
         <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-series-slider>
         <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-authors-slider>
         <widgets-narrators-slider v-else-if="shelf.type === 'narrators'" :key="index + '.'" :items="shelf.entities" :height="100 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
-          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+          <p role="heading" aria-level="2" class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
         </widgets-narrators-slider>
       </template>
     </div>
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index efeb0165c..7e80525af 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -9,7 +9,7 @@
     <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
       <div :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
         <ui-tooltip v-if="displayTitle" :text="displayTitle" :disabled="!displayTitleTruncated" direction="bottom" :delayOnShow="500" class="flex items-center">
-          <p ref="displayTitle" class="truncate">{{ displayTitle }}</p>
+          <p role="heading" aria-level="3" ref="displayTitle" class="truncate">{{ displayTitle }}</p>
           <widgets-explicit-indicator :explicit="isExplicit" />
         </ui-tooltip>
       </div>
diff --git a/client/components/cards/LazySeriesCard.vue b/client/components/cards/LazySeriesCard.vue
index 1175acf1b..e2d76336d 100644
--- a/client/components/cards/LazySeriesCard.vue
+++ b/client/components/cards/LazySeriesCard.vue
@@ -10,18 +10,18 @@
     <div v-if="seriesPercentInProgress > 0" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b w-full" :class="isSeriesFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: seriesPercentInProgress * 100 + '%' }" />
 
     <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
+      <p :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
     </div>
 
     <span v-if="!isHovering && rssFeed" class="absolute z-10 material-icons text-success" :style="{ top: 0.5 * sizeMultiplier + 'rem', left: 0.5 * sizeMultiplier + 'rem', fontSize: 1.5 * sizeMultiplier + 'rem' }">rss_feed</span>
 
     <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-10 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(200, width) + 'px' }">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
-        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
       </div>
     </div>
     <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
-      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
+      <p class="truncate" :style="{ fontSize: labelFontSize * sizeMultiplier + 'rem' }" role="heading" aria-level="3">{{ displayTitle }}</p>
       <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
   </div>
diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index acc92ea5e..783e9d900 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -11,7 +11,7 @@
             <ui-tooltip :text="$strings.LabelSettingsStoreCoversWithItemHelp">
               <p class="pl-4">
                 <span id="settings-store-cover-with-items">{{ $strings.LabelSettingsStoreCoversWithItem }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -21,7 +21,7 @@
             <ui-tooltip :text="$strings.LabelSettingsStoreMetadataWithItemHelp">
               <p class="pl-4">
                 <span id="settings-store-metadata-with-items">{{ $strings.LabelSettingsStoreMetadataWithItem }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -31,7 +31,7 @@
             <ui-tooltip :text="$strings.LabelSettingsSortingIgnorePrefixesHelp">
               <p class="pl-4">
                 <span id="settings-sorting-ignore-prefixes">{{ $strings.LabelSettingsSortingIgnorePrefixes }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -56,7 +56,7 @@
             <ui-tooltip :text="$strings.LabelSettingsParseSubtitlesHelp">
               <p class="pl-4">
                 <span id="settings-parse-subtitles">{{ $strings.LabelSettingsParseSubtitles }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -66,7 +66,7 @@
             <ui-tooltip :text="$strings.LabelSettingsFindCoversHelp">
               <p class="pl-4">
                 <span id="settings-find-covers">{{ $strings.LabelSettingsFindCovers }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
             <div class="flex-grow" />
@@ -80,7 +80,7 @@
             <ui-tooltip :text="$strings.LabelSettingsPreferMatchedMetadataHelp">
               <p class="pl-4">
                 <span id="settings-prefer-matched-metadata">{{ $strings.LabelSettingsPreferMatchedMetadata }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -90,7 +90,7 @@
             <ui-tooltip :text="$strings.LabelSettingsEnableWatcherHelp">
               <p class="pl-4">
                 <span id="settings-disable-watcher">{{ $strings.LabelSettingsEnableWatcher }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -106,7 +106,7 @@
             <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
                 <span id="settings-home-page-uses-bookshelf">{{ $strings.LabelSettingsHomePageBookshelfView }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -116,7 +116,7 @@
             <ui-tooltip :text="$strings.LabelSettingsBookshelfViewHelp">
               <p class="pl-4">
                 <span id="settings-library-uses-bookshelf">{{ $strings.LabelSettingsLibraryBookshelfView }}</span>
-                <span class="material-icons icon-text">info_outlined</span>
+                <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -146,7 +146,7 @@
               <p class="pl-4">
                 <span id="settings-experimental-features">{{ $strings.LabelSettingsExperimentalFeatures }}</span>
                 <a :aria-label="$strings.LabelSettingsExperimentalFeaturesHelp" href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
-                  <span class="material-icons icon-text">info_outlined</span>
+                  <span aria-hidden="true" class="material-icons icon-text">info_outlined</span>
                 </a>
               </p>
             </ui-tooltip>
diff --git a/client/pages/item/_id/index.vue b/client/pages/item/_id/index.vue
index b4b58bda0..7365cbba7 100644
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@@ -84,7 +84,7 @@
           <!-- Icon buttons -->
           <div class="flex items-center justify-center md:justify-start pt-4">
             <ui-btn v-if="showPlayButton" :disabled="isStreaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playItem">
-              <span v-show="!isStreaming" class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+              <span aria-hidden="true" v-show="!isStreaming" class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
               {{ isStreaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
             </ui-btn>