Improve accessibility with keyboard navigation

That "the website is usable for users who use a keyboard and not a mouse" is the second requirement on Digitaliseringsstyrelsens list on web accessibility.

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.

KeysFunction
tabJump 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 + tabSkip to the previous place with interactivity.
page‑downScroll down one page.
page‑upScroll up one page.
homeGo to the top of the page (header).
endGo to the bottom of the page (footer).
enter“Click” on a link, or press a button.
alt + pil‑venstreGo back to the previous page – like pressing the back button.
alt + pil‑højreGo to the page you were on before you pressed Back.
Common keyboard shortcuts on websites

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.

Screencast illustrates focus outline styling

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.

Share this article
Læs mere om Bjarne Oldrup, Sønderborg

Bjarne Oldrup

Web developer with a passion for WordPress, sustainable web design, GDPR and web accessibility.

Leave a Reply

Your email address will not be published.