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:

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) 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:

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:


Example menus:

-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: ( )

For those interested in AMP: