skipto@4.1

by PayPal Accessibility Team & University of Illinois

See the Authors section for more information.

SkipTo is a replacement for your old classic "Skip To Main Content" link, (so please use it as such)!
The SkipTo script creates a drop-down menu consisting of the links to important landmarks and headings on a given web page identified by the author. Once installed and configured, the menu makes it easier for keyboard and screen reader users to quickly jump to the desired region of a page by simply choosing it from the list of options.

$3

* Modern way to conform to the "Bypass Blocks" requirement of the Web Content Accessibility Guidelines.
* Screen reader users can get a higher level navigation menu without having to use the screen reader landmark and header navigation commands which typically include longer lists of lower level headings and less used landmarks.
* Keyboard only users can more efficiently navigate to content on a page.
* Speech recognition users can use the menu to more efficiently navigate to content on a page.
* When the "Skip To Content" menu button is visible when the page is loaded everyone can use it to identify and navigate to important regions on a page.
* Authors can configure SkipTo to identify the most important regions, ideally about 7-12 items to make it easier for people to read the list and choose an option. Remember the more items, the longer it will take for the user to identify which item they want to choose.

!Example Screen Shot

Websites using SkipTo

There are two main ways to use the menu button for SkipTo in a page. In the default configuration the menu button is always visible making it useful to everyone to easily find and navigate to the important content regions identified by the author. This is similar to how curb cuts help more than just people using wheelchairs. It is also easier for people using voice recognition to activate the button using the "click skip to content" command and use similar voice commands to activate SkipTo menu items. The "popup" option is the more traditional approach to fulfilling the "bypass bocks" requirement of the Web Content Accessibility Guidelines, but this option makes the feature less visible to people who might benefit.

$3

$3

NOTE: Popup menu button option is available through configuration of SkipTo when it is loaded.

How it works

1. The SkipTo menu button should be the first tabable element on the page, and by default the button is visible, but can be configured to "popup" when the button becomes receives focus.
2. Once the keyboard focus is on the menu button, pressing the ENTER, SPACE, DOWN ARROW or UP ARROW keys will pull down the list of important landmarks and headings on the page. The button is based on the ARIA Authoring Practice design pattern for menu button.
3. Use arrow keys to select your choice and press ENTER to move focus to the section of the page.
4. If you decide to reach the menu again, simply press the built-in access key (0 by default). See the notes on Access keys for More information on how to use them.

Access keys

Access keys work just like regular shortcut keys except that they need a browser-specific modifier key in order to work. For example, to use the "SkipTo" access key, you would press the modifier key + the access key ("0" is the default accesskey). A list for how this would work in most popular browsers and operating systems.

* Mozilla Firefox -- Alt+Shift+0 (Windows or Linux) and Control+Option+0 (Mac OS)
* Google Chrome and Opera -- Alt+0 (Windows or Linux) and Control+Option+0 (Mac OS).
* Safari -- Control+Option+0 (MacOS).

NOTE: Browsers on iOS and iPadOS devices support accesskey to move focus to the menu button, but do not support the menu button keyboard commands to use the menu at this time. Browsers on Android devices do not support accesskeys at this time.

Adding to Website

All you need are either skipto.js or skipto.min.js from the "downloads/js" directory. Please note that skipto.min.js is a minified (a lighter version) of the script.
If you would like to be able to debug your production-ready script, include the provided skipto.min.js.map file as well.

$3

Copy the skipto.js or skipto.min.js to the file system of your web server and reference it from your web page or templates using a script tag, as follows:

``html

`

$3

The easiest way is to include a reference to skipto.min.js on your HTML page or template is through the CDN service, as follows:

`html

