vue-router 的屏幕阅读器和选项卡焦点重置

Question

似乎焦点重置和屏幕阅读器注意到路由更改不是 vue-router 的一部分。

我明白为什么 vue 可能会忽略这一点，因为用例可能会有所不同，但我对缺乏有关可访问性/SPA 路由器的信息感到惊讶。

这似乎是一个常见的 SPA 问题，我很好奇是否有人对此有推荐的解决方案，或者是否有计划将其实施到 vue-router 的核心中。

似乎专用的 aria-live 区域可能是宣布页面更改的不错选择，但我很好奇一旦用户访问新路线，将标签焦点和屏幕阅读器重置到新页面的顶部。

这是我找到的一篇文章。

https://medium.com/@robdel12/single-page-apps-routers-are-broken-255daa310cf

Answer 1

我写了一个库来解决这个问题：Oaf Vue Router。

它照顾：

• 页面导航后重置滚动和焦点
• 导航后设置页面标题
• 向屏幕阅读器用户宣布导航
• 哈希片段支持

安装：

# yarn
yarn add oaf-vue-router

# npm
npm install oaf-vue-router

基本用法：

import VueRouter from "vue-router";
import { wrapRouter } from "oaf-vue-router";

const router = new VueRouter({
  ...
  ...
  ...
});

wrapRouter(router);

高级用法：https://github.com/oaf-project/oaf-vue-router#advanced-usage