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
- DRES Accessible IT Group
- College of Applied Health Sciences
- Illinois Theme for WordPress
- Illinois Web Conference
Configuration Information
- Include reference to
skipto.js
script in the page template. - To change default settings use the
SkipToConfig
object.- CSS Selectors are used for defining which elements are included in the Landmarks and Headings groups.
- The CSS selectors can be modified through configuration from the default settings.
- Colors can also be customized and there is also a theme option, including an "Illinois" theme.
- NEW: CDN reference to the script file: https://cdn.disability.illinois.edu/skipto.min.js
- Full list of configuration options.
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>