Add a Skip Link just above the Footer

Created on 15 February 2024, about 1 year ago
Updated 26 February 2024, about 1 year ago

Problem/Motivation

This was discussed in the Drupal A11y Hours Call. We talked about adding a "Back to Top" link to the bottom of the page (just above the footer).

I'm not listing this as a bug just yet, but I do think it could improve the usability for keyboard only users. This is especially true on complex web pages.

This would provide users a quick means to jump back up to the top of the page.

There are questions about whether it should go to the top of the page or the same ID as the "Skip to main content" (i.e. <a id="main-content" tabindex="-1"></a>).

It could also be a simple graphic triangle (which is common) or something that is exposed on focus (like the Skip to main content link).

@rkoller came up with an example of how skip links are brought into different blocks of content:
https://publicissapient.github.io/accessible-ecommerce-demo/plp/index.html

Proposed resolution

Remaining tasks

User interface changes

We would be adding some minor HTML to the content page.

Release notes snippet

๐Ÿ“Œ Task
Status

Active

Version

11.0 ๐Ÿ”ฅ

Component
Claro  โ†’

Last updated about 3 hours ago

Created by

๐Ÿ‡จ๐Ÿ‡ฆCanada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @mgifford
  • First commit to issue fork.
  • Status changed to Needs review about 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India
  • Pipeline finished with Canceled
    about 1 year ago
    Total: 353s
    #96291
  • Status changed to Needs work about 1 year ago
  • MR has failures moving to needs work

  • Pipeline finished with Failed
    about 1 year ago
    Total: 7081s
    #96294
  • Status changed to Active about 1 year ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    I think the overall problem space might require more than just a "skip back to top"-link. The initial reason why the topic was brought up during the accessibility office hour was the new Navigation module. Aside the vertical toolbar it got a horizontal contextual toolbar as well now. And the save button on for example a node edit form is moved to that contextual horizontal toolbar in ๐Ÿ“Œ Move the Save button into the Top Bar Active , the same pattern that the Gin theme already uses.
    Problem is if you reach the end of the node edit form by keyboard you don't have the primary and secondary action buttons for saving and canceling available anymore, those are placed above/before in the DOM order (illustrated in point 1.7 in ๐Ÿ“Œ Prototype revision on the the Friday Usability meeting Fixed . On the other hand for the current state of the patch also the context matters. Is the skip link provided in the front end in the default theme which has a footer or in the admin theme which has no footer, also the question if something like the webprofiler module is installed. Currently the patch only makes the change to Claro (at first i've tested with Olivero and wondered why there was no skip link showing up). But when testing with Claro there is another detail to note, when testing on for example /admin/structure i got only to the top/start of the main content page instead of getting back to the top of the page as expected. In general I wonder if the following approach would make sense:

    create a consistent way how skip links are defined. where the developer is able to decide if a skip link is only shown as text when it gets into focus or if it should be shown as an icon.

    in the front end (Olivero) you already have skip to mainas a link and the skip back to top could be added as an icon. the only question is should it skip to the top of the page or to the top of the main canvas?

    in claro you already have the skip to main but then additional skip links could be added. the current order is the skip to main content link, vertical nav bar, the horizontal navbar and then the main content. so an idea might be: skip to main content link, skip to horizontal nav bar, vertical nav bar, the horizontal navbar, the main content, skip to horizontal nav bar, skip back to top. It is also the question if those additional jump back links used in https://publicissapient.github.io/accessible-ecommerce-demo/plp/index.html should be utilized as well. do they provide and extra benefit or are they oil into the fire of confusion? having two skip links in a row was at least for myself confusing and cognitively challenging.

    But overall those links would be a good way to navigate more specifically in-between aria-regions for keyboard users aside the more general skip link on top jumping to the main content and the skip links initially proposed in this issue. But i think it makes no sense to provide an option to site builders to define those skip links via the admin ui. it would probably enough to provide a bespoke setup in core for olivero and claro and provide contrib modules and themes the option.

    And in case others consider the suggestion reasonable as well it would make sense to either make this issue an meta issue and create child issues or create a new meta issue and make this issue one of the child issue. in anyway trying to keep the different parts tightly scoped and actionable.

Production build 0.71.5 2024