A11y: provide content skip links for keyboard/screen reader users

[RyKilleen]

Is your feature request related to a problem? Please describe.
When users navigate a page with keyboard tabbing, screen readers, or other assistive technology, a useful pattern is to provide a "Skip to Main Content' skip link before navigation or long lists (Tags list, etc).

Describe the solution you'd like
A visible skip link that pops up when a user has tabbed into an element like the nav or long tags list.

Additional context
https://webaim.org/techniques/skipnav/

[Link2Twenty]

This is part of the WCAG spec
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Useful links:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html
https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=241#qr-navigation-mechanisms-skip

[jessleenyc]

Thanks for the feature request. This is approved if anyone wants to jump on it!

[Link2Twenty]

Just to add to this, I had to press the tab button 80 times before I could go to the first post.

[Link2Twenty]

Adding this to just before the dev logo in the nav

<a href="#articles-list" class="skip-content">Skip to content</a>

and this to your CSS

.skip-content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  background: black;
  color: white;
  z-index: 9999;
  padding: 13px;
  cursor: default;
  pointer-events: none;
  opacity: 0;
}

.skip-content:focus {
  pointer-events: auto;
  opacity: 1;
}

Normal view:

Focused view:

Which is not something the everyday user would notice. But would make life, hopefully, a lot easier for keyboard users.

Thoughts?

[RyKilleen]

@Link2Twenty I think this demonstrates a great, straight-forward implementation! From WebAIM's site:

The verdict: This method works well for nearly all users. Sighted mouse users (who do not benefit from the link) do not see it, screen reader users will hear the link, and sighted keyboard users will see the link when they navigate to it.

[RyKilleen]

Tackling this currently!

[maestromac]

This is partially implemented am I correct?

[RyKilleen]

Correct, right now it's a pretty naive implementation that only works on the home page.

[scottaohara]

Could there not be a unique ID that was added to the h1 of each post, so that the skip link could navigate people there?

Was rather excited to see there was a skip link on the site, and then was immediately disappointed to realize it didn't do anything on anyone's posts. :(

[RyKilleen]

The most semantic route forward is probably to guarantee that an <main id="main-content"> tag exists around the content you want skipped to for any given template. That would keep it semantic and consistent without having to insert magic elements in specific spots for all templates.

[scottaohara]

"the most semantic route forward" is a debatable statement, but doing a quick audit of the site, a fair one based on the lack of proper heading structure / general misuse of heading for a good portion of the site that aren't people's posts.

That said, it seems that a main element w/id would also need to be properly added to the templates.

[colabottles]

@nickytonline I'll take a look at some point with this. Thanks!

[techieeliot]

Hey, @colabottles I'm working on issue #4807 but I'd love to help you out over a live stream sometime to finish this PR up.

[nickytonline]

Whoever takes this on, create small PRs. We can do one page at a time.

[aitchiss]

This issue is closed since we now have added the skip link functionality to all pages 🎉

There is a small piece of work remaining - currently when a user navigates internally (link click), the skip link isn't the first item focused on the new page. This is captured in #13505, should be a quick fix and once implemented users should be able to get the most out of the new skip links 😄