"Skip to content" should have an ID

[philliproth]

For accessibility it would be nice to let the "skip to content" link have an ID. This way if a "back to top" link is implemented in any way it can target the link and the very top of the page. "#" or "#top" usually works in every browser visually, but nothing would get focus. And something should get focus.

Simply add an id="skip-link". Easy :-)

<a id="skip-link" class="skip-link screen-reader-text" href="#wp--skip-link--target">Skip to content</a>

[audrasjb]

Hello and thanks for the ticket,

Could you please detail where exactly this anchor is missing? Is it related to a specific theme?

[philliproth]

Hi Jean-Baptiste,
If I recall correctly this is injected by core after the body tag if a "main" content is defined. I didn't really know if this is theme related, but definitely a core problem as I just asked this to be fixed in the new standard theme and they said it's not injected by the theme. This is being injected:

<a class="skip-link screen-reader-text" href="#wp--skip-link--target">Skip to content</a>

What would be the right component to define for the ticket?

Cheers

Trac Ticket: Core-62311

## Summary

• This pull request introduces an ID attribute to the "skip to content" link, enhancing accessibility for users navigating with assistive technologies. By adding id="skip-link", we ensure that this link can be targeted by "back to top" functionality, providing a seamless user experience.

## Changes Made

• Added id="skip-link" to the existing "skip to content" link.

## Rationale

• While the current implementation allows users to visually jump to the content, adding an ID ensures that:

• The "skip to content" link can be easily referenced by other navigation elements, such as a "back to top" link.

• When users activate these links, they receive proper focus, improving the overall accessibility of the site.

• This small change can significantly enhance the experience for keyboard and screen reader users, making navigation more intuitive.

## Impact

• This update will improve compliance with accessibility standards and create a better user experience for all visitors, particularly those using assistive technologies.

[joedolson]

This is a minor change, and has no direct impact on accessibility, but does enable a consistent path for extenders to target. We'll probably want to change the target ID to wp-skip-link, to avoid potential conflicts.

Hi @joedolson, @sabernhardt

I have updated the id to wp-skip-link.

Can you please check?
Thanks.

Hey @apermo @sabernhardt - would love to see this in 6.8 - thank you for reviewing!

[joedolson]

There's very little to test here; the ID is present, and has no core function, it's just an available target. Searching in WP Code Search, nobody appears to use this pattern as a direct string in code in either a plugin or a theme, so seems pretty safe.

[joedolson]

In 59559:

Themes: Add an ID to the block theme skip link.

Add the ID wp-skip-link to the block theme generated skip link, so that block themes have a standardized target at the top of the body element.

Props philliproth, audrasjb, debarghyabanerjee, sabernhardt, joedolson, apermo.
Fixes #62311.

In r59559

Hello @Debarghya-Banerjee yes wp-skip-link is working properly.

[dilip2615]

The message is asking to modify block themes so that the "skip link" (a link allowing users to jump directly to the main content, especially useful for keyboard navigation) targets an element with the ID wp-skip-link. This ensures that block themes use a standardized target, improving accessibility and providing consistency across themes. It essentially means the theme should include an element with id="wp-skip-link" at the top of the page for this purpose.Replying to audrasjb:

Hello and thanks for the ticket,

Could you please detail where exactly this anchor is missing? Is it related to a specific theme?

[philliproth]

Replying to dilip2615:

The message is asking to modify block themes so that the "skip link" (a link allowing users to jump directly to the main content, especially useful for keyboard navigation) targets an element with the ID wp-skip-link. This ensures that block themes use a standardized target, improving accessibility and providing consistency across themes. It essentially means the theme should include an element with id="wp-skip-link" at the top of the page for this purpose.Replying to audrasjb:

Hello and thanks for the ticket,

Could you please detail where exactly this anchor is missing? Is it related to a specific theme?

The skip link is inserted automatically when a <main> is present on a page and doesn't rely on a theme. This works properly. This ticket asks for an id inserted in the skip link for when you want a "back to top"-link inserted by a user, so that they have a focusable target to go back up. It's been solved and on the route for 6.8:

https://core.trac.wordpress.org/changeset/59559