37th Annual CSUN Assistive Technology Conference Has Concluded

SkipTo Landmarks & Headings: Browser Extension & Page Script

Date & Time

Thursday, March 17, 2022 - 9:20 AM PST

Location

Orange County

Description

One of the most important WCAG requirements is Success Criterion 2.4.1 Bypass Blocks of Content. It is typically implemented using a "Skip To Main" link, usually hidden until the link receives focus and becomes visible. The techniques for implementing 2.4.1 have not changed much in over 20 years, yet the web and HTML have changed dramatically.

The SkipTo script and extension are built on the foundation of the modern web to leverage the use of Landmark region (i.e., header, main, nav, aside, footer) and heading (i.e., h1-h6) tags to identify important sections of a web page to provide keyboard-only users to the ability to move keyboard focus and to scroll a section of the page into view. The SkipTo script and browser extension build a navigation menu based on the landmark regions and headings found on the web page. Selecting items from the menu moves keyboard focus to the associated location on the web page for starting tab navigation and scrolling the associated content into view. SkipTo does this automatically by analyzing the page for the actual landmark regions and headings on the page, which greatly improves reliability over current Bypass Block techniques that rely on adding and matching internal ids that are often broken (i.e., using SKipTo means no more broken "Skip To Main" links). The SkipTo script replaces the current "Skip To Main" code embedded on web pages to implement the Bypass block requirement. The SkipTo Landmark & Headings browser extension brings the power of this technology to any web page by adding a button to the browser's toolbar. The extension implements a long-standing browser accessibility requirement defined in the User Agent Accessibility Guidelines (UAAG) Success Criteria 2.5.1 to provide structural navigation using the keyboard.

Benefits of the SkipTo Menu

Keyboard-only users can more efficiently navigate to content on a page.
All users can outline the major content areas on the page.
Screen reader users can get a higher-level navigation menu without using the screen reader landmark and header navigation commands, typically including long lists of lower-level headings and less-used landmarks.
Speech recognition users can use the menu to navigate the content more efficiently on a web page.

SkipTo Script

The SkipTo script replaces the old school "Skip to Main" link. When the website page loads the script, it creates a menu button with a drop-down menu that contains links to important landmark regions and headings on the current page. The default configuration of the Menu Button is visible, making it useful to everyone, but it can be configured to be hidden when the page is loaded. Once installed and configured, the menu makes it easier for keyboard, voice recognition, and screen reader users to quickly jump to the desired location by simply choosing it from the list of menu items. The script also uses an accesskey to activate the menu button anywhere on the web page. By default, the accesskey is zero key.

SkipTo Landmarks and Headings Extension

SkipTo Landmarks & Headings extends the Chrome and Firefox browsers by providing a menu for easy navigation to the ARIA landmark regions and HTML section headings of a web page.

The keyboard shortcut for opening the menu is alt+2 (option+2 on Mac keyboards), and cursors keys can be used to navigate the menu. Activating a menu item scrolls the corresponding landmark region or heading element into view and focuses the keyboard on the page.

The menu is divided into two sections: Landmarks, the important landmark regions, and Headings, an outline of the heading structure found on the page.

ARIA landmarks provide names for regions that are common to many web pages, with familiar functions most of us have encountered, such as navigation menus, main content, search

This Presentation Link is provided by the Presenter(s) and not hosted by the Center on Disabilities at CSUN. The Center on Disabilities has confirmed, as of March 15, 2022, content linked is relevant to the presentation, but has not been reviewed for accessibility nor will the Center on Disabilities attempt to remediate any accessibility issues in the linked content. Please contact the Presenter(s) with any accessibility concerns.

Audience

Higher Education
Information & Communications Technology
Disability Specific
Government
Media & Publishing

Audience Level

Intermediate

Session Summary (Abstract)

The browser extension and script provide keyboard navigation to landmark regions and headings on any web page. They give keyboard-only users, and web developers a powerful alternative to the simple “Skip To Main” link often used to implement the “Bypass Blocks of Content” requirement of WCAG.

Session Type