Planning for keyboard navigation

The theme review team is requiring all themes to implement keyboard navigation in five weeks time, around the third of september 2019.

Because this may be a complex task for many authors, we encourage you to start planning for and working on this as soon as possible.

We want to point out that this requirement does not only include menus. All functionality should work using a keyboard only. Any action you can complete with a mouse must also be performable via keyboard.

Theme authors must provide visual keyboard focus highlighting in navigation menus and for form fields, submit buttons and text links. All controls and links must be reachable using the keyboard.

First, please read the requirement found here: https://make.wordpress.org/themes/handbook/review/accessibility/required/#keyboard-navigation

As well as the background for this requirement: Techniques for WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2.0
G202: Ensuring keyboard control for all functionality

We would like to collect examples for the keyboard navigation, including menus. If you know of a good resource that is not already included, please add a comment and link.

If you need help, you can also use the Accessibility Support Forum.

As always, communication is key, if you know that you will need extra time to solve this, contact the team or add a note in your ticket so that we know that you are working on it.

Navigation menus and controls

Drop down menus and controls must be available when tabbing, using keyboard only.

Controls also include open and close buttons for modals such as off canvas sidebars or search forms.

Visible Focus

As a general rule, do not remove the browsers native outline from the focusable elements without replacing it with an accessible alternative.

Form fields

Don’t break the browsers default focus by removing the outline. Other kinds of decorative changes are also allowed. Only showing the marker inside the field is not enough.

Submit buttons

Submit buttons may be hidden during it’s normal state but visible on focus.

A high contrast color change, an outline, a border, or a text decoration change will assure that visible submit buttons pass the requirements.

Text links

Do not remove the browsers native outline without replacing it with an accessible alternative.

Make sure that you can see which link is focused. Focus should either incorporate a visual change that is not based on color (background change, underline, shape) or a color change where the difference between the two colors meets the WCAG 2.0 level AA contrast ratio (4.5:1) .

Focus order

Focus order should match the visual order. Make sure that focus doesn’t move in unexpected ways around the page.

Both forward and backwards tabbing must work. To test backwards tabbing, hold down Tab and Shift at the same time.
Please also note that use of tabindex is discouraged.

Recommended reading regarding focus order:

https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-order

CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. grid and focus order: https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order

Resources

https://make.wordpress.org/accessibility/handbook/test-for-web-accessibility/test-for-web-accessibility-frontend-code/#keyboard-navigation

Example menus:

https://www.w3.org/TR/wai-aria-practices/#menu

https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

https://github.com/wpaccessibility/a11ythemepatterns

-Some concerns were voiced during our previous meeting about the above examples not being updated for 4 years, so if people would try these out and help keep the code up to date that would be very helpful.

@acalfieri Is working on an example menu here, please help her test it and leave feedback: https://github.com/anace/keyboard-navigation

https://wordpress.org/themes/twentynineteen/

https://wordpress.org/themes/twentyseventeen/

https://github.com/Automattic/_s ( https://underscores.me/ )

https://github.com/wprig/wprig/

For those interested in AMP:
https://amp-wp.org/documentation/playbooks/keyboard-accessible-navigation-menus/

Meeting notes from July 23rd, 2019

A meeting was held with the proposed agenda.

The following is the recap of the meeting, you can read the meeting transcript in the slack archives (a Slack account is required).

Updates

We got positive and supportive feedback about the skip links (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)). Even though it is simple to implement, the authors were confused. But we have a post explaining what they are and how to implement them.

Authors are starting to change the admin notices, according to the guidelines.

Promoting other themes from within popular themes isn’t allowed. Few authors were caught doing this and they changed it upon request. Ignoring the request to remove the promotions will result in theme suspension.

After meeting with the documentation team, @acalfieri was selected as a representative from the Theme review team to update the theme developer handbook.

A new version of Theme Sniffer and WPThemeReview coding standards was released.

