npm install screen-reader-route-manager
One of the issues screen reader users face when they access Single Page Apps (SPAs) is selecting links will often not read out the page they navigate to. This library aims to fix that issue by reading out the document.title
of the new page and moving focus to the top. This means that document.title
must be also set correctly before routeManager.afterRouteChange()
can be called.
- NVDA + Firefox - Windows
- VoiceOver + Safari - iOS
- VoiceOver + Safari - macOS
- VoiceOver + Chrome - macOS
- Talkback + Chrome - Android
- JAWS + IE11 - Windows
- JAWS + Chrome - Windows
import routeManager from 'screen-reader-route-manager';
// To be called before the URL is changed.
routeManager.beforeRouteChange();
// To be called after the URL is changed
routeManager.afterRouteChange();
afterRouteChange
won't execute anything if beforeRouteChange
hasn't been called. This is to prevent unwanted focus management forcing the user to the top of the page.