SkipTo.js for Keyboard Navigation

Goals

  • Improve keyboard accessibility to web page content. Basically give keyboard users some of the header and landmark navigation features available in screen readers.
  • Allow authors to identify more than one important navigational point within web resources.
  • Make it simpler to implement Bypass Blocks requirement.
  • Make hidden header and landmark region information available to all users to help promote a better understanding of accessibility.

Examples

Configuration Information

  • Include reference to skipto.js script in the page template.
  • To change default settings use the SkipToConfig object.

Example Configuration

    <script src="https://cdn.disability.illinois.edu/skipto.min.js"></script>
    <script>
        var SkipToConfig =  {
            'settings': {
                'skipTo': {
                    landmarks: 'main, [role="main"], [role="search"], nav',
                    headings: 'main h1, main h2',
                    colorTheme: 'illinois',
                    customClass: 'aitg'
                }
            }
        };
    </script>