From 175bd6829412970cad03a60819d886a29a84292b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:33:11 +0000
Subject: [PATCH] Improve web accessibility per WCAG 2.2 AA standards

- Add `aria-hidden="true"` to decorative SVGs
- Update `<nav>` and interactive elements with localized `aria-label` attributes for screen readers
- Replace root `div` with semantic `<main>` tag in layout and region index
- Improve keyboard navigation for screenshot choice tablist by adding proper `role`, `aria-selected`, `tabindex`, and keyboard event handlers with `.prevent` modifier
- Ensure external links clearly denote they open in a new tab via `aria-label`

Co-authored-by: FelixINX <8009156+FelixINX@users.noreply.github.com>
---
 components/VehicleSheet/EmptyState.vue        |  2 +-
 components/VehicleSheet/Property.vue          |  2 +-
 components/VehicleSheet/VehicleSheet.vue      |  2 +-
 components/settings/SettingsGroup.vue         |  6 ++---
 .../settings/SettingsHiddenAgencies.vue       |  6 ++---
 components/settings/SettingsItem.vue          |  4 ++--
 components/settings/SettingsPwa.vue           |  2 +-
 components/settings/TableColumns.vue          |  4 ++--
 components/tw/BasicDialog.vue                 |  2 +-
 components/tw/Chip.vue                        |  2 +-
 components/tw/ChoiceCard.vue                  |  4 ++--
 components/tw/Link.vue                        |  2 +-
 components/tw/NavigationBar.vue               |  5 +++--
 components/tw/NavigationRail.vue              | 22 +++++++++++++++----
 components/tw/RegionSwitcher.vue              |  4 ++--
 components/tw/SideSheet.vue                   | 18 +++++++--------
 components/tw/Switch.vue                      |  2 +-
 components/tw/TopAppBar.vue                   |  4 ++--
 components/tw/landing/FurtherBlock.vue        |  2 +-
 layouts/default.vue                           |  1 +
 layouts/error.vue                             |  2 +-
 pages/index.vue                               | 15 +++++++++++--
 pages/maintenance.vue                         |  2 +-
 pages/regions/_region/download.vue            |  2 +-
 pages/regions/_region/index.vue               |  8 +++++--
 pages/regions/_region/table.vue               |  2 +-
 26 files changed, 79 insertions(+), 48 deletions(-)

diff --git a/components/VehicleSheet/EmptyState.vue b/components/VehicleSheet/EmptyState.vue
index 12b4016..1270c57 100644
--- a/components/VehicleSheet/EmptyState.vue
+++ b/components/VehicleSheet/EmptyState.vue
@@ -1,6 +1,6 @@
 <template>
   <aside
-    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-left-2 md:tw-top-2 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center xl:tw-left-4 xl:tw-top-4"
+    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-flex tw-min-h-[6rem] tw-w-full tw-items-center tw-gap-4 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-text-left tw-text-neutral-10 md:tw-left-2 md:tw-top-2 md:tw-max-h-max md:tw-min-h-[12rem] md:tw-w-96 md:tw-flex-col md:tw-rounded-xl md:tw-text-center xl:tw-left-4 xl:tw-top-4 dark:tw-bg-neutral-10 dark:tw-text-neutral-90"
   >
     <svg
       class="tw-h-12 tw-w-12 md:tw-h-32 md:tw-w-32"
diff --git a/components/VehicleSheet/Property.vue b/components/VehicleSheet/Property.vue
index 18d3ba4..f9fb5ed 100644
--- a/components/VehicleSheet/Property.vue
+++ b/components/VehicleSheet/Property.vue
@@ -6,7 +6,7 @@
     />
     <div class="tw-ml-3">
       <dt
-        class="tw-text-[0.6875rem] tw-font-medium tw-leading-4 tw-text-neutralVariant-30 dark:tw-text-neutralVariant-80 xl:tw-text-xs"
+        class="tw-text-[0.6875rem] tw-font-medium tw-leading-4 tw-text-neutralVariant-30 xl:tw-text-xs dark:tw-text-neutralVariant-80"
       >
         {{ $t(property.value) }}
       </dt>
diff --git a/components/VehicleSheet/VehicleSheet.vue b/components/VehicleSheet/VehicleSheet.vue
index 572adf3..f6db17d 100644
--- a/components/VehicleSheet/VehicleSheet.vue
+++ b/components/VehicleSheet/VehicleSheet.vue
@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-mb-[4rem] tw-w-full tw-space-y-2 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-pb-20 tw-text-neutral-10 dark:tw-bg-neutral-10 dark:tw-text-neutral-90 md:tw-left-2 md:tw-top-2 md:tw-max-h-[calc(100vh-41px-32px)] md:tw-w-96 md:tw-rounded-xl md:tw-pb-4 xl:tw-left-4 xl:tw-top-4 xl:tw-space-y-4"
+    class="tw-absolute tw-top-[calc(100vh-14rem)] tw-mb-[4rem] tw-w-full tw-space-y-2 tw-overflow-y-auto tw-rounded-t-[1.75rem] tw-bg-neutral-99 tw-p-4 tw-pb-20 tw-text-neutral-10 md:tw-left-2 md:tw-top-2 md:tw-max-h-[calc(100vh-41px-32px)] md:tw-w-96 md:tw-rounded-xl md:tw-pb-4 xl:tw-left-4 xl:tw-top-4 xl:tw-space-y-4 dark:tw-bg-neutral-10 dark:tw-text-neutral-90"
   >
     <div class="-tw-mt-4 md:tw-hidden">
       <div
