Hitchhiking for Availability: Links to Skip Navigation and Section
Hello, Habr. I bring to your attention a translation of the article “The Hitchhiker's Guide to Accessibility: Skiplinks and Landmarks” by Attila Vágó about a pair of irreplaceable UI tools and their features.
Links for skipping navigation (hereinafter skiplinks ) are unsung heroes of every self-respecting accessible website and web application. The inconspicuous, but very useful UX helpers and unrecognized UI geniuses, skiplinks as a concept are not new, they have been gratefully used by disabled communities for decades. If you heard the expression “little things decide everything”, then this expression is just about skiplinks .
Contrary to popular belief, computers were not previously used in conjunction with a mouse. For many years, the mouse was just a mouse, a furry rodent, no matter where it lived - in your attic, in the imagination of Walt Disney or in the streets of Dublin. The keyboard was a priority for most users, which leads me to think about the importance of navigation with the keyboard.
Keyboard navigation is easy to implement and use. The main keys are: tab, up-down-left-right arrows, space and enter. Just written a page in semantically correct HTML should lead you to a fully keyboard navigation in a web application, and that's great. Not so encouraging is the fact that modern web applications are much more than simple HTML, and they have complicated navigation. Such design systems lead to a rather serious and annoying problem for keyboard users: repeating elements and content.
The main reason for this is navigation in the application. Each time a user navigates to a new page, the same navigation appears again and again, and the user must scroll the page to find the content of interest to him. On the BBC website , for example, there are as many as 28 points in the main navigation:
You see immediately 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 a keyboard (there is no question about a mouse) to switch through each of the 28 elements when she goes to another news article. It exhausts her morally and physically! But we will not allow poor grandmother to go through this pain? The sight of how she fights would be heartbreaking. A good UX professional and developer knows this, so he implements what the industry calls skiplinks . The BBC did just that. Like the New York Times and NBC. Cross your fingers so that RTE follows suit ...
What are we missing?!?
A great 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 web format (at attilavago.github.io/fun-with-flags/usa ). I can quickly jump to the most relevant section of this page for me, regardless of whether I use a keyboard or a braille display. Imagine you need to go through 50 flag stars every time! No matter how you love Uncle Sam, you would be crazy.
In simple words, skiplinks are hidden and simple, but effective, with their help people are likely to get into the best UI.
In terms of coding, their level of difficulty lies somewhere between tying shoes after twelve pubs for Christmas and finding a bathroom in the dark. This is actually a simple template. If you have implemented it a couple of times, then in the future you are unlikely to be mistaken. The first time I saw them in the UI, I expected dozens of confusing JavaScript strings, and I’ll tell you that it’s not. Your HTML will look something like this:
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 this into service. 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?
Sections are a kind of kids web UI. Nobody really speaks about them, they do not stand out in anything, but everyone expects them to be in their places and do their dirty work, not expecting any recognition in return. Never!
You probably remember that at the beginning of this article I mentioned semantic HTML. Believe it or not, but that’s it. Sections are designed easily if your UI architecture is thought out semantically. Here are some good examples:
And a more visual example with some ARIA attributes given here:
Section Example
It is important to understand that many sectioning elements in HTML5, for example, main, nav, aside, define ARIA sections by default . If HTML5 sectioning elements are used without understanding the appropriate sign structure, people using assistive technologies are more likely to be confused and limited in access to content and interacting with web pages. To avoid confusion in development and user experience, take a look at this white paper on sections. Its essence is that you need to keep your semantic code clean, and everything itself will fall into place.
One important detail to keep in mind is that sections of a 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 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 for Braille display only, but none of them replace the other. The implementation of any of them is simple, therefore, if you want to really tackle the availability of your website or application, you need to make sure that you can cope with both. It's not that hard, is it?