What is keyboard navigation?
Remember DOS? WordPerfect? Then you can skip this section. If not, here’s a quick introduction to keyboard navigation and the most useful keyboard shortcuts on websites.
| Keys | Function |
|---|---|
| tab | Jump to the next place on a page that offers some kind of interactivity. It can be a link, a form field or a button. |
| shift + tab | Skip to the previous place with interactivity. |
| page‑down | Scroll down one page. |
| page‑up | Scroll up one page. |
| home | Go to the top of the page (header). |
| end | Go to the bottom of the page (footer). |
| enter | “Click” on a link, or press a button. |
| alt + pil‑venstre | Go back to the previous page – like pressing the back button. |
| alt + pil‑højre | Go to the page you were on before you pressed Back. |
Better user experience for all
There are many other keyboard shortcuts, but the above are quite common. Try them. Pressing alt + arrow-left is faster than reaching for the mouse and finding the back button on the toolbar.
Web accessibility is necessary for some and good for all.
Digitaliseringsstyrelsen
Imagine you can’t operate a mouse at all. Maybe you are among the 30 percent of Danes aged 16-64 who consider themselves to have a major or minor disability? They should be able to participate like everyone else. That’s why web accessibility for public websites in Denmark has been legislated. And if you consider that your website is private and therefore not covered by the law formally yet, consider whether your business can afford to exclude 30% of your potential customers.
Keyboard navigation works out of the box in all browsers. If you follow “best practice” when building your website, you don’t really need to do anything to make it possible to use the site with a keyboard. The possibility breaks when we – or the vendors we use – make some unfortunate design choices, such as not having a clear focus outline.
Focus outline – what it looks like
If you haven’t tabbed around the site already, perhaps because you’re on an iPad or a mobile phone, the short screencast below shows me moving down through the menu and the first titles and keywords on the front page, with my “focus” in a bold outline.
CSS for Blocksy for more distinct focus outline
On oldrup.dk I use the excellent WordPress theme Blocksy which does a great job in ensuring good web accessibility and passes most WCAG tests without any problems. However, I’m not entirely happy with the highlighting of menu links, and also the Firefox browser has such a thin focus outline that you can barely see it.
I’ve remedied these shortcomings with the following CSS snippet, which I’d like to share with you so that more keyboard users can have a good experience on the web.
/*** Better Focus Outline, especially in Firefox 2022-04-16 ***/
:root {
--outline-width: 3px;
--outline-style: solid;
--outline-offset: 3px;
scroll-padding: 4rem;
}
/** Improve general outline visibility **/
a:focus,
button:focus,
form.search-form button:focus,
pre[tabindex="0"]:focus {
outline-width: var(--outline-width);
outline-style: var(--outline-style);
outline-color: var(--linkHoverColor);
outline-offset: var(--outline-offset);
}
/** Blocksy - Header, reduced outline height of menu items **/
[data-header*="type-1"] .ct-header [data-id="menu"]>ul>li>a {
height: calc(1em + var(--outline-offset) * 2);
}
/** Blocksy - Footer, make room for the outline to be visible **/
.footer-menu-inline {
padding: calc(var(--outline-offset) * 2) 1em;
}
/** Blocksy and Elementor - fix outline wraping two lines **/
.entry-title a:focus,
.related-entry-title a:focus,
.elementor-heading-title a:focus {
display: inline-block;
}
/** Getwid - Override outline:none on accordion toggles **/
#main .wp-block-getwid-accordion__header-wrapper a:focus {
outline: solid;
}If you want to know more
The whole furore about web accessibility, including for private businesses, reportedly started when a blind person sued Domino’s for not letting him order a pizza on their website. You can read more about that story and a few useful CSS properties here:
Supreme Court hands victory to blind man who sued Domino’s
:focus CSS pseudo-class på MDN Web Docs
text-decoration CSS property på MDN Web Docs
outline CSS shorthand property på MDN Web Docs
scroll-padding-bottom property på MDN Web Docs
What do you think about keyboard navigation?
Do you ever use the keyboard to navigate around websites? How does it work? Feel free to leave a comment below – also, if you’d like to see more CSS code snippets on this site.
