A11yAdvent Day 6: Skip to Content

Let’s stay in the topic of navigation and talk about a feature that is too often forgotten: a link to go straight to the main content area of the site—often called “skip-to-content” or “skip-navigation” link.

In traditional websites using hyperlinks the right way, the page is fully reloaded when following a link and the focus is restored to the top of the page. When navigating with the keyboard, that means having to tab through the entire header, navigation, sometimes even sidebar before getting to accesss the main content. This is bad.

Single-page applications are not free from this consideration either. Following a link tends to reload the content area and therefore loses the current focus, which sends it to the top of the document, causing the same issue. So either way, there is work to do.

To work around the problem, a common design pattern is to implement a skip link, which is an anchor link sending to the main content area. So how shall our skip link work?

  • It should be at the top of the page, ideally as the first focusable element. It doesn’t have to be absolute first, but the more focusable elements there are before it, the less discoverable and thus less useful the skip link becomes.
  • Ideally it’s always visible, but it’s pretty uncommon that it fits nicely into design so it can be visually hidden and revealed on focus—more on that below.
  • It should lead to the main content area of the page.
  • It should ideally start with the word “Skip” so it’s easily recognisable (visually and aurally). It can say “Skip navigation”, “Skip to content”, or some similar flavours.

Here is our HTML:

body>
a href="#main" class="sr-only sr-only--focusable">Skip to contenta>
body>

For the styling we can use what we learnt in day 3 of this calendar, applying a small twist to undo the hiding styles when the element is focused.

.sr-only.sr-only--focusable:focus,
.sr-only.sr-only--focusable:active {
clip: auto !important;
-webkit-clip-path: auto !important;
clip-path: auto !important;
height: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}

You can play with a live demo for skip links on CodePen.


This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel

Let’s stay in the topic of navigation and talk about a feature that is too often forgotten: a link to go straight to the main content area of the site—often called “skip-to-content” or “skip-navigation” link.

In traditional websites using hyperlinks the right way, the page is fully reloaded when following a link and the focus is restored to the top of the page. When navigating with the keyboard, that means having to tab through the entire header, navigation, sometimes even sidebar before getting to accesss the main content. This is bad.

Single-page applications are not free from this consideration either. Following a link tends to reload the content area and therefore loses the current focus, which sends it to the top of the document, causing the same issue. So either way, there is work to do.

To work around the problem, a common design pattern is to implement a skip link, which is an anchor link sending to the main content area. So how shall our skip link work?

  • It should be at the top of the page, ideally as the first focusable element. It doesn’t have to be absolute first, but the more focusable elements there are before it, the less discoverable and thus less useful the skip link becomes.
  • Ideally it’s always visible, but it’s pretty uncommon that it fits nicely into design so it can be visually hidden and revealed on focus—more on that below.
  • It should lead to the main content area of the page.
  • It should ideally start with the word “Skip” so it’s easily recognisable (visually and aurally). It can say “Skip navigation”, “Skip to content”, or some similar flavours.

Here is our HTML:

<body>
  <a href="#main" class="sr-only sr-only--focusable">Skip to contenta>
body>

For the styling we can use what we learnt in day 3 of this calendar, applying a small twist to undo the hiding styles when the element is focused.

.sr-only.sr-only--focusable:focus,
.sr-only.sr-only--focusable:active {
  clip: auto !important;
  -webkit-clip-path: auto !important;
  clip-path: auto !important;
  height: auto !important;
  overflow: visible !important;
  width: auto !important;
  white-space: normal !important;
}

You can play with a live demo for skip links on CodePen.


This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel


Print Share Comment Cite Upload Translate Updates
APA

Kitty Giraudel | Sciencx (2020-12-06T00:00:00+00:00) A11yAdvent Day 6: Skip to Content. Retrieved from https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/

MLA
" » A11yAdvent Day 6: Skip to Content." Kitty Giraudel | Sciencx - Sunday December 6, 2020, https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/
HARVARD
Kitty Giraudel | Sciencx Sunday December 6, 2020 » A11yAdvent Day 6: Skip to Content., viewed ,<https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/>
VANCOUVER
Kitty Giraudel | Sciencx - » A11yAdvent Day 6: Skip to Content. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/
CHICAGO
" » A11yAdvent Day 6: Skip to Content." Kitty Giraudel | Sciencx - Accessed . https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/
IEEE
" » A11yAdvent Day 6: Skip to Content." Kitty Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/. [Accessed: ]
rf:citation
» A11yAdvent Day 6: Skip to Content | Kitty Giraudel | Sciencx | https://www.scien.cx/2020/12/06/a11yadvent-day-6-skip-to-content-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts