screen-reader-route-manager
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    Screen Reader Route Manager

    Installation

    npm install screen-reader-route-manager
    

    Reason for library

    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.

    Screen readers tested

    • NVDA + Firefox - Windows
    • VoiceOver + Safari - iOS
    • VoiceOver + Safari - macOS
    • VoiceOver + Chrome - macOS
    • Talkback + Chrome - Android
    • JAWS + IE11 - Windows
    • JAWS + Chrome - Windows

    Usage

    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.

    An example codesandbox

    Demo

    See it in action

    Install

    npm i screen-reader-route-manager

    DownloadsWeekly Downloads

    736

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    6.05 kB

    Total Files

    4

    Last publish

    Collaborators

    • kenneth-gray