diff --git a/components/settings/SettingsGroup.vue b/components/settings/SettingsGroup.vue
index 20c5e50..d18ff09 100755
--- a/components/settings/SettingsGroup.vue
+++ b/components/settings/SettingsGroup.vue
@@ -22,9 +22,6 @@
 import { mdiArrowRight } from '@mdi/js'
 
 export default {
-  data: () => ({
-    mdiArrowRight,
-  }),
   props: {
     title: {
       type: String,
@@ -41,6 +38,9 @@ export default {
       default: null,
     },
   },
+  data: () => ({
+    mdiArrowRight,
+  }),
   methods: {
     navigateToView() {
       this.$store.commit('app/set', {
diff --git a/components/settings/SettingsHiddenAgencies.vue b/components/settings/SettingsHiddenAgencies.vue
index a0cf40d..84f14aa 100755
--- a/components/settings/SettingsHiddenAgencies.vue
+++ b/components/settings/SettingsHiddenAgencies.vue
@@ -2,17 +2,17 @@
   <div>
     <p class="tw-mb-2 tw-text-sm">{{ $t('completeDesc') }}</p>
     <TwChip
-      :icon="mdiEyeCheck"
       v-if="hiddenAgencies.length"
-      @click.native="makeAllVisible"
+      :icon="mdiEyeCheck"
       class="tw-mb-2"
+      @click.native="makeAllVisible"
     >
       {{ $t('makeAllAgenciesVisible') }}
     </TwChip>
     <TwDetails
-      class="tw-mt-2"
       v-for="region in regions"
       :key="region.slug"
+      class="tw-mt-2"
       :open="region.slug === currentRegion"
     >
       <template #summary>
diff --git a/components/settings/SettingsItem.vue b/components/settings/SettingsItem.vue
index 57a68a1..16fbc51 100755
--- a/components/settings/SettingsItem.vue
+++ b/components/settings/SettingsItem.vue
@@ -1,11 +1,11 @@
 <template>
   <button
-    @click.prevent="handleClick"
     class="tw-group tw-relative tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-80 tw-py-3 tw-pl-2 tw-pr-4 tw-text-left tw-transition-colors dark:tw-border-neutralVariant-30"
     :class="[
       settingState === value &&
         'tw-border-secondary-90 tw-bg-secondary-90 tw-text-secondary-30 dark:tw-border-secondary-30 dark:tw-bg-secondary-30 dark:tw-text-secondary-90',
     ]"
+    @click.prevent="handleClick"
   >
     <div
       v-show="settingState !== value"
@@ -16,7 +16,7 @@
       <slot />
     </div>
     <div>
-      <small class="tw-text-xs tw-font-medium" v-if="description">
+      <small v-if="description" class="tw-text-xs tw-font-medium">
         {{ description }}
       </small>
     </div>
diff --git a/components/settings/SettingsPwa.vue b/components/settings/SettingsPwa.vue
index c6b01e2..c2725e1 100644
--- a/components/settings/SettingsPwa.vue
+++ b/components/settings/SettingsPwa.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="tw-rounded-xl tw-bg-neutral-90 tw-p-4 dark:tw-bg-neutral-22"
     v-if="canInstall"
+    class="tw-rounded-xl tw-bg-neutral-90 tw-p-4 dark:tw-bg-neutral-22"
   >
     <h3 class="tw-font-medium">{{ $t('title') }}</h3>
     <p class="!tw-mb-0 tw-text-sm">
diff --git a/components/settings/TableColumns.vue b/components/settings/TableColumns.vue
index c34272c..0ee0b54 100644
--- a/components/settings/TableColumns.vue
+++ b/components/settings/TableColumns.vue
@@ -38,15 +38,15 @@
     </draggable>
     <div class="tw-mt-2 tw-flex tw-flex-wrap tw-gap-2">
       <TwChip
-        :icon="mdiTableColumnPlusAfter"
         v-if="visibleColumns.length !== availableColumns.length"
+        :icon="mdiTableColumnPlusAfter"
         @click.native="addAll"
       >
         {{ $t('addAll') }}
       </TwChip>
       <TwChip
-        :icon="mdiTableRefresh"
         v-if="!isCurrentlyDefault"
+        :icon="mdiTableRefresh"
         @click.native="resetToDefault"
       >
         {{ $t('resetToDefault') }}
diff --git a/components/tw/BasicDialog.vue b/components/tw/BasicDialog.vue
index 3c43599..5ec4f4e 100644
--- a/components/tw/BasicDialog.vue
+++ b/components/tw/BasicDialog.vue
@@ -2,7 +2,7 @@
   <dialog
     ref="dialog"
     :data-state="state"
-    class="tw-mx-4 tw-my-auto tw-min-w-[calc(100vw-2rem)] tw-max-w-[35rem] tw-rounded-[1.75rem] tw-border-none tw-bg-neutral-99 tw-p-6 tw-text-neutralVariant-30 backdrop:tw-bg-black/75 data-[state=closing]:tw-animate-dialogClose data-[state=open]:tw-animate-dialogOpen data-[state=closing]:backdrop:tw-animate-scrimClose data-[state=open]:backdrop:tw-animate-scrimEnter dark:tw-bg-neutral-10 dark:tw-text-neutralVariant-80 md:tw-mx-auto md:tw-min-w-[17.5rem]"
+    class="tw-mx-4 tw-my-auto tw-min-w-[calc(100vw-2rem)] tw-max-w-[35rem] tw-rounded-[1.75rem] tw-border-none tw-bg-neutral-99 tw-p-6 tw-text-neutralVariant-30 backdrop:tw-bg-black/75 data-[state=closing]:tw-animate-dialogClose data-[state=open]:tw-animate-dialogOpen data-[state=closing]:backdrop:tw-animate-scrimClose data-[state=open]:backdrop:tw-animate-scrimEnter md:tw-mx-auto md:tw-min-w-[17.5rem] dark:tw-bg-neutral-10 dark:tw-text-neutralVariant-80"
   >
     <form @submit.prevent="requestClose">
       <div
diff --git a/components/tw/Chip.vue b/components/tw/Chip.vue
index 4ac74b9..b48d7f9 100644
--- a/components/tw/Chip.vue
+++ b/components/tw/Chip.vue
@@ -7,7 +7,7 @@
     <div
       class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-lg tw-bg-neutralVariant-30 tw-bg-opacity-0 tw-transition-colors group-hover:tw-bg-opacity-8 group-focus:tw-bg-opacity-10 dark:tw-bg-neutralVariant-80 dark:tw-bg-opacity-0"
     ></div>
-    <TwIcon :path="icon" v-if="icon" class="!tw-h-4.5 !tw-w-4.5" />
+    <TwIcon v-if="icon" :path="icon" class="!tw-h-4.5 !tw-w-4.5" />
     <span
       class="tw-text-sm tw-font-medium tw-text-neutralVariant-30 dark:tw-text-neutralVariant-80"
     >
diff --git a/components/tw/ChoiceCard.vue b/components/tw/ChoiceCard.vue
index 396f812..87ca4cd 100644
--- a/components/tw/ChoiceCard.vue
+++ b/components/tw/ChoiceCard.vue
@@ -1,7 +1,7 @@
 <template>
   <!--  TODO: Improve accessibility-->
   <button
-    class="tw-relative tw-min-w-[18rem] tw-basis-1/3 tw-rounded-xl tw-border tw-border-solid tw-border-neutralVariant-50 tw-p-4 tw-text-left tw-transition-colors tw-duration-200 tw-ease-emphasized-accelerate hover:tw-border-primary-90 hover:tw-bg-primary-90 hover:tw-text-primary-10 dark:tw-border-neutralVariant-60 dark:hover:tw-border-primary-30 dark:hover:tw-bg-primary-30 dark:hover:tw-text-primary-90 md:tw-aspect-square md:tw-max-w-16"
+    class="tw-relative tw-min-w-[18rem] tw-basis-1/3 tw-rounded-xl tw-border tw-border-solid tw-border-neutralVariant-50 tw-p-4 tw-text-left tw-transition-colors tw-duration-200 tw-ease-emphasized-accelerate hover:tw-border-primary-90 hover:tw-bg-primary-90 hover:tw-text-primary-10 md:tw-aspect-square md:tw-max-w-16 dark:tw-border-neutralVariant-60 dark:hover:tw-border-primary-30 dark:hover:tw-bg-primary-30 dark:hover:tw-text-primary-90"
     @click="$emit('click')"
   >
     <b class="text-[2rem] tw-font-medium tw-leading-10 tw-tracking-normal">
@@ -11,7 +11,7 @@
     <slot />
     <TwIcon
       :path="icon"
-      class="tw-absolute tw-right-4 tw-top-4 !tw-h-8 !tw-w-8 tw-text-primary-40 dark:tw-text-primary-80 md:tw-h-8 md:tw-w-8"
+      class="tw-absolute tw-right-4 tw-top-4 !tw-h-8 !tw-w-8 tw-text-primary-40 md:tw-h-8 md:tw-w-8 dark:tw-text-primary-80"
     />
   </button>
 </template>
diff --git a/components/tw/Link.vue b/components/tw/Link.vue
index 03e46d3..fad47b1 100644
--- a/components/tw/Link.vue
+++ b/components/tw/Link.vue
@@ -1,6 +1,6 @@
 <template>
   <a
-    class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-50 tw-px-2 tw-py-1 !tw-text-neutral-10 tw-no-underline dark:tw-border-neutralVariant-60 dark:!tw-text-neutral-90 xl:tw-px-4 xl:tw-py-2"
+    class="tw-flex tw-items-center tw-justify-between tw-gap-4 tw-rounded-lg tw-border tw-border-solid tw-border-neutralVariant-50 tw-px-2 tw-py-1 !tw-text-neutral-10 tw-no-underline xl:tw-px-4 xl:tw-py-2 dark:tw-border-neutralVariant-60 dark:!tw-text-neutral-90"
     :title="$t('openLink')"
     :href="generatedUrl"
     target="_blank"
diff --git a/components/tw/NavigationBar.vue b/components/tw/NavigationBar.vue
index daba4e6..8d47e9d 100644
--- a/components/tw/NavigationBar.vue
+++ b/components/tw/NavigationBar.vue
@@ -1,9 +1,10 @@
 <template>
   <nav
-    class="tw-fixed tw-bottom-0 tw-z-10 tw-w-full tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider dark:tw-bg-neutral-10 md:tw-left-0 md:tw-top-0 md:tw-mt-16 md:tw-hidden md:tw-h-full md:tw-w-20"
+    :aria-label="$t('app.tabHome') || 'Bottom Navigation'"
+    class="tw-fixed tw-bottom-0 tw-z-10 tw-w-full tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider md:tw-left-0 md:tw-top-0 md:tw-mt-16 md:tw-hidden md:tw-h-full md:tw-w-20 dark:tw-bg-neutral-10"
   >
     <ul
-      class="tw-flex tw-list-none tw-items-center tw-justify-around tw-gap-x-2 tw-bg-primary-40/12 tw-py-1 !tw-pl-0 dark:tw-bg-primary-80/12 md:tw-h-full md:tw-flex-col md:tw-justify-center md:tw-gap-y-3 md:tw-py-0"
+      class="tw-flex tw-list-none tw-items-center tw-justify-around tw-gap-x-2 tw-bg-primary-40/12 tw-py-1 !tw-pl-0 md:tw-h-full md:tw-flex-col md:tw-justify-center md:tw-gap-y-3 md:tw-py-0 dark:tw-bg-primary-80/12"
     >
       <TwNavigationBarButton
         :to="localePath(`/regions/${region}/`)"
diff --git a/components/tw/NavigationRail.vue b/components/tw/NavigationRail.vue
index 0b8d27c..2b73ea4 100644
--- a/components/tw/NavigationRail.vue
+++ b/components/tw/NavigationRail.vue
@@ -1,6 +1,7 @@
 <template>
   <nav
-    class="tw-fixed tw-inset-y-0 tw-left-0 tw-z-30 tw-hidden tw-h-full tw-w-20 tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider dark:tw-bg-neutral-10 md:tw-block"
+    aria-label="Main Navigation"
+    class="tw-fixed tw-inset-y-0 tw-left-0 tw-z-30 tw-hidden tw-h-full tw-w-20 tw-bg-neutral-99 tw-text-sm tw-font-medium tw-leading-4 tw-tracking-wider md:tw-block dark:tw-bg-neutral-10"
   >
     <ul
       class="tw-flex tw-h-full tw-list-none tw-flex-col tw-items-center tw-gap-y-3 tw-bg-primary-40/25 tw-py-4 !tw-pl-0 dark:tw-bg-primary-80/12"
@@ -8,6 +9,7 @@
       <NuxtLink
         class="tw-group tw-relative -tw-m-2 tw-my-auto tw-h-14 tw-p-2 !tw-text-primary-40 tw-no-underline focus:tw-outline-none dark:!tw-text-white"
         :to="localePath('/')"
+        :aria-label="$t('app.tabHome')"
       >
         <div
           class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-full tw-bg-white tw-bg-opacity-0 tw-transition-colors tw-duration-200 group-hover:tw-bg-opacity-8 group-focus:tw-bg-opacity-12 dark:tw-bg-primary-20 dark:tw-opacity-0"
@@ -16,6 +18,7 @@
           viewBox="0 0 295.01 403.72"
           xmlns="http://www.w3.org/2000/svg"
           class="tw-h-8 tw-fill-current"
+          aria-hidden="true"
         >
           <path
             d="m147.51 1.875c-80.34 0-145.63 65.291-145.63 145.63 0 84.709 87.863 198.79 126.94 245.63 9.708 11.651 27.428 11.651 37.137 0 39.32-46.845 127.18-160.92 127.18-245.63 0-80.34-65.291-145.63-145.63-145.63zm0 70.631c34.895 0 63.158 3.9481 63.158 31.58v78.945c0 6.948-3.0785 13.185-7.8945 17.527v10.105c0 6.553-5.3678 11.842-11.842 11.842-6.553 0-11.842-5.3678-11.842-11.842v-3.9473h-63.158v3.9473a11.826 11.826 0 0 1-11.842 11.842 11.826 11.826 0 0 1-11.844-11.842v-10.105c-4.816-4.342-7.8945-10.579-7.8945-17.527v-78.945c0-27.632 28.263-31.58 63.158-31.58zm-47.367 31.58v39.473h94.734v-39.473h-94.734zm11.842 63.156a11.826 11.826 0 0 0-11.842 11.844 11.826 11.826 0 0 0 11.842 11.842c6.552 0 11.842-5.2888 11.842-11.842a11.826 11.826 0 0 0-11.842-11.844zm71.051 0c-6.552 0-11.842 5.2908-11.842 11.844a11.826 11.826 0 0 0 11.842 11.842 11.826 11.826 0 0 0 11.842-11.842 11.826 11.826 0 0 0-11.842-11.844z"
@@ -68,13 +71,24 @@
           <span class="tw-hidden 2xl:tw-inline">xl</span>
         </span>
       </TwNavigationBarButton>
-      <TwStandardIconButton v-if="dataIsLoaded" @click="openAlerts()">
+      <TwStandardIconButton
+        v-if="dataIsLoaded"
+        :aria-label="$t('app.tabAlerts') || 'Alerts'"
+        @click="openAlerts()"
+      >
         <TwIcon :path="mdiBell" />
       </TwStandardIconButton>
-      <TwStandardIconButton v-if="dataIsLoaded" @click="openRegionSwitcher()">
+      <TwStandardIconButton
+        v-if="dataIsLoaded"
+        :aria-label="$t('changeRegion') || 'Change Region'"
+        @click="openRegionSwitcher()"
+      >
         <TwIcon :path="mdiCity" />
       </TwStandardIconButton>
-      <TwStandardIconButton @click="openSettings()">
+      <TwStandardIconButton
+        :aria-label="$t('app.tabSettings') || 'Settings'"
+        @click="openSettings()"
+      >
         <TwIcon :path="mdiCog" />
       </TwStandardIconButton>
     </ul>
diff --git a/components/tw/RegionSwitcher.vue b/components/tw/RegionSwitcher.vue
index 5e46245..9a8a8f5 100644
--- a/components/tw/RegionSwitcher.vue
+++ b/components/tw/RegionSwitcher.vue
@@ -16,14 +16,14 @@
         :key="region.slug"
         :to="localePath(`/regions/${region.slug}`)"
         tag="button"
-        class="tw-group tw-relative tw-flex tw-aspect-square tw-shrink-0 tw-flex-col tw-items-start tw-justify-end tw-rounded-[1.75rem] tw-bg-cover tw-bg-center tw-bg-no-repeat tw-p-4 tw-text-left tw-text-neutral-98 tw-no-underline tw-transition-[flex-shrink] tw-duration-300 tw-ease-standard-effects-slow focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-40 disabled:tw-shrink disabled:tw-justify-between dark:focus:tw-outline-secondary-80 md:tw-aspect-auto md:tw-h-100 md:tw-w-60"
+        class="tw-group tw-relative tw-flex tw-aspect-square tw-shrink-0 tw-flex-col tw-items-start tw-justify-end tw-rounded-[1.75rem] tw-bg-cover tw-bg-center tw-bg-no-repeat tw-p-4 tw-text-left tw-text-neutral-98 tw-no-underline tw-transition-[flex-shrink] tw-duration-300 tw-ease-standard-effects-slow focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-40 disabled:tw-shrink disabled:tw-justify-between md:tw-aspect-auto md:tw-h-100 md:tw-w-60 dark:focus:tw-outline-secondary-80"
         :style="{
           backgroundImage: `url(${backendHost}/storage/content/regions/${region.image})`,
         }"
         :disabled="region.slug === currentRegion"
       >
         <div
-          class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-[1.75rem] tw-bg-gradient-to-b tw-from-primary-40/75 tw-to-primary-40/75 tw-transition-colors tw-duration-150 tw-ease-standard-effects-fast group-hover:tw-bg-neutral-10/8 group-focus:tw-bg-neutral-10/10 group-disabled:tw-bg-neutral-98/38 dark:tw-from-primary-30/75 dark:tw-to-primary-30/75 md:tw-from-transparent md:tw-via-transparent md:tw-to-primary-40/90 dark:md:tw-to-primary-30/90"
+          class="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-rounded-[1.75rem] tw-bg-gradient-to-b tw-from-primary-40/75 tw-to-primary-40/75 tw-transition-colors tw-duration-150 tw-ease-standard-effects-fast group-hover:tw-bg-neutral-10/8 group-focus:tw-bg-neutral-10/10 group-disabled:tw-bg-neutral-98/38 md:tw-from-transparent md:tw-via-transparent md:tw-to-primary-40/90 dark:tw-from-primary-30/75 dark:tw-to-primary-30/75 dark:md:tw-to-primary-30/90"
         ></div>
         <div
           v-if="region.slug === currentRegion"
diff --git a/components/tw/SideSheet.vue b/components/tw/SideSheet.vue
index db44fe5..0f0889b 100644
--- a/components/tw/SideSheet.vue
+++ b/components/tw/SideSheet.vue
@@ -8,14 +8,14 @@
     leave-to-class="*:-tw-translate-x-full !tw-bg-opacity-0"
   >
     <div
-      class="tw-fixed tw-inset-0 tw-z-20 tw-h-screen tw-w-screen tw-bg-neutralVariant-20 tw-bg-opacity-32 tw-transition-colors tw-duration-300 tw-ease-standard-effects-slow"
       v-if="isActive"
+      class="tw-fixed tw-inset-0 tw-z-20 tw-h-screen tw-w-screen tw-bg-neutralVariant-20 tw-bg-opacity-32 tw-transition-colors tw-duration-300 tw-ease-standard-effects-slow"
     >
       <section
-        class="tw-fixed tw-inset-x-0 tw-inset-y-0 tw-z-20 tw-h-full tw-overflow-y-auto tw-bg-neutral-96 tw-transition-transform tw-duration-500 tw-ease-standard-spatial dark:tw-bg-neutral-10 md:tw-left-20 md:tw-w-1/2 md:tw-max-w-100 md:tw-rounded-r-2xl md:tw-shadow-lg"
+        class="tw-fixed tw-inset-x-0 tw-inset-y-0 tw-z-20 tw-h-full tw-overflow-y-auto tw-bg-neutral-96 tw-transition-transform tw-duration-500 tw-ease-standard-spatial md:tw-left-20 md:tw-w-1/2 md:tw-max-w-100 md:tw-rounded-r-2xl md:tw-shadow-lg dark:tw-bg-neutral-10"
       >
         <div
-          class="tw-fixed tw-z-30 tw-flex tw-w-full tw-items-center tw-gap-x-3 tw-bg-neutral-96 tw-p-4 dark:tw-bg-neutral-10 md:tw-max-w-100 md:tw-rounded-tr-2xl"
+          class="tw-fixed tw-z-30 tw-flex tw-w-full tw-items-center tw-gap-x-3 tw-bg-neutral-96 tw-p-4 md:tw-max-w-100 md:tw-rounded-tr-2xl dark:tw-bg-neutral-10"
         >
           <TwStandardIconButton v-if="showBackButton" @click="$emit('back')">
             <TwIcon :path="mdiArrowLeft" />
@@ -29,8 +29,8 @@
         </div>
         <div class="tw-min-h-full tw-px-4 tw-pb-4">
           <div
-            class="tw-flex tw-w-full tw-items-center tw-justify-center tw-pt-20"
             v-if="isLoading"
+            class="tw-flex tw-w-full tw-items-center tw-justify-center tw-pt-20"
           >
             <TwIcon
               :path="mdiLoading"
@@ -48,11 +48,6 @@
 import { mdiArrowLeft, mdiClose, mdiLoading } from '@mdi/js'
 
 export default {
-  data: () => ({
-    mdiArrowLeft,
-    mdiClose,
-    mdiLoading,
-  }),
   props: {
     showBackButton: {
       type: Boolean,
@@ -73,5 +68,10 @@ export default {
       default: false,
     },
   },
+  data: () => ({
+    mdiArrowLeft,
+    mdiClose,
+    mdiLoading,
+  }),
 }
 </script>
diff --git a/components/tw/Switch.vue b/components/tw/Switch.vue
index a6e7949..4ca29e6 100644
--- a/components/tw/Switch.vue
+++ b/components/tw/Switch.vue
@@ -6,8 +6,8 @@
   >
     <div class="tw-relative">
       <input
-        type="checkbox"
         :id="id"
+        type="checkbox"
         class="tw-peer tw-sr-only"
         :checked="value"
         :disabled="disabled"
diff --git a/components/tw/TopAppBar.vue b/components/tw/TopAppBar.vue
index 6b39160..d5c7253 100644
--- a/components/tw/TopAppBar.vue
+++ b/components/tw/TopAppBar.vue
@@ -1,9 +1,9 @@
 <template>
   <nav
-    class="tw-fixed tw-inset-x-0 tw-top-0 tw-z-20 tw-flex tw-h-16 tw-w-full tw-items-center tw-gap-x-4 tw-bg-primary-40 tw-px-4 dark:tw-bg-neutral-10 md:tw-hidden"
+    class="tw-fixed tw-inset-x-0 tw-top-0 tw-z-20 tw-flex tw-h-16 tw-w-full tw-items-center tw-gap-x-4 tw-bg-primary-40 tw-px-4 md:tw-hidden dark:tw-bg-neutral-10"
   >
     <NuxtLink
-      class="tw-group tw-relative -tw-mx-2 -tw-my-2 tw-flex tw-items-center tw-gap-4 tw-px-2 tw-py-2 !tw-text-white tw-no-underline focus:tw-outline-none dark:!tw-text-neutral-90 md:-tw-mr-4 md:tw-pr-4"
+      class="tw-group tw-relative -tw-mx-2 -tw-my-2 tw-flex tw-items-center tw-gap-4 tw-px-2 tw-py-2 !tw-text-white tw-no-underline focus:tw-outline-none md:-tw-mr-4 md:tw-pr-4 dark:!tw-text-neutral-90"
       :to="localePath('/')"
     >
       <div
diff --git a/components/tw/landing/FurtherBlock.vue b/components/tw/landing/FurtherBlock.vue
index baa7c8d..6b448fb 100644
--- a/components/tw/landing/FurtherBlock.vue
+++ b/components/tw/landing/FurtherBlock.vue
@@ -5,7 +5,7 @@
       {{ description }}
     </p>
     <a
-      class="tw-block tw-w-full tw-rounded-full tw-bg-primary-30 tw-p-2 tw-text-center tw-text-lg tw-leading-none !tw-text-white tw-no-underline hover:tw-underline hover:tw-decoration-2 hover:tw-underline-offset-8 focus:tw-underline focus:tw-decoration-2 focus:tw-underline-offset-8 focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-30 dark:focus:tw-outline-secondary-80 md:tw-max-w-[75%] md:tw-py-4"
+      class="tw-block tw-w-full tw-rounded-full tw-bg-primary-30 tw-p-2 tw-text-center tw-text-lg tw-leading-none !tw-text-white tw-no-underline hover:tw-underline hover:tw-decoration-2 hover:tw-underline-offset-8 focus:tw-underline focus:tw-decoration-2 focus:tw-underline-offset-8 focus:tw-outline focus:tw-outline-3 focus:tw-outline-offset-2 focus:tw-outline-secondary-30 md:tw-max-w-[75%] md:tw-py-4 dark:focus:tw-outline-secondary-80"
       :href="`https://${subdomain}.transittracker.ca`"
       target="_blank"
     >
diff --git a/layouts/default.vue b/layouts/default.vue
index 34ab16d..faffe52 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,6 +9,7 @@
       <TwTopAppBar />
       <TwNavigationRail />
       <main
+        role="main"
         class="tw-mb-16 tw-mt-16 tw-flex tw-max-w-full tw-shrink-0 tw-grow tw-basis-auto tw-p-0 md:tw-mb-0 md:tw-ml-20 md:tw-mt-0"
       >
         <div class="tw-relative tw-max-w-full tw-shrink tw-grow tw-basis-auto">
diff --git a/layouts/error.vue b/layouts/error.vue
index dcb4bee..5fc8d3c 100755
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tw-flex tw-min-h-screen tw-w-full tw-flex-col md:tw-flex-row">
     <div
-      class="tw-flex tw-min-h-[30%] tw-grow tw-items-center tw-justify-center tw-bg-gradient-to-br tw-from-error-80 tw-to-error-60 dark:tw-from-error-10 dark:tw-to-error-30 md:tw-min-h-full md:tw-min-w-[30%]"
+      class="tw-flex tw-min-h-[30%] tw-grow tw-items-center tw-justify-center tw-bg-gradient-to-br tw-from-error-80 tw-to-error-60 md:tw-min-h-full md:tw-min-w-[30%] dark:tw-from-error-10 dark:tw-to-error-30"
     >
       <TwIcon
         class="!tw-h-10 !tw-w-10 tw-py-8 tw-text-white md:!tw-h-28 md:!tw-w-28"
diff --git a/pages/index.vue b/pages/index.vue
index 6a0f1ed..b71962e 100755
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,7 @@
       class="tw-relative tw-flex tw-w-full tw-flex-col md:tw-h-[75vh] md:tw-flex-row"
     >
       <div
-        class="tw-relative tw-z-[2] tw-flex tw-shrink-0 tw-grow tw-flex-col tw-space-y-8 tw-overflow-hidden tw-bg-primary-90 tw-p-8 tw-text-primary-10 dark:tw-bg-primary-30 dark:tw-text-primary-90 md:tw-order-1 md:tw-mb-0 md:tw-w-[45%] md:tw-justify-center md:tw-pb-0 md:tw-pt-0"
+        class="tw-relative tw-z-[2] tw-flex tw-shrink-0 tw-grow tw-flex-col tw-space-y-8 tw-overflow-hidden tw-bg-primary-90 tw-p-8 tw-text-primary-10 md:tw-order-1 md:tw-mb-0 md:tw-w-[45%] md:tw-justify-center md:tw-pb-0 md:tw-pt-0 dark:tw-bg-primary-30 dark:tw-text-primary-90"
       >
         <!-- eslint-disable vue/no-v-html -->
         <h1
@@ -71,7 +71,7 @@
         </div>
       </div>
       <div
-        class="tw-pointer-events-none tw-absolute tw-inset-0 tw-z-[1] tw-hidden tw-bg-gradient-100 tw-from-primary-90 tw-from-50% tw-to-transparent tw-to-70% dark:tw-from-primary-30 md:tw-block"
+        class="tw-pointer-events-none tw-absolute tw-inset-0 tw-z-[1] tw-hidden tw-bg-gradient-100 tw-from-primary-90 tw-from-50% tw-to-transparent tw-to-70% md:tw-block dark:tw-from-primary-30"
       ></div>
       <div
         id="tt-landing-map"
@@ -88,6 +88,7 @@
               style="width: 20px; height: 20px"
               class="tw-ml-1 tw-overflow-hidden"
               viewBox="0 0 24 24"
+              aria-hidden="true"
             >
               <path
                 fill="currentColor"
@@ -182,20 +183,29 @@
             class="tw-space-y-2 md:tw-w-1/3 md:tw-space-y-4"
             role="tablist"
             aria-orientation="vertical"
+            aria-label="Features"
           >
             <TwLandingScreenshotChoice
               :title="$t('onMap')"
               :is-tab-active="activeTab === 'map'"
               :description="$t('onMapDesc')"
               :icon="mdiMap"
+              tabindex="0"
+              role="tab"
+              :aria-selected="activeTab === 'map'"
               @click.native="activeTab = 'map'"
+              @keydown.native.enter.space.prevent="activeTab = 'map'"
             />
             <TwLandingScreenshotChoice
               :title="$t('onList')"
               :is-tab-active="activeTab === 'table'"
               :description="$t('onListDesc')"
               :icon="mdiTable"
+              tabindex="0"
+              role="tab"
+              :aria-selected="activeTab === 'table'"
               @click.native="activeTab = 'table'"
+              @keydown.native.enter.space.prevent="activeTab = 'table'"
             />
           </div>
         </div>
@@ -295,6 +305,7 @@
             href="https://github.com/TransitTracker"
             target="_blank"
             class="tw-mt-4 !tw-inline-flex"
+            :aria-label="$t('github') + ' (opens in a new tab)'"
           >
             <TwIcon :path="mdiOpenInNew" />
             {{ $t('github') }}
diff --git a/pages/maintenance.vue b/pages/maintenance.vue
index b9e6cf9..a57456e 100644
--- a/pages/maintenance.vue
+++ b/pages/maintenance.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="tw-bg-error-40 tw-p-4 tw-text-white dark:tw-bg-error-80 dark:tw-text-error-20 md:tw-py-8"
+      class="tw-bg-error-40 tw-p-4 tw-text-white md:tw-py-8 dark:tw-bg-error-80 dark:tw-text-error-20"
     >
       <div class="tw-container tw-mx-auto tw-w-full tw-space-y-4">
         <TwIcon class="!tw-h-20 !tw-w-20" :path="mdiServerNetworkOff" />
diff --git a/pages/regions/_region/download.vue b/pages/regions/_region/download.vue
index e76b420..e1ae72d 100644
--- a/pages/regions/_region/download.vue
+++ b/pages/regions/_region/download.vue
@@ -79,7 +79,7 @@
                   <li
                     v-for="agency in region.agencies"
                     :key="agency.slug"
-                    class="tw-relative tw-cursor-pointer tw-overflow-hidden tw-rounded-lg tw-py-1 tw-pl-2 tw-pr-10 tw-text-sm tw-font-medium tw-leading-5 tw-transition-colors hover:!tw-bg-neutral-10 hover:!tw-text-neutral-98 dark:hover:!tw-bg-neutral-90 dark:hover:!tw-text-neutral-6 md:tw-py-2"
+                    class="tw-relative tw-cursor-pointer tw-overflow-hidden tw-rounded-lg tw-py-1 tw-pl-2 tw-pr-10 tw-text-sm tw-font-medium tw-leading-5 tw-transition-colors hover:!tw-bg-neutral-10 hover:!tw-text-neutral-98 md:tw-py-2 dark:hover:!tw-bg-neutral-90 dark:hover:!tw-text-neutral-6"
                     :style="{
                       backgroundColor: `${agency.color}26`,
                     }"
diff --git a/pages/regions/_region/index.vue b/pages/regions/_region/index.vue
index 63d8f73..2f57508 100755
--- a/pages/regions/_region/index.vue
+++ b/pages/regions/_region/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div
+  <main
     class="tw-flex tw-min-h-screen tw-flex-col tw-bg-neutral-99 dark:tw-bg-neutral-10"
   >
     <div
@@ -37,6 +37,7 @@
             color="tonal"
             class="tw-hidden md:tw-flex"
             with-icon
+            :aria-label="$t('changeRegion')"
             @click="openRegionSwitcher()"
           >
             <TwIcon :path="mdiCity" />
@@ -197,6 +198,7 @@
         href="https://api.transittracker.ca"
         target="_blank"
         class="tw-text-primary-40 tw-no-underline hover:tw-text-primary-30 hover:tw-underline dark:tw-text-primary-80 dark:hover:tw-text-primary-90"
+        :aria-label="$t('forDevelopers') + ' (opens in a new tab)'"
       >
         {{ $t('forDevelopers') }} </a
       >&bull;
@@ -204,6 +206,7 @@
         href="https://api.transittracker.ca/vin"
         target="_blank"
         class="tw-text-primary-40 tw-no-underline hover:tw-text-primary-30 hover:tw-underline dark:tw-text-primary-80 dark:hover:tw-text-primary-90"
+        :aria-label="$t('exoVin') + ' (opens in a new tab)'"
       >
         {{ $t('exoVin') }} </a
       >&bull;
@@ -211,11 +214,12 @@
         href="https://github.com/TransitTracker"
         target="_blank"
         class="tw-text-primary-40 tw-no-underline hover:tw-text-primary-30 hover:tw-underline dark:tw-text-primary-80 dark:hover:tw-text-primary-90"
+        :aria-label="$t('github') + ' (opens in a new tab)'"
       >
         {{ $t('github') }}
       </a>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
diff --git a/pages/regions/_region/table.vue b/pages/regions/_region/table.vue
index 03c765a..ef301fe 100644
--- a/pages/regions/_region/table.vue
+++ b/pages/regions/_region/table.vue
@@ -303,7 +303,7 @@
     >
       <TwIcon
         :path="mdiTableColumnPlusBefore"
-        class="tw-h-12 tw-w-12 tw-text-primary-10 dark:tw-text-primary-90 md:tw-h-32 md:tw-w-32"
+        class="tw-h-12 tw-w-12 tw-text-primary-10 md:tw-h-32 md:tw-w-32 dark:tw-text-primary-90"
       />
       <h1
         class="tw-font-medium tw-leading-8 md:tw-text-[1.75rem] md:tw-font-normal md:tw-leading-9"