Categories and Tags screens changes in 4.6

In WordPress 4.6 the Categories and Tags screens (and all the custom terms screens that use the same edit-tags.php page) will change in order to make the visual order of the main elements match the tab order. This change is focused on helping people who use the keyboard to navigate the content or use assistive technologies such as screen readers.

If you’re a plugin or theme author and you’re providing custom functionalities in these screens, there are a few things you should check.

Why it matters

For accessibility, the visual order should always match the tab order. The main functionality in a page should just be the first thing in the source markup and other parts of the user interface should never be “skipped”.

The screenshot below illustrates the current Tags screen. The main content is split in two columns. The first element in the source is the right column with the table to list the terms followed by the tag cloud for the popular tags and the form to add new tags.

Tags screen visual order and tab order

The current order of the main content elements in the Tags screen.

On page load, the initial focus is set on the first focusable field in the form which is the third and last block of content in the page.

When using the keyboard or a screen reader, content navigation is a linearised process. Starting from the form to add new terms makes sense since this is the main task on these screens. But then users will move forward and they will find just the footer of the page. When relevant parts of content are skipped, it’s more likely for screen reader users to be confused or experience difficulty navigating pages. They just don’t have a clue there is something “before” their navigation starting point. Keyboard users will have to tab backwards to get to the previous content.

What is going to change

The two columns in these screens will be swapped. The first one in the source will be the left column, followed by the right column. Also, in the Tags screen, the tag cloud will be moved after the form. Visually, this change will make these two screens more consistent. From an accessibility point of view, the content structure and organization will be easier to understand and navigate.

The new categories screen

The new Categories screen.

The new tag screen

The new tag screen.

Things you should check

  • if you’re using CSS or jQuery selectors for your added functionalities, you should consider the order of the elements in the markup has changed
  • there are a number of action hooks and filters in these screens but basically just one will have a different order, see the related ticket for more details

Note: For more in-depth information see the related Trac ticket: Edit term screens: tab order should match visual order.

Get ahead of 4.6 and update now!

If you’re a theme or plugin developer: now is a great time to check your code! Help us to make the Web a place designed to work for all people. Any feedback and thoughts are more than welcome, please let us know in the comments below.

#4-6, #accessibility, #dev-notes