Skip Link | Skip Navigation | A11Y Widget

Category: Widgets
Subcategory: Utility

Overview

An Implementation of Skip links for Mendix. Skip links or Skip Navigation links are used to help assistive technologies skip long navigation and lets users get to the page content quicker.

Documentation

Skip links | Skip Navigation | Skip to Content

An Implementation of Skip links for Mendix.

Skip links or Skip Navigation links are used to help assistive technologies skip long navigation and lets users get to the page content quicker:

Read more about A11Y and Skip links here

** If you don’t see anything when “tabbing” through your Mendix app see here

Usage

The widget adds some HTML in the dom - This is known as the skip link itself.

The widget works best when added to your main layout page, see attached Screenshot:

The widget will work 99% of the time out of the box without any input from you the developer as we target internal Mendix class names, but should you need some customizability please configure it:

Setup in Studio Pro

See Screenshot

  • Button Class
    • The class name to target to add the skip div/button to. Defaults to `.navbar-brand`
  • Before/After
    • Sets if the skip link div and button must be added before or After Button class
  • Main Content Class
    • The class name to know where the Main part of the application is. Defaults to `.region-content`

SCSS/CSS

The widget provides some basic styling to the Skip link that comes in when tabbing through the app.

Feel free to override this styling in your own .css or .scss files

#skip_link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } #skip_link:focus {  position: static; width: auto; height: auto; }

Issues / Limitations

There are currently no know limitations, but adding your own classnames can result in some trail and error to get it working properly

Releases

Version: 1.0.0
Framework Version: 8.12.7
Release Notes: An Implementation of Skip links for Mendix. Skip links or Skip Navigation links are used to help assistive technologies skip long navigation and lets users get to the page content quicker: