MakeW3web

Keyboard Navigation

Keyboard navigation is a crucial aspect of web accessibility that ensures users who cannot use a mouse, or prefer to use the keyboard, can effectively navigate and interact with a web page. Here, we'll explain the key concepts of keyboard navigation and provide examples for each.

Focus and Tab Order

  1. Focus: Focus refers to the ability to select or highlight an element on the page using the keyboard. Typically, interactive elements like links, buttons, and form controls can receive focus by default.

  2. Tab order: The tab order is the sequence in which focus moves through the interactive elements on a page when using the Tab key. By default, the tab order follows the order of the elements in the HTML source code.

Example:

<!-- Pressing Tab will focus elements in this order: link1, button1, input1, link2 -->
<a href="#" id="link1">First link</a>
<button id="button1">First button</button>
<input type="text" id="input1" name="input1">
<a href="#" id="link2">Second link</a>

Improving Keyboard Navigation

  1. Managing focus: Ensure that all interactive elements are reachable using the keyboard. Avoid using elements that can't receive keyboard focus, like `<div>` or `<span>`, as interactive controls. Instead, use native HTML elements like `<button>` or `<a>`.

Example:

<!-- Use a native button element for better keyboard focus -->
<button>Submit</button>

<!-- Avoid using a non-interactive element for interactive purposes -->
<!-- <div onclick="submitForm()">Submit</div> -->
  1. Custom Tab Order: If necessary, you can control the tab order by using the `tabindex` attribute. However, use this with caution, as it can create confusing navigation patterns if misused.

Example:

<!-- Set custom tab order using the tabindex attribute -->
<a href="#" tabindex="1">First link</a>
<button tabindex="2">First button</button>
<input type="text" tabindex="3">
<a href="#" tabindex="4">Second link</a>
  1. Skip Navigation Links: Provide a "skip to main content" link at the beginning of the page, allowing users to bypass repetitive navigation elements and quickly access the main content.

Example:

<a href="#main-content" tabindex="1">Skip to main content</a>
<nav>
  <!-- Navigation menu -->
</nav>
<main id="main-content">
  <!-- Main content -->
</main>
  1. Visible focus indicator: Ensure that the focus indicator (usually a border or outline) is visible and prominent so that users can easily track their position on the page.

Example (CSS):

/* Add a custom focus indicator */
:focus {
  outline: 3px solid #3B8FF3;
}

By implementing effective keyboard navigation, you can make your web content more accessible and user-friendly for all users, including those who rely on the keyboard for navigation and interaction.

Was this page helpful?