Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Stacks Image 91039

Outline! Stack

improve the accessibility of your site by restoring or changing the outline of ‘tabbable’ elements

Using outline on ‘tabbable’* elements is essential for keyboard users rely on that to navigate around a web page. Unfortunately, some (many?) frameworks and themes disable the focus which makes a site virtually inaccessibel for keyboard users.

Removing the focus outline is like removing the wheelchair ramp from a school because it doesn't fit in with the aesthetic.

David Gilbertson on Hacker Noon
This stack does its best to either restore the default outline, or set a custom outline style. Optionally, you can hide the outline for mouse users, giving you the best of both worlds: optimal accessibility for keyboard users and optimal aesthetics for mouse users.
Skip to main content
Besides restoring outline on all ‘tabbable’ elements on a page like links, you may also want to take a look at the SkipToMain Stack to further improve the accessibility of your site. With this stack, keyboard users can access the main content of a page with just two key presses, bypassing all content (menu, search box etc.) above that main content – as suggested by WebAIM.
Demo
This page contains both the SkipToMain Stack and the Outline! Stack. Use the tab key to show the ‘skip to main content’ link. Next, use the enter key to skip to the main content. Once the main content has focus, use your tab key to go from ‘tabbable’ element to ‘tabbable’ element. Using the enter key will execute the action of the element that has focus.
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
First, define to which elements you want to apply the outline:
every ‘tabblable’ element on the page – the most general option.
every ‘tabblable’ element inside this stack – with this option, drag all elements where you want the outline to appear in the dropzone of the stack.
only to element(s) with the selector… – for advanced users only. Set a selector (id, class,…) where you want the outline to appear.
NB
Use only one selector per stack. If you need to set multiple selectors, just use another copy of the Outline! Stack.
When using a custom selector with quotes (like [aria-label='close'], use single quotes only.
With this option, you can also set the tabindex of the elements. Leave the tabindex value on 0 (zero) unless you have a good reason to change it.
You can use as many Outline! Stacks on a page as you need. Options b and c will usually override option a; option c will usually override option b when the targeted selector is outside the stack.
only show when tabbing – in all major browsers (except Safari and RapidWeaver preview) the outline shows when clicking the element with a mouse or alike. This option prevents this, showing the outline only when navigation with a keyboard.
preview all outline– when selected, all outline set by the stack will always show. This is useful during development to easily see how the outline will look.
Don’t forget to disable this option before publishing!
Set the outline style
Most of these options are self explanatory. Essentially, there are three options to define the outline:
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.
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).
custom – the most flexible solution: design your own outline.
To make sure the outline of focused tabbable elements is fully visible, you may need to set some padding on the surrounding element and/or increase the line height.
Set a background to show when the element has focus (optionally).

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. Preview the page in a browser if you want to be sure everything works as it should.
The outline will not show on elements with a tabindex of -1 or -2.
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.
I’ve done my best to make this stack work in all possible situations, but despite extensive testing, I cannot guarantee that this stack will always work perfectly with every stack, theme or frame work. There are simply too many possibilities to test everything. If you think something’s not right, feel free to contact me and I will do my best to find a solution.

Background
This stack is inspired by the articles mentioned above under Suggested reading.
The CSS in this stack is partly based on the article Mimic native browser focus styles by Ionuț Colceriu.
A few lines of JavaScript are based on a CodePen by joeytwiddle/Captain Anonymous (who found it on the Facebook login page).
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).
  1. In this context, ‘tabbable’ elements refer to all elements that can receive focus, e.g. by tabbing around with the keyboard.
More details (nerd alert!)…
Hide details
Since there are some discrepancies between browser which elements can be focused (source), I included the following selectors in the CSS:
a and area with a href
input, select, textarea and button (unless they are disabled)
any element with role="button", role="link" or contentEditable="true"
any element that is enabled except fieldset
any element with a tabindex
unless the element has a tabindex of -1 or -2.

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