Join GitHub today
Improve vue-router's screen reader experience #2488
What problem does this feature solve?
This feature request is about the screen reader experience of apps built with vue-router. In a nutshell: When a user of assistive technology, such as a screen reader, activates a
One way is to set the focus to the newly loaded content.
My suggestion on this to match Reach Router behavour (which puts, after route transition, the focus on the wrapper of the loaded components. In my understanding the vue-router counterpart for this is
You could also go even further by defining a "focus target". I wrote about this approach here: https://marcus.io/blog/accessible-routing-vuejs
What does the proposed API look like?
I think this is a great idea, since I will have to implement this behaviour in order to make our app fully accessible.
I was looking at scrollBehaviour and thinking that it might make sense to tackle focusing on route change in a similar way, say,
It becomes a little tricky figuring out how to best handle focusing on elements. Typically, though a safe default would be the wrapper element for the route itself (you just might have to add tabindex="0" to it, possibly programmatically)
I'm currently fighting with how to throw focus to a layout component with a router-view because I want to focus on its header on change of its router-view