25

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.

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.

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.

  • Mozilla developer pages — look at the top center:

    enter image description here

  • WebAIM.org — look in the top left, there is only one skip link on this site.

    enter image description here

  • Wikipedia — hit tab a few times to have these show up. They're in a bit of an unusual position, being not first in tab order and situated within the page content:

    enter image description here

(If you're not seeing the skip links, and you're in Firefox on MacOS, you need to change one of your settings.)

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.)

Where would they point?

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

  • Search bar
  • Main navigation, i.e.: home, questions, tags, users, unanswered
  • Main content: the #content element. This means the question list, question page, search results, etc.
    • On question pages this should say "Main content and question". (Replacing it with just "Question" might leave a blind user wondering what's so different about this page that the main content is gone.)
  • Start of answers (this skip link will show up only on a question page)
  • 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 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.

  • 1
    I'm curious what would the skip links point to? Only the question and accepted answer only or other areas? – Mike Bonnell Sep 19 '18 at 16:16
  • 3
    @MikeBonnell I've added a suggestion about that to the end. – doppelgreener Sep 19 '18 at 17:24
  • I'd assume this is to supplement keyboard navigation? – Meta Andrew T. Sep 20 '18 at 3:22
  • 1
    @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. – doppelgreener Sep 20 '18 at 11:44
  • 2
    MSO version of this feature request. – ahiijny Apr 12 at 16:33

You must log in to answer this question.

Browse other questions tagged .