Accessibility: Skip nav links & focus-visible - video

TRANSCRIPT

We've been progressively building the show's website with a first focus on trying to make the content as usable as we can before seriously tackling the aesthetics.

Now we have 5 items in the main navigation, it seemed like time to add a way for keyboard and screen readers users to be able to skip the repetition of these links and get to the main page content.

WCAG (the Web Content Accessibility Guidelines) does not specify "skip nav links", but says we should have a mechanism to bypass blocks of content that are repeated on multiple Web pages. Other examples they give are:

• News site's where the users may have to go though many article links to get to the main story and
• Ecommerce sites where there could be many filter options before they can get to the products.

Some sites also provide a "skip to the footer" option too.

We don't need that, but this has made me think about how footers are often used to dump less relevant content and legalese and how we might also want to allow people to skip that. Amazon does this by placing their "back to top" link at the start of their footer.

(Accidentally there's no legal links here as there's no tracking or cookies on this site)

Truefully, if it hadn't been for accessibility legislation increasing awareness (and we'll probably have more with the European Accessibility Act coming in 2025) I am not sure how much attention I would have paid to these things.

It's a shame I needed the law to encourage me to do the designer's main job of finding empathy with users, but now I think sharpening up these "soft skills" is becoming more vital. Not just to increase the reach of our website, but to highlight the advantages we have over AI.

As a sighted mouse user I almost never use the keyboard on web pages until recently when I had a temporary strain on my mouse hand. Presumably age will force me to do this more.

From my limited experience of tabbing my way around the web it is frustrating, but this must pale into insignificance compared with those with motor issues who have to navigate pages with head wands, mouth sticks or sip-and-puff switches.

While many off-the-shelf sites have "skip to content links" added by default they can make things even more confusing when addons (like forms) and DIY user mess up the tabbing order.

It is not difficult to add this yourself and do it right, but before I get into that I want to mention (as it's relevant) the new…

:focus-visible (pseudo class)

:focus-visible now has support across all major browsers and solves a problem that when a sighted mouse user clicks on a focusable element (like a button) they get a 'focus ring' that may only be needed to guide those using the tab key.

When I was in a page builder community this issue came up regularly with people saying how do I get rid of the ugly outline around the header text of my FAQ section when clicked. The reason was the accordion module marked up the titles with the button tag.

The wrong solution was to the add this CSS:

:focus { outline: none; }

Assuming we are not supporting IE, we only have to remember to avoid using :focus (rather than :focus-visible) when we want to custom style our focus state as this will undo what browsers are now doing for us.

I have used this:

:focus-visible{
outline: 2px solid var(--accent);
outline-offset: .35rem;
border-radius: .1rem;
} 

Skip nav links

Adding the HTML

Ideally I would have set this up first, but the idea was to build up this starting with the bare minimum which was a single page.

I also wanted to see how far we could go using VS Code search and replace before having to bring in a CMS or static site generator the manage the growing number of pages

To quickly add the skip links to all pages I went to VS Code's "Edit tab" and selected "replace in files". I searched for the beginning

<header>
<a href="#skip-to-main" class="skip-link">Skip to content</a>    

<main class="narrow" id="skip-to-main">

.skip-link {
position: absolute; 
padding: .3rem;
margin-inline-start: .5rem;
background-color: var(--shade);  
text-decoration-thickness: max(0.06rem, 1px);
text-underline-offset: 0.2rem; 
z-index: 10;
}  
/* styles the skip to content link */

display: none 

.skip-link:not(:focus) { 
clip-path: inset(50%);
position: absolute;
width: 1px; 
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0); 
white-space: nowrap;
border-width: 0;
}
/* hides the link when not focussed */
  

.skip-link:not(:focus) { 
 clip-path: inset(50%);
}