Hitchhiker's Guide to Accessibility: Links to skip navigation and section

Hi, Habr. I bring to your attention a translation of Attila Vágó’s article “The Hitchhiker's Guide to Accessibility: Skiplinks and Landmarks” about a couple of essential UI tools and their features.

Links to skip navigation (hereinafter skiplinks ) - unsung heroes of every self-respecting accessible (accessible) website and web application. Imperceptible, but very useful UX helpers and unrecognized geniuses of UI, skiplinks as a concept are not something new, they have been gratefully used by communities of people with disabilities for decades. If you have heard the expression "trivialities decide everything", then this expression is just about skiplinks .

Contrary to popular belief, before computers were not used with the mouse. For years, the mouse was just a mouse, a fluffy rodent, no matter where it lived - in your attic, in the mind of Walt Disney or on the streets of Dublin. The keyboard was a priority for most users, which makes me think about the importance of navigation using the keyboard.

Keyboard navigation is easy to implement and to use. The main keys are: tab, up-down-left-right arrows, space and enter. A simple page written in semantically correct HTML should lead you to full keyboard navigation in a web application, which is great. Not so happy about the fact that modern web applications are much more than plain HTML and have complex navigation. Such design systems lead to a rather serious and annoying problem for keyboard users: duplicate elements and content.

The main reason is navigation in the application. Every time a user goes to a new page, the same navigation appears again and again, and the user must scroll the page to find the content of interest. On the BBC website, for example, there are as many as 28 points in the main navigation:

You see right away that this is a major news site, because it has 28 menu items!

Now imagine that an old woman with Parkinson's disease almost knows how to use the keyboard (there is no question of a mouse) to switch through each of the 28 elements when she goes to another news article. This morally and physically exhausts her! We will not allow the poor grandmother to go through this pain? The very sight of how she fights would be heartbreaking. A good professional and developer of UX knows this, so he implements what the industry calls skiplinks . That is what the BBC did. Like the New York Times and NBC. Fingers crossed for the RTE to follow suit ...

What are we missing?!?

A big aspect of skiplinks is that they improve the lives of everyone who often uses a keyboard or braille display. Take, for example, the American flag in a web format (at the link attilavago.imtqy.com/fun-with-flags/usa ). I can quickly go to the most relevant section of this page for me, regardless of whether I use the keyboard or the braille display. Imagine you need to go through 50 stars of the flag every time! No matter how much you love Uncle Sam, you’ll go crazy.

In simple words, skiplinks are hidden and simple, but effective, with their help, people are likely to fall into the best UI.

In terms of coding, their difficulty level is somewhere between tying shoes after twelve pubs at Christmas and searching for a bathroom in the dark. This is actually a simple template. If you implemented it a couple of times, then you are unlikely to go wrong. The first time I saw them in the UI, I expected dozens of tangled javascript lines, and tell you that this is not true. Your HTML will look something like this:

<ul class="skip"> <li><a href="#stars">skip to Stars</a></li> <li><a href="#shortStripes">skip to Short Stripes</a></li> <li><a href="#longStripes">skip to Long Stripes</a></li> </ul> 

While your CSS will be something like this:

 .skip { position: absolute; top: 0; left: 0; width: 100%; } .skip a { position: absolute; left: -9999px; background: #b22234; color: white; text-decoration: none; font-weight: 600; width: fit-content; } .skip a:focus { display: block; position: static; left: 0; padding: .25em 1em; } 

This is the result. Obviously, if you want to practice, you need to take it on board. Switch to your favorite content.

Illustration of a link to skip navigation using Screengrab at attilavago.imtqy.com/fun-with-flags/usa

And then what about the sections?

Sections are a kind of kids web ui. Nobody really speaks about them, they do not stand out in any way, but everyone expects them to be in their places and do their dirty work, without expecting any recognition in return. Never!

You probably remember that at the beginning of this article I mentioned semantic HTML. Believe it or not, that's all. Sections are made easy if your UI architecture is thought out semantically. Here are some good examples:

 <header> <main> <nav> <aside> <section> <article> <footer> 

And a more illustrative example with some of the attributes of ARIA given here:

It is important to understand that many sectioning elements in HTML5, for example, main, nav, aside, define ARIA sections by default. If HTML5 partitioning elements are used without an understanding of the corresponding sign structure, then people using assistive technologies are likely to be confused and restricted in accessing content and interacting with web pages. To avoid confusion in the design and user experience, take a look at this official section document . Its essence is that it is necessary to keep its semantic code clean and everything will fall into place by itself.
One important detail to keep in mind is that sections of the web page do not replace skiplinks . Of course, the Braille display will give the user mechanisms for navigating and navigating between sections of the page, but the same mechanism is not available for keyboard users.

I hope, now you understand the key differences between skiplinks and sections, as well as methods for their implementation. Skiplinks are great for both keyboard navigation and braille display, while sections are great only for braille display, but none of them replaces the other. Implementing any of these is simple, so if you really want to tackle the accessibility of your website or application, you need to make sure that you can handle both. It's not so difficult, right?