Configuration Options

All settings have a default value, a data-skipto attribute on the script element or a global configuration object (e.g. SkipToConfig) can be used to change the default values and to localize the menu text to a specific language.

Options for adding the button element

The following options are useful for identify where the menu will be in the DOM structure of the page and which elements will be used as the container for the menu button. The options are of type string.

Button Positioning

Button Font Family and Font Size

Identifying Landmarks and Headings for the menu

The landmarks and ‘headings’ options are a space separated list of tag and landmark region names to identify the important landmark regions and headings on the page for the purpose of keyboard navigation. The list of landmarks and headings should be relatively short, the more items the menu contains the more time the user will need to scan and navigate to the section they want to “skip to”. The values are considered tokens to maximize compatibility with version 4 CSS selectors for these properties.

The options are of type string.

Color Theme Options

A color theme sets all the color options defined by the theme.

Current Color Theme Values:

• ‘aria’ : Used in ARIA Authoring practices
• ‘illinois’: Used by the University of Illinois at Champaign/Urbana
• ‘uic’ : Used by the University of Illinois at Chicago
• ‘uillinois’ : Used by the University of Illinois Administration
• ‘uis’ : Used by the University of Illinois at Springfield

• ‘openweba11y’ : Used by Open Web Accessibility Services

• If you would like a them added for your organization, please file an issue with the desired colors

Colors used for Button and Menu styling

Color values must use CSS color values, for example #8AF, rgb(40, 50, 90), #a0bf32, blue.

NOTE: Make sure colors meet the color contrast requirements of WCAG 2.1 for text

Internationalization (I18N)

The text labels and messages can be updated through configuration to local language requirements.

Button Labeling

The labels and messages can be localized for specific languages or updated to reflect custom selectors.

Menu, Group and Menuitem Labeling

The labels and messages can be localized for specific languages or updated to reflect custom selectors.

Example Settings

There are two ways for an author to configure SkipTo.js:

1. data-skipto attribute
2. Global variable

Settings Using Data Attribute

You can customize SkipTo.js to the features of your website by using a data-skipto attribute on the script element. Each property/value setting is separated by a semi-colon (;), and each property name and value is separated by a colon (:).

The following is a sample configuration:

<script
  data-skipto="landmarks: main search navigation; headings: main h1 h2 h3; colorTheme: illinois"
  src="https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.js">
</script>

Settings Using Global Object

You can customize SkipTo.js to the features of your website by using a global object variable.

The following is a sample configuration:

<script>
  var SkipToConfig =  {
    landmarks: 'main search navigation',
    headings: 'main h1 h2 h3',
    colorTheme: 'illinois'
  };
</script>

or

<script>
  window.SkipToConfig =  {};
  window.SkipToConfig.landmarks  = 'main search navigation';
  window.SkipToConfig.headings   = 'main h1 h2 h3';
  window.SkipToConfig.colorTheme = 'illinois';
</script>

NOTE: Configuration objects in version 4.x are still supported for compatibility with existing installations. Version 5.x is providing a less complex object for customizing SkipTo.js.

HTML, Classes and Ids for custom styling

The source code in this section is for developers to understand the HTML, classes and ids used in the SkipTo.js menu button and menu for use in custom styling.

<div class="id-skip-to" class="MyCustomClass">
  <!--
  //
  // Menu Button
  //
  -->
  <button
    aria-haspopup="true"
    aria-expanded="true"
    aria-label="Skip to content, shortcut Alt plus 0">
    Skip To Content (Alt+0)
  </button>
  <!--
  //
  // ARIA enabled menu
  //
  -->
  <div role="menu">
    <!--
    //
    // Landmark group label and menu items
    //
    -->
    <div id="id-skip-to-group-landmarks-label"
      role="separator">
      Important Landmarks
    </div>
    <div role="group"
      aria-labelledby="id-skip-to-group-landmarks-label" id="id-skip-to-group-landmarks">
      <div role="menuitem"
        class="landmark skip-to-main skipto-nesting-level-0"
        data-id="1">
        <span class="label">Main</span>
      </div>
      <div role="menuitem"
        class="landmark skip-to-nav skipto-nesting-level-0"
        data-id="2">
        <span class="label">Navigation: SkipTo test pages</span>
      </div>
      <!--
      ... more menu items ...
      -->
    </div>
    <!-- End Landmarks Group -->

    <!--
    //
    // Heading group label and menu items
    //
    -->
    <div id="id-skip-to-group-headings-label"
      role="separator">
      Important Headings
    </div>
    <div role="group"
      aria-labelledby="id-skip-to-group-headings-label"
      id="id-skip-to-group-headings">
      <div role="menuitem"
        class="heading skip-to-h1"
        data-id="9"
        data-level="1">
        <span class="level"><span>1</span>)</span>
        <span class="label">Example Content</span>
      </div>
      <div role="menuitem"
        class="heading skip-to-h2"
        data-id="10"
        data-level="2">
        <span class="level"><span>2</span>)</span>
        <span class="label">Pastrami</span>
      </div>
      <!--
      ... more menu items ...
      -->
    </div>
    <!-- End Headings Group -->
  </div>
</div>

Example CSS selector:

nav#id-skip-to.MyCustomClass {
  background:  red;
  left: 50px;
  top: 50px;
}

Warning Messages

The following warning messages may be rendered to the console:

Feedback and Reporting Issues

We welcome your feedback! Please do not hesitate to raise issues and comment on Github if something doesn’t work or you have ideas on how to improve the script.

Happy skipping!