<commit_before><img src="images/logo_347x50_PPa11y.png" alt="PayPal accessibility logo">

# skipto@3.0
## by PayPal Accessibility Team & University of Illinois
See the [Authors](#authors) section for more information.

SkipTo is a replacement for your old classic "Skipnav" 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. Once installed and configured, the menu makes it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.

### Benefits of skipto
* All users can get an outline of the content on the page.
* 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.

![Example Screen Shot](images/example_screen_shot.png "Example Screen Shot")

## How it works
1.  The SkipTo menu button is the first tabable element on the page, and if it is not visible becomes the first time the user tabs into the page.
2.  Once the keyboard focus is on the menu button, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and on the current page.
3.  Use arrow keys to select your choice and press ENTER to skip to it.
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](#access-keys) for More information on how to use them.

## How do I get it on my web site?
All you need are either SkipTo.js or SkipTo.min.js from the "compiled/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.map file as well.

To use the SkipTo script, just include it at the bottom of your HTML page or template, as follows:

```
<script src="http://[your domain]/[path to javascript directory]/SkipTo.min.js"></script>
```

NOTE: Make sure that "src" points to the place where you put the SkipTo Javascript file, otherwise, things will not work as intended.


## What About WordPress
A module is being considered for WordPress.

## Configuring SkipTo

### Options for adding the button

| Property       | default     | Description |
| :------------- | :---------- | :---------- |
| `displayOption` | `static` | Values of `static` or `popup` are defined.  The value `static` the button is visible, when `popup` is used the button is initially not visible, but becomes visible when it receives focus. |
| `accessKey` | `0` | [Accesskey](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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. |
| `containerElement` | `div` | Element to use as a container for the button and the menu.
| `customClass` | `skipTo` | 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. |

### CSS Selectors for identifying Landmarks and Headings

| 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 nodes. |
| `headings` | `main h1, [role="main"] h1, main h2, [role="main"] h2` | A set of CSS selectors used by `querySelectorAll` to get an array of headings nodes. |

### Button and Menu labeling

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

| Property       | Default | Description |
| :------------- | :------ |:---------- |
| `buttonLabel` | 'Skip to Content' | Change the label for the button. |
| `menuLabel` | Landmarks and Headings' | Change the label for the menu. |
| `landmarkGroupLabel` | 'Landmarks' | Change the menu group label for landmarks. |
| `headingGroupLabel` | 'Main Headings' | Change the menu group label for headings. |
| `mainLabel` | 'main' | The label in the menu for `main` lanamarks |
| `searchLabel` | 'search' | The label in the menu for `search` landmarks |
| `navLabel` | 'menu' | 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` landmdrks |
| `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. |

### Colors used for Button and Menu styling

Color values must use [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), for example `#8AF`, `rgb(40, 50, 90)`, `#a0bf32`, `blue`.  All valuses are optional, when no values are defined the default option is used.

| Property       | Type   | Default | Description |
| :------------- | :----- | :------ | :---------- |
| `colorTheme` | string | `default`  | A predefined color scheme for skipTo, currently values 'default' and 'illinois' |
| `buttonColor` | Color | `#1a1a1a`  | Color of text for "Skip To Content" button. |
| `buttonBackgroundColor` | Color | `#eeeeee` | Background color of text for "Skip To Content" button. |
| `buttonColorFocus` | Color | `#000000` | Color of text for "Skip To Content" button when it has focus. |
| `buttonFocusBackgroundColor` | Color | `#dcdcdc`  | Background color of text for "Skip To Content" button when it has focus. |
| `buttonFocusBorderColor` | Color | `#1a1a1a`  | Border color of "Skip To Content" button when it has focus. |
| `menuBackgroundColor` | Color | `#eeeeee` | Menu background color. |
| `menuBorderColor` | Color | `1a1a1a` | Menu border color |
| `menuitemColor` | Color | `#1a1a1a`  | Menuitem text color. |
| `menuitemBackgroundColor` | Color | `#eeeeee`  | Menuitem text background color. |
| `menuitemFocusColor` | Color | `#eeeeee`  | Menuitem text color then it has focus. |
| `menuitemFocusBackgroundColor` | Color | `#1a1a1a`  | Menuitem text backgroundcolor then it has focus. |
| `menuitemFocusBorderColor` | Color | `#1a1a1a`  | Menuitem border color then it has focus. |

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

### Position of Button

| Property       | Type   | Default | Description |
| :------------- | :----- | :------ | :---------- |
| `positionLeft` | length | `46%`  | The position of the "Skip To Content" button from left margin. |
<commit_msg>fixed spelling error<commit_after><img src="images/logo_347x50_PPa11y.png" alt="PayPal accessibility logo">

# skipto@3.0
## by PayPal Accessibility Team & University of Illinois
See the [Authors](#authors) section for more information.

SkipTo is a replacement for your old classic "Skipnav" 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. Once installed and configured, the menu makes it easier for keyboard and screen reader users to quickly jump to the desired location by simply choosing it from the list of options.

### Benefits of skipto
* All users can get an outline of the content on the page.
* 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.

![Example Screen Shot](images/example_screen_shot.png "Example Screen Shot")

## How it works
1.  The SkipTo menu button is the first tabable element on the page, and if it is not visible becomes the first time the user tabs into the page.
2.  Once the keyboard focus is on the menu button, pressing the ENTER or the SPACEBAR key will pull down the list of high-level headings and on the current page.
3.  Use arrow keys to select your choice and press ENTER to skip to it.
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](#access-keys) for More information on how to use them.

## How do I get it on my web site?
All you need are either SkipTo.js or SkipTo.min.js from the "compiled/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.map file as well.

To use the SkipTo script, just include it at the bottom of your HTML page or template, as follows:

```
<script src="http://[your domain]/[path to javascript directory]/SkipTo.min.js"></script>
```

NOTE: Make sure that "src" points to the place where you put the SkipTo Javascript file, otherwise, things will not work as intended.


## What About WordPress
A module is being considered for WordPress.

## Configuring SkipTo

### Options for adding the button

| Property       | default     | Description |
| :------------- | :---------- | :---------- |
| `displayOption` | `static` | Values of `static` or `popup` are defined.  The value `static` the button is visible, when `popup` is used the button is initially not visible, but becomes visible when it receives focus. |
| `accessKey` | `0` | [Accesskey](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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. |
| `containerElement` | `div` | Element to use as a container for the button and the menu.
| `customClass` | `skipTo` | 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. |

### CSS Selectors for identifying Landmarks and Headings

| 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 nodes. |
| `headings` | `main h1, [role="main"] h1, main h2, [role="main"] h2` | A set of CSS selectors used by `querySelectorAll` to get an array of headings nodes. |

### Button and Menu labeling

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

| Property       | Default | Description |
| :------------- | :------ |:---------- |
| `buttonLabel` | 'Skip to Content' | Change the label for the button. |
| `menuLabel` | Landmarks and Headings' | Change the label for the menu. |
| `landmarkGroupLabel` | 'Landmarks' | Change the menu group label for landmarks. |
| `headingGroupLabel` | 'Main Headings' | Change the menu group label for headings. |
| `mainLabel` | 'main' | The label in the menu for `main` lanamarks |
| `searchLabel` | 'search' | The label in the menu for `search` landmarks |
| `navLabel` | 'menu' | 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` landmdrks |
| `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. |

### Colors used for Button and Menu styling

Color values must use [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), for example `#8AF`, `rgb(40, 50, 90)`, `#a0bf32`, `blue`.  All values are optional, when no values are defined the default option is used.

| Property       | Type   | Default | Description |
| :------------- | :----- | :------ | :---------- |
| `colorTheme` | string | `default`  | A predefined color scheme for skipTo, currently values 'default' and 'illinois' |
| `buttonColor` | Color | `#1a1a1a`  | Color of text for "Skip To Content" button. |
| `buttonBackgroundColor` | Color | `#eeeeee` | Background color of text for "Skip To Content" button. |
| `buttonColorFocus` | Color | `#000000` | Color of text for "Skip To Content" button when it has focus. |
| `buttonFocusBackgroundColor` | Color | `#dcdcdc`  | Background color of text for "Skip To Content" button when it has focus. |
| `buttonFocusBorderColor` | Color | `#1a1a1a`  | Border color of "Skip To Content" button when it has focus. |
| `menuBackgroundColor` | Color | `#eeeeee` | Menu background color. |
| `menuBorderColor` | Color | `1a1a1a` | Menu border color |
| `menuitemColor` | Color | `#1a1a1a`  | Menuitem text color. |
| `menuitemBackgroundColor` | Color | `#eeeeee`  | Menuitem text background color. |
| `menuitemFocusColor` | Color | `#eeeeee`  | Menuitem text color then it has focus. |
| `menuitemFocusBackgroundColor` | Color | `#1a1a1a`  | Menuitem text backgroundcolor then it has focus. |
| `menuitemFocusBorderColor` | Color | `#1a1a1a`  | Menuitem border color then it has focus. |

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

### Position of Button

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

{'fraction_non_alphanumeric': 0.11560379918588874, 'fraction_numerical': 0.007734056987788331, 'mean_word_length': 3.7720945289737777, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '277439', 'n_tokens_mistral': 4163, 'n_tokens_neox': 4019, 'n_words': 1946}