WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#47891 closed defect (bug) (fixed)

TwentyEleven Skip Link Placement Not First In <body>

Reported by: williampatton's profile williampatton Owned by: poena's profile 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 (4)

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

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in ​Slack in #accessibility by afercia. ​View the logs.
5 years ago

#2 @afercia
5 years 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 5 years ago by afercia (previous) (diff)

#3 @afercia
5 years ago

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

@poena
5 years ago

Move the skip links directly below body, using wp_body_open.

@poena
5 years ago

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

#4 @poena
5 years 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.
5 years ago

#6 @williampatton
5 years 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
5 years 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.

@afercia
5 years ago

#8 @williampatton
5 years 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
5 years ago

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

#10 @williampatton
5 years 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.

@afercia
5 years ago

#11 @afercia
5 years ago

  • Keywords commit added

47891.diff​:

  • adjusts the left value in the RTL stylesheet
  • fixes a double space and changes indentation made with spaces to tabs
  • keeps the @since notation to Twenty Eleven 3.4 as Bundled Themes versions get updated in bulk before a WordPress major release, see for example [45289], [44730], etc.

#12 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 46195:

Accessibility: Bundled Theme: Make the TwentyEleven skip link the first focusable element within the body.

Props poena, williampatton.
Fixes #47891.

#13 @afercia
5 years ago

  • Keywords commit removed
Note: See TracTickets for help on using tickets.