Make WordPress Core

Opened 3 months ago

Last modified 2 months ago

#54421 accepted enhancement

Deprecate skip link focus fix

Reported by: westonruter Owned by: westonruter
Milestone: 6.0 Priority: low
Severity: minor Version: 3.6
Component: Bundled Theme Keywords: has-patch
Focuses: accessibility, javascript, performance Cc:

Description (last modified by westonruter)

Six of the core themes have the skip link focus fix which was needed specifically for IE11. However, now that IE11 market share is at ~0.5%, it seems a waste to include the script on every single page even when barely any visitor will benefit from it.

Note that the WordPress announcement post for Dropping support for Internet Explorer 11 does say that no changes to bundled themes would be done as part of the plan, including:

No code related to IE11 support (or any other browser that may have been supported when each theme was released) will be removed from default themes.

Nevertheless, I think an exception can be made here given only a fraction of IE11 users (which is already a very small fraction of users) would also need this focus fix.

So I suggest we:

  1. Remove the add_action() call to print the script at wp_print_footer_scripts.
  2. We add a @deprecated tag to the *_skip_link_focus_fix functions.
  3. Discontinue enqueueing skip-link-focus-fix scripts in older themes, but continue to register them.

Change History (12)

#1 follow-up: @joedolson
3 months ago

In the cases where this is needed, it may be significant (e.g. company intranet environments where IE11 is potentially still required & employees with disabilities need access to intranet resources). So while in general I support the idea of removing these scripts for most sites, I think it should be fairly easy to re-implement them.

Possibly use feature detection to load these only in IE?

#2 in reply to: ↑ 1 @westonruter
3 months ago

Replying to joedolson:

So while in general I support the idea of removing these scripts for most sites, I think it should be fairly easy to re-implement them.

Yes, and it should still be so. In Twenty Twenty, for example, the change I'd suggest is:

  • src/wp-content/themes/twentytwenty/functions.php

    a b add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' ); 
    232232 * thus it does not warrant having an entire dedicated blocking script being loaded.
    233233 *
    234234 * @since Twenty Twenty 1.0
     235 * @deprecated IE11 global usage is at 0.5% so it is no longer warranted for all visitors.
    235236 *
    236237 * @link https://git.io/vWdr2
    237238 */
    function twentytwenty_skip_link_focus_fix() { 
    243244        </script>
    244245        <?php
    245246}
    246 add_action( 'wp_print_footer_scripts', 'twentytwenty_skip_link_focus_fix' );
    247247
    248248/**
    249249 * Enqueue non-latin language styles.

So if a specific site wants to re-implement the skip link focus fix, all they have to do is create a child theme or add a plugin with a single line:

<?php
add_action( 'wp_print_footer_scripts', 'twentytwenty_skip_link_focus_fix' );

Possibly use feature detection to load these only in IE?

Unfortunately page caching will often break user agent detection, so this isn't really feasible.

#3 @joedolson
3 months ago

I guess my concern is that this is going to be a largely invisible change to sites that might need it, so the discoverability that somebody would need to make this change is very low.

It is going to be a very low percentage of sites where it's relevant, however, so it's probably reasonable.

This ticket was mentioned in PR #1904 on WordPress/wordpress-develop by westonruter.


2 months ago

  • Keywords has-patch added
  • Discontinue printing the skip link focus fix inline script by default in Twenty Nineteen, Twenty Twenty, and Twenty Twenty-One.
  • Discontinue enqueueing the skip link focus script (but continue to register it) in Twenty Fifteen, Twenty Sixteen, and Twenty Seventeen.
  • Add deprecation note to skip link focus fix in the functions.js file in Twenty Thirteen and Twenty Fourteen.
  • There is no skip link focus fix in Twenty Ten, Twenty Eleven, or Twenty Twelve.

Trac ticket: https://core.trac.wordpress.org/ticket/54421

#5 @westonruter
2 months ago

Just to confirm, note that IE11 is still the only browser needing this according to Is skip-link-focus-fix.js still necessary? in the _s repo.

#6 @westonruter
2 months ago

  • Owner set to westonruter
  • Status changed from new to accepted

#7 @westonruter
2 months ago

  • Milestone changed from Awaiting Review to 5.9
  • Version set to 3.6

#8 @westonruter
2 months ago

  • Description modified (diff)
  • Severity changed from trivial to minor

When working on the patch I realized that Twenty Fifteen, Twenty Sixteen, and Twenty Seventeen enqueue an external script for the skip link focus fix, so the severity is higher for those themes.

#9 @westonruter
2 months ago

  • Type changed from enhancement to defect (bug)

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


2 months ago

#11 @sabernhardt
2 months ago

  • Milestone changed from 5.9 to 6.0
  • Type changed from defect (bug) to enhancement

This does not need to be changed immediately. Besides, I think removing the (legacy) IE conditional code could give more of a performance improvement for the older themes.

Twenty Twenty-One uses the $is_IE variable to determine whether to enqueue the IE stylesheet instead of the one with custom CSS properties. So if page caching breaks the browser detection, that theme would have a bigger problem than printing a 350-byte script for only a small number of people. And if someone needs the script but caching would remove it, asking the site owner to disable page cache should be easier than asking them to create a child theme that reinstates the script (or even to install another plugin for it).

Twenty Thirteen and Twenty Fourteen might be better to keep as they are. Including a deprecation notice is just adding more to the script file—and changing its modified date. Plus, I don't know if moving it outside of functions.js could help at all.

#12 @sabernhardt
2 months ago

Twenty Seventeen has console errors when removing/dequeuing the skip link JS because the twentyseventeenScreenReaderText variable used in navigation.js and global.js is localized on twentyseventeen-skip-link-focus-fix. That part might be a bug (on a separate ticket?). If the navigation script can follow global, the localization could go on twentyseventeen-global instead.

If site owners know they do not need to support IE users, they could remove the script with just a single line of code today for other themes:

// Remove from Twenty Fifteen (similar with twentysixteen).
add_action( 'wp_enqueue_scripts', function() { wp_dequeue_script( 'twentyfifteen-skip-link-focus-fix' ); }, 11 );

// Remove from Twenty Twenty-One (similar with twentynineteen and twentytwenty).
add_action( 'wp', function() { remove_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' ); } );
Note: See TracTickets for help on using tickets.