Texas Tech University

Keyboard Navigation

Quick Start: What You Need to Know

Keyboard Accessibility ensures that all functionality available by mouse is also available via keyboard. Many users with motor disabilities rely on a keyboard, mouth stick, or switch device to navigate the web.

Immediate Actions:

  • Test your site using only the Tab, Shift+Tab, Enter, and Spacebar keys
  • Ensure every interactive element (links, buttons, inputs) shows a visible focus ring
  • Avoid using tabindex values greater than 0 (positive integers)
  • Check that the reading order matches the visual order
  • Ensure users can tab out of every element they tab into (No Keyboard Traps)
  • Include a "Skip to Main Content" link at the top of the page

Why This Matters

Think about how you navigate a screen. Now, imagine doing it without a mouse. For users with motor disabilities or those using screen readers, their keyboard is often the only way they can interact with your content.

Visual focus indicators are essential for allowing these users to successfully navigate your site. If a user tabs through a page but cannot identify which element is focused, they are left guessing where they are. Pages without focus indicators create an experience just as frustrating as trying to click a button with an invisible mouse cursor.

What to Look For: Detailed Checklist

Navigation & Focus

When you tab through a page, the element currently selected must have a visual indicator (usually a colored outline or ring). Never remove this outline via CSS (outline: none) unless you replace it with a custom, high-contrast alternative.

The order in which the cursor moves through the page should be logical and intuitive (usually left-to-right, top-to-bottom). It should match the visual layout. If your layout uses CSS Flexbox or Grid to rearrange elements visually, ensure the HTML DOM order still makes sense.

Anything that performs an action (buttons, links, form fields, toggles) must be reachable by keyboard. Static content (paragraphs, images, headers) generally should not receive keyboard focus.

Test: Can you open the dropdown menu? Can you close the modal window? Can you pause the video slider?

A keyboard trap occurs when a user tabs into a component (like a video player or a modal dialog) and cannot tab back out. This forces the user to refresh the page or get stuck. Ensure the Esc key or a specific focus loop allows users to exit.

Code Examples & Best Practices

Semantic Elements vs. Divs

Bad Example: Unfocusable Div

<div onclick="submitForm()" class="btn">Submit</div>
By default, a div is not focusable. A keyboard user will skip right over this. It also won't respond to the "Enter" or "Space" keys.

Good Example: Native Button

<button onclick="submitForm()" class="btn">Submit</button>
The <button> element is accessible by default. It is included in the tab order, receives focus, and automatically handles Enter/Space key activation.

Managing Tab Index

Bad Example: Positive Tabindex

<input type="text" name="name" tabindex="1">
<input type="text" name="email" tabindex="2">
Avoid positive integers. They force the browser to jump to these elements first, regardless of where they are on the page, breaking the logical reading order.

Good Example: Natural Order or Tabindex="0"

<!-- Allow natural DOM order to dictate flow -->
<input type="text" name="name">
<input type="text" name="email">

<!-- Making a custom element focusable -->
<div role="button" tabindex="0" onclick="..." onkeydown="...">Custom Button</div>
tabindex="0" adds an element to the natural tab flow. (Note: You still need JavaScript to handle key presses if you don't use a native button). tabindex="-1" removes an element from the tab flow (useful for off-screen content).

Skip Navigation Links

Best Practice: Skip to Main Content

<a href="#main-content" class="skip-link">Skip to Main Content</a>

/* CSS to hide it until focused */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0;
  top: 0;
  padding: 15px;
  background: #fff;
  z-index: 10000;
}
This link should be the very first thing in your HTML body. It allows keyboard users to bypass repetitive navigation menus and jump straight to the page content.

WCAG 2.1 Success Criteria Summary

The following criteria apply to keyboard accessibility:

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.

2.1.2 No Keyboard Trap Level A

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface.

2.4.7 Focus Visible Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Real-World Impact: Why This Matters

Story 1: The Invisible Form
The danger of outline: none

A staff member with tremors uses the Tab key to move through web forms because using a mouse is physically painful. They visited a departmental survey page where the designer had removed the default blue focus ring because they thought it was "ugly" (outline: 0;).

The staff member pressed Tab repeatedly but couldn't tell which field they were in. They accidentally typed their email into the "Name" field and their ID into the "Comments" field. Frustrated and unable to confirm their entries visually, they abandoned the form entirely.

Story 2: The Modal Trap
Stuck in the Terms of Service

A student using a keyboard-only interface tried to register for housing. A "Terms and Conditions" popup window appeared. They read the text and pressed Tab to find the "Close" button.

However, the code didn't contain a keyboard loop. When they tabbed past the "Agree" button, the focus didn't cycle back to the top of the popup—it went to the (greyed out) page behind the popup. They were trapped. They couldn't close the window using the Esc key because it wasn't programmed. Their only option was to refresh the browser and start the entire registration process over.

Additional Resources

WCAG Guidelines and Understanding Documents

Testing Tools

  • Your Keyboard: The best testing tool is the Tab key on your own keyboard.
  • Silktide - Texas Tech partners with Silktide to provide automated accessibility testing for all university websites.
  • Accessibility Insights for Web - Visualizes tab stops on a page.

Resources

Student Disability Services

Support and Accommodations

Human Resources (ADA)

Workplace accommodations and compliance

Contact Us

Reach out to our accessibility team

Report a Barrier

Encountered an issue? Let us know!

Digital Accessibility

© 2025  Texas Tech University Nov 25, 2025 11:33 AM