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

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

Screen readers & tab focus resets for vue-router

vue.js

vue-router