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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or theme author and you’re providing custom functionalities in these screens, there are a few things you should check.

Why it matters

For accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) cloud for the popular tags and the form to add new tags.

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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 tag screen.

Things you should check

if you’re using CSSCSS Cascading Style Sheets. 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 hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. and filters in these screens but basically just one will have a different order, see the related ticketticket Created for both bug reports and feature development on the bug tracker. for more details

For more in-depth information see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.Trac An open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project by Edgewall Software that serves as a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: 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

amijangos 3:29 pm on May 16, 2016

Great work! I don’t normally go to the Tags or Categories, but this week I’ve been there and the new flow is the right thing to do.
Ahmad Awais 5:35 pm on May 16, 2016

This flow of things makes a lot more sense!
Mike Nelson 5:38 pm on May 16, 2016

+1
Rami Yushuvaev 8:00 pm on May 16, 2016

Any chance the tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) cloud will be removed?
Andrea Fercia 7:50 am on May 17, 2016

Hi Rami, no plans to remove it I’m aware of. By the way, there are already filters in place you can use to don’t output the tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) cloud and you could wrap your code in a `is_admin()` check.
- Rami Yushuvaev 11:48 am on May 28, 2016
  
  Nice trick but it hides only the tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) cloud, not the H2 title.
  - Andrea Fercia 1:57 pm on May 28, 2016
    
    You can filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. labels and set `popular_items` to `null` to avoid calling `wp_tag_cloud()` and printing the heading altogether.