Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

Stacks Image 91039

SkipToMain Stack

improve the accessibility of your site by adding a ‘skip to main’ button for keyboard users

We may not always realise, but millions of people can’t use a mouse to navigate on a site. Visitors with visual impairments usually use a screen reader in combination with a keyboard. People with motor disabilities often control their computers using a keyboard or other input devices like a GT3D Eye Tracker (for eye-controlled mouse movement) or sip-and-puff.

In all those cases, people use the tab key or equivalent to navigate through a web page. Unfortunately, without special measurements, finding the main content of a page is not really easy – and often hardly possible. This is what WebAIM says about it:
“The main content is not usually the first thing on a web page. Keyboard and screen reader users generally must navigate a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content. This is particularly difficult for users with some forms of motor disabilities.
Without some sort of system for bypassing the long list of links, some users are at a huge disadvantage. Consider users with no arm movement, who use computers by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action perhaps 100s of times before reaching the main content is simply unacceptable.
[…] The "skip navigation" idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted.”
The SkipToMain Stack offers this functionality. As soon as you hit the tab key (or equivalent), a button appears on the top of the page with a text like ’skip to main content’ or alike. When using the enter key, the focus is set on the main content of the page. Screen readers will start reading this content, bypassing all elements like menus, search boxes etc. that are located above the main content.

Because an outline is shown on the main content, optionally with a background color that fades out, people with limited sight also get extra guidance to where to start reading.
Restore outline
Unfortunately, some themes and frameworks remove the outline from ‘tabbable’ elements on a page like links, buttons etc. making it extremely difficult if not impossible for keyboard users to understand which element has focus.

For this reason, removing outline is considered a bad idea. The Outline! Stack makes it possible to restore an outline on all ‘tabbable’ elements on a page like links, buttons etc. using a custom background color and/or border.

In many cases, it’s an essential companion for the SkipToMain Stack.
Demo
This page includes the SkipToMain Stack, so when your first action when arriving on this page is hitting the tab key, a button will slide in from the top with the text ’skip to main content’. The enter key (or a click/tab on the button) will take you straight away to this block of text, bypassing the logo, title and menu links. An orange outline will show around the main content and the background will be 100% white for a moment.
When viewing this page on a Mac, and you don’t see the ’skip to main content’ button when you press the tab key, you are probably using Safari or Firefox. This is because a Mac is not set to use keyboard navigation by default.

In Safari, you can use alt/option + tab (+) instead (you may need to reload this page to see the button).

For Firefox, and a more permanent solution for Safari, please read this Super-Awesome Bonus Tip by Andrew Jones how to solve this.

Don’t want to mess with your settings? Here’s a small video showing both the SkipToMain Stack and the Outline! Stack in action.
Usage
Drag one copy of this stack on the page.
By default, the skip to main button will slide in from the top when pressing the tab key (like on this page). If you want the button to be always visible, select always show (see the demo page for an example).
This is also handy when styling the button during development.
With the option always show selected, the option start with focus will put focus on the button as soon as the page is loaded: the outline will show and you can press the enter button to go to the main content immediately.
When this option is not selected, you will have to use the tab key first.
Define the outline style of the skip to main button:
theme – the theme or framework settings will be used. Keep in mind that some (many?) themes and frameworks disable the focus making a site virtually inaccessibel for keyboard users.
The stack will add a distance from the edge of the page to make room for the browser default outline, even if the outline is removed by the theme or framework.
browser – mimics the browser default focus: a dotted gray 1px wide border for Firefox, Interner Explorer and Edge (fig. 1); a 5px wide blue (or graphite on the Mac) box shadow-like border for Chrome, Safari and Opera (fig. 2).
The stack will add a distance from the edge of the page to make room for the browser default outline, even if the outline is removed by the theme or framework.
text for the list item here…
custom – the most flexible solution: design your own outline.
I suggest you use one style for the outline for every ‘tabbable’ element on your site with the help of the Outline! Stack.
Set the text of the skip to main button.
WebAIM suggests ‘skip to main content’ or minor variations like ‘skip top navigation’.
Style the skip button to your liking.
Advanced users only: by default, the stack will create an anchor for the main content with an id like #stacks_in_YY_pageYY_main. If you prefer, you can set your own custom anchor id (unsupported).
Make sure it is unique for the page!
To let the stack know what the main content is, it is preferable to put all the main content inside the SkipToMain Stack and leave the option main content on content of this stack.
Optionally, advanced users can set the main content by using a custom selector.
Use at your own risk! Targeting with a custom selector may not always work as desired.
The offset can be used to set a distance from the top of the page.
This is especially useful for preventing a fixed menu or alike at the top of the page covering part of the main content.
Style the main content outline and background color to your liking.
The same outline styles can be used as for the skip to main button (see 4).

NB
Within RapidWeaver, you can only tab around on a page using alt/option + tab (+) and alt/option + shift + tab (++), but it’s sometimes a bit quirky, especially with the skip to main button. This means that the skip to main link and its functionality can only be seen properly when you preview the page in a browser (and when the settings of your Mac are correct, see above). You can also use the option always show, although it is recommended to turn this off in the final version of your site.
You may need to adjust the styling of your page to prevent the outline from being cut off with some elements. Add at least the same amount of padding as the outline width to stacks with elements where this happens.
Using the enter key when the ‘skip to main content’ button has focus (or clicking it with a mouse), will add the anchor name to the end of the URL (https://www.mysite.com/index.html#maincontent). The browser will take this change into account when using back and forward links and buttons using URLs like javascript:history.go(-1). This means that going back one step will only remove the anchor.
Be aware that using this stack will not necessarily make your site fully accessible – let alone make it WCAG 2 compliant. It helps a lot, but most probably you will have to make other adjustments that are not within the scoop of this stack.
Want to know how accessible your site is? The web accessibility evaluation tool is a very handy way to find out.

Limitations
When JavaScript is disabled, this stack will not work properly.
There’s a bug in Firefox that prevents the skip to main link from showing when there is an element with the attribute contenteditable present anywhere on the page.

Background
This stack is partly based on the following articles and blog posts:
I am not an expert in web accessibility (far from that – even this site in not yet 100% OK!), so if you have ideas how to improve this stack, or have ideas for my other stacks to improve accessibility please let me know. I would appreciate your input.
Support
Please use this form to report all issues, questions and comments.

This stack requires RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…