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

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

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

Links to skip navigation (hereinafter skiplinks ) are the unsung heroes of every self-respectable (accessible) website and web application. Imperceptible but very useful UX helpers and unrecognized UI geniuses, skiplinks as a concept are not new, they have been gratefully used by communities of people with disabilities for decades. If you have heard the expression "trivia 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 the in-app navigation. 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. The BBC site, for example, has 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 can be no talk of a mouse) to switch through each of the 28 elements when she moves to a different 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. We cross our fingers so that the RTE follow their example ...


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 (by reference attilavago.github.io/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 terms, skiplinks are hidden and simple, but effective, with their help, people most likely get into the best UI.

In terms of coding, their difficulty level is somewhere between tying shoes after twelve pubs for Christmas and finding 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:


While your CSS will be something like this:


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.github.io/fun-with-flags/usa


And then what about the sections?

Section - a kind of children 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:


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

Section Example

It is important to understand that many HTML5 partitioning elements, for example, main, nav, aside, define sections by default ARIA . 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 design and user experience, take a look at this official document about sections. 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 webpage 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 you now 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?

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