Making WordPress.org

Opened 8 weeks ago

Closed 8 weeks ago

#7645 closed defect (bug) (fixed)

Skip to Content Button Not Working

Reported by: sharonlynn's profile sharonlynn Owned by: dd32's profile dd32
Milestone: Priority: normal
Component: Handbooks Keywords:
Cc:

Description

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.

Attachments (2)

skip_content_cta.gif (157.2 KB) - added by sharonlynn 8 weeks ago.
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.
skip_content_cta_solution.gif (1.3 MB) - added by sharonlynn 8 weeks ago.
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.

Download all attachments as: .zip

Change History (3)

@sharonlynn
8 weeks ago

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
8 weeks ago

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.

#1 @dd32
8 weeks ago

  • Owner set to dd32
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.