屏幕阅读器vue-router 的选项卡焦点重置 [英] Screen readers & tab focus resets for vue-router

问题描述

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

Seems like focus resets and screen readers noticing route changes isn't part of vue-router.

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

I can see why vue might leave this out since use cases might vary, but I'm surprised at the lack of info about accessibility / SPA routers.

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

This seems like a common SPA issue and I'm curious if anyone has a recommended solutions to this or if there are plans to implement this into the core of vue-router.

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

Seems like dedicated aria-live region might be a decent option for announcing page changes, but I'm curious about resetting tab focus and screen-readers to the top of the new page once a user visits a new route.

这是我找到的一篇文章.

Here's an article I did find.

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

推荐答案

我写了一个库来解决这个问题:Oaf Vue 路由器.

I wrote a library to address this: 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-项目/oaf-vue-router#advanced-usage

这篇关于屏幕阅读器vue-router 的选项卡焦点重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！