Guidelines
As stated by the W3C in its WACG 2.0 guidelines on web accessibility, the intent of this feature is “to allow people who navigate sequentially through content more direct access to the primary content of the Web page”.
For the specific context of Mews, being it a complex operational web application, there are three main structural areas:
- App bar: which displays critical, always-visible features such as the search bar, shortcuts and global actions.
- Main menu: that serves as the backbone for all navigation, making it always visible even if it’s collapsed.
- Content area: that displays the information the users ultimately need to consult and operate with.
The “Skip Link component lets users quickly jump to the main menu or the content area by clicking on the tab key when a page is loaded.
How it works
When any page is loaded, users can navigate through the three main structural areas with the keyboard by pressing the tab key. Since the first structural area is the app bar, and they may need to get to any of the others, pressing the tab key will display a menu on the top-left of the screen with both Skip to navigation and Skip to content options.