Outline! Stackimprove 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
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.
DemoThis 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.
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.
class,…) where you want the outline to appear.
[aria-label='close'], use single quotes only.
Most of these options are self explanatory. Essentially, there are three options to define the outline:
Want to know how accessible your site is? The web accessibility evaluation tool is a very handy way to find out.
- In this context, ‘tabbable’ elements refer to all elements that can receive focus, e.g. by tabbing around with the keyboard.
button(unless they are