Compatibility:

WebSite X5 Evo and Pro from v.2025.1

Moving around a website should be a simple and intuitive process for everyone. Unfortunately, not all users can use a mouse to navigate, and when a site does not offer alternatives, some users may find themselves stuck.


For people with motor disabilities or those using a screen reader, the keyboard is the only available navigation tool. If a website is not designed to be accessible via keyboard, these users may be unable to access content or complete essential actions like filling out a form or clicking a button.


At the same time, keyboard navigation can benefit everyone: think about someone whose mouse is not working, those who prefer using the keyboard for faster operations, or users browsing on a laptop with an imprecise touchpad. A well-structured site allows users to move between content smoothly and intuitively, improving the experience for all.


In this guide, we will explore why keyboard navigation is crucial for web accessibility and focus on:


Why is keyboard navigation important?

Keyboard navigation is one of the most crucial accessibility features for a website. As mentioned earlier, not all users can rely on a mouse or touchpad, and for some, the keyboard is the only available tool to navigate through content and interact with web pages.


The people who rely most on keyboard navigation include:

  • Users with motor disabilities → Individuals with mobility impairments, such as those with paralysis or tremors, may struggle to use a mouse accurately. The keyboard becomes their primary tool for accessing the web.
  • Blind or visually impaired users → People who use screen readers primarily interact with websites through the keyboard, navigating content using specific commands from assistive software.
  • Users with temporary disabilities or in specific situations → Someone with a broken arm, a malfunctioning touchpad, or working with an external monitor without a mouse may depend on the keyboard for navigation.


A website that does not support keyboard navigation risks excluding a significant portion of users, limiting access to content and diminishing the overall online experience.


How does keyboard navigation work?

As you might expect, keyboard navigation allows users to move through a website’s content without using a mouse, relying solely on keyboard keys.


The primary navigation tool is the TAB key: by pressing it, users can move through interactive elements on the page, such as links, buttons, input fields, and menus. The order in which these elements are accessed is determined by the structure of the HTML code and ideally follows a logical flow consistent with the visual layout of the page.


In addition to the TAB key, other essential keys for navigation include:

  • Shift + TAB → Moves back to the previous element.
  • Enter → Activates links and buttons.
  • Spacebar → Selects checkboxes and activates some interactive elements.
  • Up Arrow / Down Arrow → Scrolls through dropdown menus or multiple-option elements.
  • Esc → Closes modal windows, dropdown menus, or pop-ups.


When a user navigates using the keyboard, each selectable element receives focus, a visual indicator that highlights the currently selected element. A well-designed website ensures that focus is always visible and clear, allowing users to understand exactly where they are on the page.


Key WCAG guidelines for keyboard navigation

The Web Content Accessibility Guidelines (WCAG) define several criteria to ensure that a website is fully accessible to users who navigate exclusively with the keyboard. Below are the most important ones:

  • Criterion 2.1.1 – Keyboard accessibility (Level A)

A website must be fully navigable using the keyboard without requiring mouse-dependent interactions, such as dragging or pointer-exclusive actions. All interactive elements—links, buttons, forms, and menus—must be operable with standard keyboard keys such as TAB, Enter, and Spacebar.

  • Criterion 2.1.2 – No keyboard traps (Level A)

Users must be able to navigate freely within a webpage without getting trapped in a particular section. This issue arises when a site prevents moving focus beyond a modal window or interactive widget, making it impossible to continue navigation. To prevent this, it must always be possible to exit any section of the page by pressing TAB or Esc.

  • Criterion 2.4.3 – Focus order (Level A)

The order of navigation via the TAB key must follow a logical sequence that matches the visual structure of the page. For example, if a form contains fields for Name, Surname, and Email, keyboard navigation should follow this order without skipping elements or confusing the user.

  • Criterion 2.4.7 – Focus visible (Level AA)

Each active element must have a clear visual indicator that shows where the user is on the page. The focus can be highlighted with a visible border, a shadow, or a color change, making navigation intuitive. If a site does not provide a clear focus indicator, users may become disoriented and unable to proceed.


It is evident that following these criteria improves user experience and ensures that navigation is accessible to everyone, regardless of motor abilities or the device used.


Tools to check keyboard navigability

If keyboard navigation is not implemented correctly, users who cannot or do not want to navigate with a mouse will likely encounter difficulties. To prevent this, it is essential to test keyboard navigation and ensure that all interactive elements are accessible.


There are several tools and methods available, but one of the simplest and most immediate ways is manual testing. In this case, you just need to disconnect the mouse and try navigating the website using only the keyboard. Specifically, the following tests should be performed:

  • Press TAB to check that all interactive elements can be reached.
  • Use Shift + TAB to navigate backward and ensure that the order is logical.
  • Press Enter or Spacebar on links and buttons to confirm they activate correctly.
  • Ensure that the focus is always visible and does not get lost among page elements.
  • Open and close any modal windows or menus to check that the focus returns to the initial point.


In addition to manual testing, you can use automated tools to identify potential issues related to keyboard navigation. Some available tools include:

  • WAVE (Web Accessibility Evaluation Tool) → Analyzes the website and reports accessibility issues, including those related to keyboard navigation.
  • Axe DevTools → A browser extension that detects focus errors and suggests solutions.
  • Chrome DevTools – Accessibility Pane → Provides a detailed analysis of interactive elements and their focus handling.

WebSite X5 and keyboard navigation

Ensuring accessible keyboard navigation requires attention to various technical aspects and the generation of semantically correct code.


WebSite X5 generates clean and semantic HTML code, optimizing keyboard navigation without requiring manual adjustments. Specifically:

  • The tab order is correctly defined to ensure a logical flow between interactive elements.
  • The focus is always visible and follows a clear path within the page.
  • Dynamic elements, such as menus or pop-ups, are configured to move the focus correctly and return it to the starting point.
  • Default settings comply with WCAG guidelines, making the site accessible to screen reader users and those navigating exclusively with a keyboard.


#tip - For more details, see Accessibility criteria implemented in WebSite X5