In the past seven days:

  • 449 tickets were opened
  • 463 tickets were closed
  • 416 tickets were set live
  • 25 new Themes were set live
  • 391 Theme updates were set live
  • 10 more were approved but are waiting to be set live
  • 39 tickets were not-approved
  • 8 tickets were closed-newer-version-uploaded

An automatic way of notifying theme authors

It was proposed that all the theme authors get automatically subscribed to the TRT blog so that they can be made aware of the announcements when they are made.

Another proposal was to send mass emails to all theme authors to make sure their themes are compliant with the newest requirements. Those whose email bounced would get suspended or changed to reviewing status.

An agreement was not reached. It was agreed that the TRT will reach out to other teams so that we can see how they are dealing with this issue, and if this can be solved on a more global basis.

Looking for good examples of keyboard navigation

A team needs a good example for keyboard navigation, especially for menus, so that we can provide an example for theme authors, as this is going to be the next a11yAccessibility 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) measure that will be implemented.

Currently, we don’t have an agreement to what is the best way to move forward with this so any contribution is welcomed.

Open floor discussion

The feature packages project needs active contributors, so if you are interested in contributing to the TRT open-source projects check out the official TRT Github repository.

#meeting, #meeting-notes, #trt

Theme Sniffer v1.1.0 and WPThemeReview v0.2.0 release

The update of the Theme Sniffer plugin and the WPThemeReview coding standards is out 🎉

Theme SnifferTheme Sniffer Theme Sniffer is a plugin utilizing custom sniffs for PHP_CodeSniffer that statically analyzes your theme and ensures that it adheres to WordPress coding conventions, as well as checking your code against PHP version compatibility. The plugin is available from the plugin directory and Github. Themes are not required to pass the Theme Sniffer scan without warnings or errors to be included in the theme directory. is 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 utilising custom sniffs for PHP_CodeSniffer that statically analyses your theme and ensures that it adheres to WordPress coding conventions, as well as checking your code against PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. version compatibility.

WPThemeReview is the official Theme Review Team coding standard used for checking the themes using PHP_CodeSniffer (PHPCS).

Both are used as helpful tools during the theme review process (not a requirement).

In the Theme Sniffer update we’ve done some bigger changes, including

  • Added sniff codes that can be copied for easier whitelisting of the false issues
  • Added readme validator
  • Added Screenshot validator
  • Added required files checks
  • Added checks for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. minimum PHP version
  • Added a license validator
  • Updated WPThemeReview coding standards to the 0.2.0 version
  • Moved JS checking to esprima
  • Moved installation error to admin notice
  • Validation improvements
  • Fixed annotation issue – the ingore annotation checkbox worked counter to what it should
  • Fixed cross-env issue for development on Windows machines
  • Minor grammar fixes
  • Minor visual fixes

A lot of new this have been added and I’d like to thank @timph for making an awesome contribution to the plugin.
I’d also like to thank all other awesome contributors. Your work is really appreciated.

In the WPThemeReview update we’ve added some new sniffs, updated few rulesets and fixed some old sniffs to minimize the false positives. You can check out the full changelog here.

I’d also like to thank @jrf for helping out with the standards. Her expertise is invaluable to us.

Roadmap

The development of the Theme Sniffer and standards continues, and the roadmap that I had in mind, for the Theme Sniffer, was to

  1. Write complete integration test suite
  2. Improve on the 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) of the admin area
  3. Refactor the plugin to add php-di for dependency injection
  4. Refactor the plugin to make the codebase more manageable
  5. Refactor some JS to remove jQuery dependency, as it’s not really needed and all the JS can be written in vanilla JS
  6. Add the features mentioned in the issues

For the standards, we need to decide on some open issues, then make a roadmap for implementing other sniffs.

The plugin is actively developed on Github, so if you wish to contribute you can start there. Also, if you find any issue with the plugin, feel free to open an issue on the repository.

You can find an entry in the handbook about the usage and some clarification regarding the sniff results interpretation.