`

NOTE: CDN referenced files may not be available to computers behind firewall protected networks.

$3

Joomla 4.0 includes skipto as a default plugin

Configure Options

All settings have a default value, a configuration object can be used to change the default values.

$3

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.

| Property | default | Description |
| :------------- | :---------- | :---------- |
| displayOption | 'static' | Values of static, fixed or popup are defined. The value static the button is always visible, the value fixed the button is always visible at the top of the page even when the page scrolls, and the value popup is used the button is initially not visible, but becomes visible when it receives focus. |
| accessKey | '0' | Accesskey provides a way to open the Skip To menu from anywhere on the page, the default is the number zero. |
| attachElement | 'header' | A CSS selector for identifying which element to attach the menu button container. If the header element is not present, it will use the body element as the default.|
| containerElement | 'div' | Element to use as a container for the button and the menu.
| customClass | none | CSS class added to the container element. Can be used for customize styling of the button and menu with author supplied stylesheet. |
| containerRole | none | Optional landmark role added to a container element, if the container element is not within a landmark. Ideally the menu button is placed within the banner landmark (e.g. header element. |

$3

| Property | Type | Default | Description |
| :------------- | :----- | :------ | :---------- |
| positionLeft | length | 46% | The position of the "Skip To Content" button from left margin. |

$3

| Property | Type | Default | Description |
| :------------- | :----- | :------ | :---------- |
| fontSize | CSS font size | inherit | Set the CSS font-size using the configuration object. |
| fontFamily | CSS font string | inherit | Set the CSS font-family using the configuration object. |

$3

The landmarks and 'headings' options are CSS selectors used to identify the important landmarks 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 options are of type string.

| Property | Default | Description |
| :------------- | :------ | :---------- |
| landmarks | 'main, [role="main"], [role="search"], nav, [role="navigation"], aside, [role="complementary"]' | A set of CSS selectors used by querySelectorAll to get an array of landmark elements. |
| headings | 'main h1, [role="main"] h1, main h2, [role="main"] h2' | A set of CSS selectors used by querySelectorAll to get an array of heading elements. |

$3

A color theme sets all the color options defined by the theme. There is only one theme at this time.

| Property | Type | Default | Description |
| :------------- | :----- | :------ | :---------- |
| colorTheme | string | default | A predefined color scheme for skipTo, currently values 'default', 'illinois' and 'aria'|

$3

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

| Property | Type | Default | Description |
| :------------- | :----- | :------ | :---------- |
| buttonTextColor | Color | #1a1a1a | Color of text for "Skip To Content" button. |
| buttonBackgroundColor | Color | #eeeeee | Background color of text for "Skip To Content" button. |
| focusBorderColor | Color | #1a1a1a | Border color for items with keyboard focus. |
| menuTextColor | Color | #1a1a1a | Menu text color |
| menuBackgroundColor | Color | #dcdcdc | Menu background color. |
| menuitemFocusTextColor | Color | #eeeeee | Menuitem text color when a menuitem has focus. |
| menuitemFocusBackgroundColor | Color | #1a1a1a | Menuitem text background when a menuitem has focus. |

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

$3

The inclusion of heading level shortcut keys and the more landmarks and more headings action buttons are enabled by default, but they can be disabled through configuration. The values are of type boolean.

| Property | Default | Description |
| :------------- | :------ |:---------- |
| enableActions | 'false' | Enable ('true') or disable ('false') the action buttons in the menu. This should only be enabled if you feel the full heading and landmark strcuture of your pages would be useful for keyboard navigation. NOTE: Enabling this feature can result in long lists of headings or landmarks that may not be very useful to users. |
| enableHeadingLevelShortcuts | 'true' | Enable ('true') or disable ('false') the heading levels on the heading menu items. |

Internationalization (I18N)

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

$3

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

| Property | Default | Description |
| :------------- | :------ |:---------- |
| buttonLabel | 'Skip to Content' | Change the label for the button. |
| buttonTooltip | _empty string_ | Help message when accesskey is not defined. |
| buttonTooltipAccesskey | 'Accesskey is "$key"' | Help message when an accesskey is defined. |
| accesskeyNotSupported | _empty string_ | No longer used in tooltip. |

#### Deprecated Button Labeling

The following properties were deprecated for a more descriptive title of "tooltip", which now has keyboard suport.

| Property | Default | Description |
| :------------- | :------ |:---------- |
| buttonTitle | _empty string_ | Deprecated help message when accesskey is not defined, use buttonTooltip instead. |
| buttonTitleAccesskey | _empty string_ | Deprecated help message when an accesskey is defined, use buttonTooltipAccesskey instead. |

$3

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

| Property | Default | Description |
| :------------- | :------ |:---------- |
| menuLabel | 'Landmarks and Headings' | Change the label for the menu. |
| landmarkGroupLabel | 'Landmarks' | Menu group label for landmarks . |
| headingGroupLabel | 'Headings' | Menu group label for headings. |
| mofnGroupLabel | '$m of $n' | Provides information on the number of items that are displayed and the total number of items in the document. The information is added to the landmark and heading group labels. |
| headingLevelLabel | 'Heading level' | Used for aria-label to improve labeling of heading menu items for screen reader users. |
| mainLabel | 'main' | The label in the menu for main landmarks |
| searchLabel | 'search' | The label in the menu for search landmarks |
| navLabel | 'navigation' | The label in the menu for navigation landmarks |
| asideLabel | 'aside' | The label in the menu for complementary landmarks |
| footerLabel | 'footer' | The label in the menu for contentinfo landmarks |
| headerLabel | 'header' | The label in the menu for banner landmarks |
| formLabel | 'form' | The label in the menu for form landmarks |
| msgNoLandmarksFound | 'No landmarks to skip to'| Message for when no landmarks are found. |
| msgNoHeadingsFound | 'No main headings to skip to'| Message for when no headings are found. |

$3

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

| Property | Default | Description |
| :------------- | :------ |:---------- |
| menuLabel | 'Landmarks and Headings' | Change the label for the menu. |
| landmarkImportantGroupLabel | 'Important Landmarks' | Menu group label for
| actionGroupLabel | 'Actions' | The group label for the action menu items. |
| actionShowHeadingsHelp | 'Toggles between showing "All" and "Important" headings.' | The value of the title attribute for the show headings action menu item. |
| actionShowImportantHeadingsLabel | 'Show Important Headings ($num)' | The label for the menu item when the button action is to show "Important" headings. |
| actionShowAllHeadingsLabel | 'Show All headings ($num)'| The label for the menu item when the button action is to show "All" headings. |
| actionShowLandmarksHelp | 'Toggles between showing "All" and "Important" landmarks.' | The value of the title attribute for the show landmarks action menu item. |
| actionShowImportantLandmarksLabel | 'Show Important landmarks ($num)' | The label for the menu item when the button action is to show "Important" landmarks. |
| actionShowAllLandmarksLabel | 'Show All landmarks ($num)' | The label for the menu item when the button action is to show "All" landmarks. |
| actionShowImportantHeadingsAriaLabel | 'Show $num Important Headings' | The aria-label for the menu item when the button action is to show "Important" headings. |
| actionShowAllHeadingsAriaLabel | 'Show All $num headings'| The aria-label for the menu item when the button action is to show "All" headings. |
| actionShowImportantLandmarksAriaLabel | 'Show $num Important landmarks' | The aria-label for the menu item when the button action is to show "Important" landmarks. |
| actionShowAllLandmarksAriaLabel | 'Show All $num landmarks' | The aria-label for the menu item when the button action is to show "All" landmarks. |

Example Settings

If have different requirements for your web site and include other heading levels as well as ARIA landmarks, you will need to provide a JSON object containing the necessary configuration parameters. The following is a sample configuration:

`html

`

$3

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

`html
class="skip-to"
title='Keyboard Navigation Accesskey is "Alt+0"'
>

aria-haspopup="true"
aria-expanded="true"
accesskey="0">
Skip To Content