Skip to Content Button Not Working

[sharonlynn]

The "Skip to Content" button is not functioning as expected. When clicked, it does not navigate to the main content area. This issue impacts keyboard users and screen reader users, hindering accessibility compliance.

Steps to Reproduce:
Open this link: ​https://make.wordpress.org/core/handbook/
Press the "Tab" key until the "Skip to Content" button is focused.
Press "Enter" to activate the "Skip to Content" button.

Expected Behavior:
The page should scroll to the main content area, providing a direct link for users to skip repetitive navigation links.

Actual Behavior:
The button does not perform any action. The page does not scroll to the main content area.

Possible Cause:
The main content area is wrapped in a div with the ID #primary. The "Skip to Content" button may not be targeting this ID correctly.

Technical Details:
Page URL: ​https://make.wordpress.org/core/handbook/#content

Skip to Content Button HTML:
<a id="wporg-skip-link" class="skip-link screen-reader-text user-typed" href="#content" data-selector="#content">Skip to content</a>

Main Content Area HTML:

<div id="primary">
<!-- Main content goes here -->
</div>

Suggested Solution:
Update the "Skip to Content" button to target the correct ID:

<a href="#primary" class="skip-link">Skip to content</a>

Environment:
Browser(s): Chrome: Version 125.0.6422.61, Safari: Version 17.4.1 and Firefox (more issues with keyboard tabbing with the most of the navigation unable to reach Skip Content button, and the first part of the navigation

OS: Apple M1 Pro
Device: Desktop, Mobile
Screen Reader: VoiceOver

Additional Notes:
This issue affects the accessibility of our website. Resolving it will ensure compliance with accessibility standards and improve the user experience for all visitors.

[sharonlynn]

e GIF demonstrates the issue with the "Skip to Content" button on the page ​https://make.wordpress.org/core/handbook/. When the button is focused and activated by pressing "Enter," the page does not scroll to the main content area, highlighting a failure in navigation that impacts keyboard and screen reader users.

[sharonlynn]

The GIF demonstrates the proposed solution for the "Skip to Content" button issue on the page ​https://make.wordpress.org/core/handbook/. After updating the button to target the correct ID (#primary), the GIF shows the button functioning as expected: when focused and activated by pressing "Enter" or using "Control + Option + Spacebar" with a screen reader, the page scrolls to the main content area, ensuring proper navigation for keyboard and screen reader users.

[dd32]

In 13738:

Make: Fix the skip to link for wporg-breathe (o2/p2/make sites/make handbooks) to target #primary which is present for both post lists and handbooks.

The previous #content is only available for o2 post archives, and is not present on handbooks.

Props sharonlynn.
Fixes #7645.