The standard is also developed on Github, contributions are welcomed.

Call for contributors

We need your help. While I’d love nothing more than to work on this and other TRT 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. projects, I just don’t have enough time to work full time on it (which impacts the releases and updates).

So if you have experience with modern object oriented PHP and want to help develop an awesome tool I’d be happy to help you with the onboarding. Also, writing documentation, doing some quality assurance issues, working on design improvements (a11yAccessibility 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)) and solving some other issues is also very welcomed.

#open-source, #plugin, #theme-sniffer

Theme Review Team Meeting Agenda for July 23, 2019

Theme review team conducts a meeting on the second and fourth Tuesday of the month. We usually have fixed agendas for the fourth Tuesday meeting.

We have several topics to discuss. Hence, we encourage all members and anyone interested to attend.

Channel: #themereview | Time: Tuesday, 09th July 2019, 17:00 UTC

Agenda for Discussion

  1. Weekly Updates
  2. Creating a mailing list, so that we can send information about requirement changes to all theme authors not only those who have open tickets.
  3. Looking for good examples of keyboard navigation.
  4. Open Floor

Meetings usually last around 60 minutes. If anyone wants anything else to add on the existing agenda comment below and we will try to fit it in.

Discussion can be held in the comments below.

#agenda

How to add and test skip links

Many users navigate websites using the keyboard only or with screen readers. These users need a way to skip directly to the main content of the page.

If your theme has a navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site., a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. / banner area with content, or secondary sidebars before users reach the main content, your theme is required to include a skip link.

Even if you have never used a skip link in your theme before, you may have seen this behavior in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. or on other websites.

For example, if you navigate to the top of this page, and press the Tab key, you will see a skip link:

A button element with the text "Skip to toolbar" in high contrast.

Clicking the link or using the Enter key will bring you to the target area.

This is the first focusable element on this page, and this is what you need to recreate.

And as a reviewer, you have already tested everything you need to see if a theme passes this requirement.

Lets look at one more example. Below is an animation of the skip link used in Twenty Nineteen. First, I place the cursor in the adress field and press Tab. When the skip link is focused, I press Enter, and focus is moved to the element with the content ID:

An animation of the skip link used in the Twenty Nineteen theme. When the skip link is used, the focus moves to the container that holds the main content.

A minimally conforming skip link must:

  • Be the first focusable element perceived by a user via screen reader or keyboard navigation.
  • Be visible when keyboard focus moves to the link.
  • Move focus to the main content area of the page when activated.

Note that using a small font-size for the link, or a color contrast that is too low, may render the skip link useless to the users that it is intended to help (Note that despite it’s style, this is not a button).

Code examples:

Place the link at the top of your page, for example below wp_body_open in header.php:

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">
<?php _e( 'Skip to content', 'twentynineteen' ); ?></a>

Remember to adjust the link target to make it work for your theme.

CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.:

/* Accessibility */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.

There are known bugs with skip links, so if you want to add workarounds, this is how the problem is solved in the default theme:

/**
 * Fix skip link focus in IE11.
 *
 * This does not enqueue the script because it is tiny and because it is only for IE11,
 * thus it does not warrant having an entire dedicated blocking script being loaded.
 *
 * @link https://git.io/vWdr2
 */
function twentynineteen_skip_link_focus_fix() {
	// The following is minified via `terser --compress --mangle -- js/skip-link-focus-fix.js`.
	?>
	<script>
	/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
	</script>
	<?php
}
add_action( 'wp_print_footer_scripts', 'twentynineteen_skip_link_focus_fix' );

Read more about skip links:

Please read the following documentation from the 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) team: WordPress Accessibility – Development best practices -Skip Links https://make.wordpress.org/accessibility/handbook/markup/skip-links/

https://make.wordpress.org/themes/handbook/review/accessibility/required/#skip-links

Techniques for WCAG 2.0 -G1: Adding a link at the top of each page that goes directly to the main content area