Screen readers & tab focus resets for vue-router

问题

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

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.

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.

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

回答1:

I wrote a library to address this: Oaf Vue Router.

It takes care of:

• Reset scroll and focus after page navigation
• Set the page title after navigation
• Announce navigation to users of screen readers
• Hash fragment support

Installation:

# yarn
yarn add oaf-vue-router

# npm
npm install oaf-vue-router

Basic usage:

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

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

wrapRouter(router);

Advanced usage: https://github.com/oaf-project/oaf-vue-router#advanced-usage

来源：https://stackoverflow.com/questions/50865553/screen-readers-tab-focus-resets-for-vue-router