New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skip link #66

Open
govuk-design-system opened this Issue Jan 12, 2018 · 6 comments

Comments

8 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

Use this issue to discuss this component in the GOV.UK Design System.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Published) Jan 12, 2018

@timpaul timpaul added the component label May 21, 2018

@alexcarpenter

This comment has been minimized.

Copy link

alexcarpenter commented Aug 8, 2018

To improve the skip link functionality, it is recommended to add tabindex="-1" to the main element so that it can receive focus and announce to the user that focus has moved.

Here we can see when the skip link is clicked that it is not announced to screen readers.
skip-link-1

Adding tabindex="-1" to the main element announces the focus change.
skip-link-2

@fofr

This comment has been minimized.

Copy link

fofr commented Aug 9, 2018

This was a feature in Elements but was reverted:
alphagov/govuk_elements#534

Putting tabindex on the <main> element causes problems:

  • Some apps will display the browser's default focus styles around the main element
  • When clicking anywhere in the page focus will return back to the top

Consider a user interacting with an input field who clicks away from it to remove
the focus style. Should they then hit tab they will be taken to the top of the page instead of the next form field.

Example problem

GIF showing focus styles and tab order problem on Registers:

focus-order-issue-tabindex-main

@svinkle

This comment has been minimized.

Copy link

svinkle commented Aug 9, 2018

Some apps will display the browser's default focus styles around the main element

Thoughts on adding:

[tabindex="-1"] {
  outline: none;
}

This is likely the only instance where I'd use outline in this manner.

When clicking anywhere in the page focus will return back to the top

Interesting dilemma I've not considered. I suppose this is why some progressively enhance the skip link by dynamically applying tabindex to the main via JS on the click() event handler. A bit of extra work but would solve the issue.

If not, wouldn't a fully working skip link be more desirable than focus shifting for a mouse user? I'm sure there are other negatives to be explored but curious what y'all think.

@StommePoes

This comment has been minimized.

Copy link

StommePoes commented Aug 10, 2018

When clicking anywhere in the page focus will return back to the top

I can replicate being focussed on anything, clicking outside that thing, and my next focus is back at the top of the page in Chromium (Linux) regardless of the use of tabindex. It would not surprise me that chromium simply takes this behaviour from webkit and thus Safari would behave the same.

As a skip link user I remember the bad old days when this KHTML bug meant clicking the skip link meant the viewport shifted to the new content, but my tab was stuck behind. Without the tabindex Webkit, older Blink and IE 9-11 won't move keyboard focus with viewport focus.

@nickcolley

This comment has been minimized.

Copy link
Contributor

nickcolley commented Aug 20, 2018

Related

Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.

https://twitter.com/Real_CSS_Tricks/status/1030594374533558273

@selfthinker

This comment has been minimized.

Copy link
Member

selfthinker commented Aug 24, 2018

When we discovered skip links weren't working during testing accessibility of Elements, I reported the bug to Apple.

Since ages I've been using a better fix in my personal projects which fixes all in-pages links, not just skip links, and removes the tabindex the moment the focus moves away, not causing any of the issues above even if the anchored element is main.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment