56

Skip links are a fairly common accessibility design pattern that help screen reader users navigate a page. Stack Exchange pages are large and complex enough that they should probably have skip links implemented.

I'm going to introduce what skip links are for the benefit of anyone who may not be familiar. My actual suggestion about how to employ this pattern on Stack Exchange is in the last section.

What are skip links?

In a nutshell the skip link design pattern consists of the following:

  • A series of links in the top of the page.
  • These links are invisible until given keyboard focus. (Most users will never know they even exist.)
  • They are the very first elements in tab order, however, so they will be the first links that gets focused when you hit TAB.
  • Each skip link points to a major page landmark (search, main navigation, main content, footer). They strictly move within the page you're already in (like anchor links) and never navigate you to other pages. The header won't have a skip link because it's the first piece of content you'll reach anyway.
  • Traditionally a skip link that is focused is visible in the top or top left of a page.

They exist to help address WCAG 2.1 Success Criterion 2.4.1, Bypass Blocks (level A):

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

(Blocks of content in our case would be the header, navigation bars, page content, the sidebar and/or individual sidebar sections, etc.)

Some examples

Here's some sites where you can immediately test drive some skip links: click the link and hit TAB once you're on the page.

Note that if you're using Safari or Firefox on MacOS, these skip links may not show up without changing one of your settings. You may want to dip into Chrome for this on MacOS.

Back to Stack Exchange: Where would they point?

On Stack Exchange they ought to point to the following locations:

  • Main navigation, i.e.: home, questions, tags, users, unanswered
  • Main content: the #content element. This means the question list, question page, search results, etc.
  • Sidebar, so as to find community bulletin, related questions, watched/ignored tags, etc. Only shows up when the sidebar is present, which I think means on the question list & question page.
  • Footer

(The search bar and header is the first thing to come after the skip links, so it doesn't need one. Note however the header is not very accessible so there will be some work needed to convey to users what they're tabbing into.)

The idea is to help people reach the main chunks of content, skipping large chunks of content to anywhere there's something important the user would want to read and interact with. It's especially important to be able to skip past extremely large or unpredictably large chunks of content, hence the skip to the sidebar and to the footer. From there the user can find their way to more specific content and features.

7
  • 1
    I'm curious what would the skip links point to? Only the question and accepted answer only or other areas? Sep 19 '18 at 16:16
  • 3
    @MikeBonnell I've added a suggestion about that to the end. Sep 19 '18 at 17:24
  • I'd assume this is to supplement keyboard navigation? Sep 20 '18 at 3:22
  • 2
    @Somewhat Keyboard shortcuts are not actually accessible to screen reader users. This would not supplement that feature because the users who need this one cannot make use of that one. However if a user happened to have both enabled, yes, it would supplement keyboard navigation and be a useful addition: people who are legally blind (but not actually blind) might be in that cross-section. Sep 20 '18 at 11:44
  • 2
    MSO version of this feature request.
    – ahiijny
    Apr 12 '19 at 16:33
  • Isn't six skiplinks a bit over the top? You would almost need to add a skiplink to skip the skiplinks.
    – Tsundoku
    Dec 16 '20 at 14:01
  • @Tsundoku You're right, that might be too many. Lots of these things are in very different places on the page, but we could get this down to four if jumping between posts within a page was straightforward. The search bar could also be left out as a skip link since in the current layout it will be the first thing to receive focus after the skip links. I've updated this suggestion. Dec 16 '20 at 14:12

You must log in to answer this question.

Browse other questions tagged .