← Back to Blog

Keyboard Navigation and Focus

Ensure that every interactive function can be reached, understood and operated without a mouse.

Veyra Admin

2 min read

  • Article
  • Intermediate
  • 2 minutes read
  • Reviewed August 4, 2026

Keyboard accessibility allows users to operate a website without a mouse.

It supports people using keyboards, switches, voice control, screen readers and alternative input devices.

Basic Keyboard Operation

Test common keys:

  • Tab and Shift+Tab to move focus.
  • Enter to activate links and buttons.
  • Space to activate buttons and controls where expected.
  • Arrow keys inside components that use established patterns.
  • Escape to close dismissible overlays when appropriate.

Custom components should follow recognized interaction patterns.

Visible Focus

Users need to see which element currently has focus.

Do not remove outlines unless they are replaced with an equally visible indicator. Focus styling should remain visible against all backgrounds and states.

Logical Focus Order

Focus should follow the visual and logical reading order.

Avoid positive tabindex values that force a separate sequence. Structure the DOM correctly and use scripts only when focus must move for a clear reason.

Keyboard Traps

Users must be able to enter and leave components.

Modals may intentionally contain focus while open, but focus should return to the control that opened them after closing.

Embedded players, menus and third-party widgets should also be tested.

Standard website navigation is usually a set of links with buttons for opening submenus on smaller screens.

The toggle should expose its state, remain keyboard accessible and not rely on hover.

Focus and Dynamic Content

When an action adds content, displays an error or opens a dialog, decide whether focus should move.

Moving focus unnecessarily can disorient users. Leaving focus behind when a critical dialog opens can make the interface impossible to understand.

WordPress Testing

Test:

  • Header and footer navigation.
  • Search.
  • Forms.
  • Cookie or consent dialogs.
  • Carousels.
  • Accordions.
  • Modal windows.
  • WooCommerce or account workflows.
  • Plugin widgets.
  • Block Editor custom blocks.

Frequently Asked Questions

Does every element need to be focusable?

No. Only interactive elements and selected programmatic targets should enter the focus sequence.

Can CSS remove the default outline?

Only when a clear replacement is provided for every relevant state.

Continue Learning

Previous: [Colour, Contrast and Typography](/resources/wordpress-manual/accessibility/colour-contrast-typography/)

Next: [Accessible WordPress Forms](/resources/wordpress-manual/accessibility/accessible-wordpress-forms/)