WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 9 days ago

#47891 assigned defect (bug)

TwentyEleven Skip Link Placement Not First In <body>

Reported by: williampatton Owned by: poena
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.2.2
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: accessibility Cc:

Description

It was reported that TwentyEleven has a skip link that does not appear as the first thing inside the <body>. For a11y reasons I believe that having the skip link, where one exists, as the first content is highly preferable.

Related comment:
https://core.trac.wordpress.org/ticket/47053#comment:4

This ticket proposes we swap to using a hook based approach to adding bypass links here and then use that same approach across all of the default themes - ultimately making it the standard way of themes adding their initial skip links.

Using the wp_body_open hook with fallback it is possible as outlined in this comment on that same ticket: https://core.trac.wordpress.org/ticket/47053#comment:2

Attachments (3)

47891.patch (3.0 KB) - added by poena 3 weeks ago.
Move the skip links directly below body, using wp_body_open.
47891-2.patch (3.4 KB) - added by poena 3 weeks ago.
Also removes the ID from the assistive-text in rtl.css
eleven skip link.png (249.2 KB) - added by afercia 9 days ago.

Download all attachments as: .zip

Change History (13)

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


4 weeks ago

#2 @afercia
4 weeks ago

  • Milestone changed from Awaiting Review to 5.3

Discussed during today's accessibility bug scrub. Agreed that using wp_body_open sounds sensible. Could also be a new best practice to be introduced with Twenty Twenty.

Last edited 4 weeks ago by afercia (previous) (diff)

#3 @afercia
4 weeks ago

  • Owner set to poena
  • Status changed from new to assigned

@poena
3 weeks ago

Move the skip links directly below body, using wp_body_open.

@poena
3 weeks ago

Also removes the ID from the assistive-text in rtl.css

#4 @poena
3 weeks ago

  • Keywords has-patch added; needs-patch removed

The patch(es) removes the existing skip links from the nav in header.php,
and re-adds them directly below the body tag using the wp_body_open hook in functions.php

It also styles the visible skip links to better match the skip links used by WordPress core.

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


12 days ago

#6 @williampatton
12 days ago

  • Keywords commit added

I just double checked and there is a piece of back-compat code already in place in the theme that ensures this patch works correctly for WP versions before 5.2 (where wp_body_open was introduced).

This is ready for commit.

#7 @afercia
9 days ago

  • Keywords has-screenshots added; commit removed

Right, a backwards compatibility shim was added in [45256] / #46679.

  • in the RTL stylesheet right: 7.6%; needs to be changed to right: 6px;
  • I guess the theme version will be updated from 3.3 to 3.4?

See attached screenshot to illustrate the visual change.

#8 @williampatton
9 days ago

I will provide an updated patch later today that has the adjustments in rtl stylesheet and the version bump included. Thanks for pointing those out :)

#9 @afercia
9 days ago

I think the version bump is usually committed before the core release? Not sure :)

#10 @williampatton
9 days ago

@afercia I did think that too but then I second guessed myself ha! I will omit it from this patch here with the note that committer should bump the version string.

Note: See TracTickets for help on using tickets.