屏幕阅读器＆amp;选项卡焦点重置为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