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

Issue fork drupal-3421684

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

mgifford created an issue. See original summary.

Gauravvvv made their first commit to this issue’s fork.

gauravvvv’s picture

Status: Active » Needs review
shweta__sharma’s picture

Status: Needs review » Needs work

MR has failures moving to needs work

rkoller’s picture

Status: Needs work » Active

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 #3408500: Move the Save button into the Top Bar, 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 #3402454: Prototype revision on the the Friday Usability meeting. 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.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

Status: Active » Postponed

The Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.