Search code examples
vue.jsvue-router

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

Solution

  • 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