"Skip to content" link component

[GCHQ-Developer-847]

Summary

A "skip to content" link provides the user with a method to gain direct access to the primary content on a page, bypassing content which is repeated across multiple pages, such as the website's navigation links.

💬 Description

One example of this kind of functionality is the one which is currently on the ICDS website, which becomes visible when focussed. The user can tab to this link and press Enter, and their focus will be moved to the main content on the page.

This ticket is to create a new ICDS component for this kind of link.

The aim with this component is to enable developers to cater for the WCAG success criterion 2.4.1 in their apps. The "skip to content" link technique is a solution to this requirement which is recommended by W3C.

💰 User value

"Skip to content" links allow users who navigate sequentially through web pages (such as a screen reader user or someone who is navigating using the keyboard) to access the main content on a page more quickly and easily.

Providing this as a new component will help to encourage and facilitate developers to implement this kind of functionality in their apps and therefore help with the accessibility of these apps.

📚 User Stories

As a user who navigates using a keyboard or screen reader
I need a way to access the main content on a page quickly and easily
So that I can start to utilise the app's functionality sooner, such as finding information I am looking for.

📝 Acceptance Criteria

Given that I move my focus to the "skip to content" link
When I press Enter
Then my focus moves to the link's target element.

Given that I move my focus to the "skip to content" link
And I have a screen reader enabled
When I press Enter
Then the screen reader's virtual cursor moves to the link's target element.

✏ Designs

...

🧾 Guidance

...

Additional info

It might be useful to look at the solution for mi6/ic-design-system#616 to help with the virtual cursor behaviour.

[GCHQ-Developer-847]

I have created this ticket with some of the basic information I thought it would be useful to start with. To be updated by a designer once the design process begins.

---

Just a few things which I think are worth considering when this is being designed:

• Should we just use the same look and feel as we use with the existing "skip to content" link on the ICDS website?
  • Another option I have seen used is to style it like the back to top component.
  • ^ This is understandable because the behaviour is kind of similar, as it moving the user's focus to somewhere else on the page. But in some ways it is different, e.g. the back to top component does not only become visible when focussed.
  • The ICDS website uses an ic-link. Would this be better so that it is easier (i.e. require less styling) for developers to add another "skip to content" link on a page (taking the user to different content, e.g. the "skip to page content" link on the ICDS Components page) which has a similar look and feel?
• Related to the point mentioned above, should there be a variant (perhaps in a similar vein to the inline tabs variant) with no padding which makes it easier to use for other "skip to content" links on the page?
• Should we give developers the option to make the link always visible? Some may want this; in fact, W3C describe it as preferable (although having it visible only when focussed is acceptable). But I guess they could probably just an IcLink instead.
• Will this component fit well in different app layouts? Probably will generally be fine if it only appears when focussed.

[MI6-255]

Designer needs this in Figma first

[MI6-255]

Do not release until guidance is in

[MI6-255]

Test on our v3 site