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.

NOTE: The attachElement property is no longer supported due to scroll to content feature and the menu being in a fixed position at the top of the page.

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
• ‘skipto’: Used by this website and OpenA11y project documentation websites
• ‘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
• 'wisc': A theme inspired by University of Wisconsin brading colors.
• If you would like a theme 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 reflect user preferences.

NOTE: altButtonLabel and optionButtonLabel are deprecated as configuration options. The values are computed from buttonLabel, altLabel, optionLabel and shortcutLabel and .

Menu, Group and Menuitem Labeling

The labels and messages can be localized for specific languages or reflect user preferences.

Landmark Region Names

The names of landmark region names can be localized for specific languages or reflect user preferences.

About Dialog

Setting and internationalization messaging in the About Dialog.

Shortcut Keys

The shortcuts used to sequentially navigate landmark regions and headings.

Shortcuts Menu Items

The internationalization of shortcut information in the menu.

Shortcut Messages

Messages used in the shortcuts and message dialogs.

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: h1 h2 h3; colorTheme: illinois"
  src="https://skipto-landmarks-headings.github.io/page-script-5/dist/skipto.min.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: 'h1 h2 h3',
    colorTheme: 'illinois'
  };
</script>

or

<script>
  window.SkipToConfig =  {};
  window.SkipToConfig.landmarks  = 'main search navigation';
  window.SkipToConfig.headings   = '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.