diff --git a/app/components/Compare/FacetBarChart.vue b/app/components/Compare/FacetBarChart.vue
index 4b0322fd32..07f8943263 100644
--- a/app/components/Compare/FacetBarChart.vue
+++ b/app/components/Compare/FacetBarChart.vue
@@ -113,6 +113,13 @@ function buildExportFilename(extension: string): string {
 const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     userOptions: {
       buttons: {
         tooltip: false,
@@ -272,6 +279,12 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #hint="{ isVisible }">
+          <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
+            {{ $t('compare.packages.bar_chart_nav_hint') }}
+          </p>
+        </template>
+
         <template #pattern="{ patternId, seriesIndex }">
           <ChartPatternSlot
             v-if="seriesIndex != 0"
@@ -349,6 +362,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px !important;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .facet-bar .atom-subtitle {
   width: 80% !important;
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
index 41ad9e979f..21bddcf2f7 100644
--- a/app/components/Package/TrendsChart.vue
+++ b/app/components/Package/TrendsChart.vue
@@ -1388,6 +1388,15 @@ watch(
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme),
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       height: chartHeight.value,
       backgroundColor: colors.value.bg,
@@ -1878,6 +1887,13 @@ watch(selectedMetric, value => {
             @zoomEnd="setIsZoom"
             @zoomReset="isZoomed = false"
           >
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
@@ -2130,6 +2146,19 @@ watch(selectedMetric, value => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .vue-ui-pen-and-paper-actions {
   background: var(--bg-elevated) !important;
diff --git a/app/components/Package/VersionDistribution.vue b/app/components/Package/VersionDistribution.vue
index d27523b2e1..e104851546 100644
--- a/app/components/Package/VersionDistribution.vue
+++ b/app/components/Package/VersionDistribution.vue
@@ -161,6 +161,15 @@ const hasMinimap = computed<boolean>(() => {
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       title: {
         text: dateRangeLabel.value,
@@ -447,6 +456,13 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       <ClientOnly v-if="xyDataset.length > 0 && !error">
         <div class="chart-container w-full" :key="groupingMode">
           <VueUiXy :dataset="xyDataset" :config="chartConfig" class="[direction:ltr]">
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Inject legend during SVG print only -->
@@ -664,6 +680,18 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 :deep(.vue-ui-xy) svg rect {
   transition: none !important;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0 !important;
+}
+
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
 </style>
 
 <style>
diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue
index 416c94560a..eed8954196 100644
--- a/app/components/Package/WeeklyDownloadStats.vue
+++ b/app/components/Package/WeeklyDownloadStats.vue
@@ -313,6 +313,15 @@ function layEgg() {
 
 const config = computed<VueUiSparklineConfig>(() => {
   return {
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     theme: 'dark',
     /**
      * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.
@@ -416,6 +425,13 @@ const config = computed<VueUiSparklineConfig>(() => {
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p v-if="isVisible" class="text-accent text-xs text-center mt-2" aria-hidden="true">
+                  {{ $t('package.downloads.sparkline_nav_hint') }}
+                </p>
+              </template>
+
               <template #skeleton>
                 <!-- This empty div overrides the default built-in scanning animation on load -->
                 <div />
@@ -493,6 +509,12 @@ const config = computed<VueUiSparklineConfig>(() => {
 .opacity-leave-from {
   opacity: 1;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px;
+}
 </style>
 
 <style>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 02c1af000f..f03ed84bf1 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -482,6 +482,12 @@
       "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "Use the left and right arrow keys to cycle through data points.",
+        "keyboard_navigation_vertical": "Use the up and down arrow keys to cycle through data points.",
+        "table_available": "A data table for this chart is available below.",
+        "table_caption": "Chart data table"
+      },
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
@@ -540,7 +546,8 @@
     "downloads": {
       "title": "Weekly Downloads",
       "community_distribution": "View community adoption distribution",
-      "subtitle": "Across all versions"
+      "subtitle": "Across all versions",
+      "sparkline_nav_hint": "Use ← →"
     },
     "install_scripts": {
       "title": "Install Scripts",
@@ -1105,7 +1112,9 @@
       "empty_title": "Select packages to compare",
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics.",
       "table_view": "Table",
-      "charts_view": "Charts"
+      "charts_view": "Charts",
+      "bar_chart_nav_hint": "Use ↑ ↓",
+      "line_chart_nav_hint": "Use ← →"
     },
     "selector": {
       "search_label": "Search for packages",
diff --git a/i18n/locales/fr-FR.json b/i18n/locales/fr-FR.json
index 767146115b..fa1bfe86e2 100644
--- a/i18n/locales/fr-FR.json
+++ b/i18n/locales/fr-FR.json
@@ -449,6 +449,12 @@
       "show_less": "(afficher moins)"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "Utilisez les touches fléchées gauche et droite pour parcourir les points de données.",
+        "keyboard_navigation_vertical": "Utilisez les touches fléchées haut et bas pour parcourir les points de données.",
+        "table_available": "Un tableau de données pour ce graphique est disponible ci-dessous.",
+        "table_caption": "Tableau de données du graphique"
+      },
       "granularity": "Granularité",
       "granularity_daily": "Par Jour",
       "granularity_weekly": "Par Semaine",
@@ -506,7 +512,8 @@
     "downloads": {
       "title": "Téléchargements hebdo.",
       "community_distribution": "Voir la distribution des versions téléchargées par la communauté",
-      "subtitle": "Toutes versions confondues"
+      "subtitle": "Toutes versions confondues",
+      "sparkline_nav_hint": "Utilisez ← →"
     },
     "install_scripts": {
       "title": "Scripts d'installation",
@@ -1058,7 +1065,11 @@
       "loading": "Chargement des données des paquets...",
       "error": "Échec du chargement des données. Veuillez réessayer.",
       "empty_title": "Sélectionnez des paquets à comparer",
-      "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes."
+      "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes.",
+      "table_view": "Tableau",
+      "charts_view": "Graphiques",
+      "bar_chart_nav_hint": "Utilisez ↑ ↓",
+      "line_chart_nav_hint": "Utilisez ← →"
     },
     "selector": {
       "search_label": "Rechercher des paquets",
diff --git a/i18n/schema.json b/i18n/schema.json
index 885bd6eb5e..e1ae6a54eb 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1450,6 +1450,24 @@
         "trends": {
           "type": "object",
           "properties": {
+            "chart_assistive_text": {
+              "type": "object",
+              "properties": {
+                "keyboard_navigation_horizontal": {
+                  "type": "string"
+                },
+                "keyboard_navigation_vertical": {
+                  "type": "string"
+                },
+                "table_available": {
+                  "type": "string"
+                },
+                "table_caption": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
+            },
             "granularity": {
               "type": "string"
             },
@@ -1626,6 +1644,9 @@
             },
             "subtitle": {
               "type": "string"
+            },
+            "sparkline_nav_hint": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -3321,6 +3342,12 @@
             },
             "charts_view": {
               "type": "string"
+            },
+            "bar_chart_nav_hint": {
+              "type": "string"
+            },
+            "line_chart_nav_hint": {
+              "type": "string"
             }
           },
           "additionalProperties": false
diff --git a/package.json b/package.json
index 6812ebc6a7..2c1453840d 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.12",
     "vue": "3.5.30",
-    "vue-data-ui": "3.15.12"
+    "vue-data-ui": "3.16.0"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62896004f4..ac724298f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -235,8 +235,8 @@ importers:
         specifier: 3.5.30
         version: 3.5.30(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.15.12
-        version: 3.15.12(vue@3.5.30(typescript@5.9.3))
+        specifier: 3.16.0
+        version: 3.16.0(vue@3.5.30(typescript@5.9.3))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.2.0
@@ -10577,8 +10577,8 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
-  vue-data-ui@3.15.12:
-    resolution: {integrity: sha512-FQiovjgyNOgATsSYsyF/2bbnnCaLISNKFbJ0Kjt8oi+x74dTMjY6r+FG2kpFu50LRryzsVrNzRANhPbCInYXIw==}
+  vue-data-ui@3.16.0:
+    resolution: {integrity: sha512-5f9mJi5vkC/48ntfBwxVG8AjuyZBf7nK9dzQDcL8L9xEFlRHuIrXB1YMt1qDQEWimcPSmWZ051KUQm/cSS3U5g==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23356,7 +23356,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
-  vue-data-ui@3.15.12(vue@3.5.30(typescript@5.9.3)):
+  vue-data-ui@3.16.0(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       vue: 3.5.30(typescript@5.9.3)