Make WordPress Core

Opened 6 weeks ago

Last modified 10 days ago

#62311 accepted enhancement

"Skip to content" should have an ID

Reported by: philliproth's profile philliproth Owned by: joedolson's profile joedolson
Milestone: 6.8 Priority: normal
Severity: normal Version:
Component: Themes Keywords: has-patch
Focuses: accessibility Cc:

Description

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>

Change History (7)

#1 @audrasjb
6 weeks ago

Hello and thanks for the ticket,

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

#2 @philliproth
6 weeks ago

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

Last edited 6 weeks ago by philliproth (previous) (diff)

This ticket was mentioned in PR #7666 on WordPress/wordpress-develop by @debarghyabanerjee.


6 weeks ago
#3

  • Keywords has-patch added

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.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 weeks ago

#5 @joedolson
5 weeks ago

  • Milestone changed from Awaiting Review to 6.8
  • Owner set to joedolson
  • Status changed from new to accepted

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.

@debarghyabanerjee commented on PR #7666:


5 weeks ago
#6

Hi @joedolson, @sabernhardt

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

Can you please check?
Thanks.

philliproth commented on PR #7666:


10 days ago
#7

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

Note: See TracTickets for help on using tickets.