consolelog.tools logo

Keyboard Navigation Tester

Generate keyboard event handlers for accessible navigation

Generate Keyboard Handler

Code

// Keyboard handler for custom button
function handleKeyDown(event) {
  // Activate on Enter or Space
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleClick(event);
  }
}

// Usage
<div
  role="button"
  tabindex="0"
  onkeydown={handleKeyDown}
  onclick={handleClick}
>
  Custom Button
</div>

Keyboard Navigation Best Practices

Tab Order

  • •Follow natural reading order (DOM order)
  • •Avoid positive tabindex values (1, 2, 3, etc.)
  • •Use tabindex="0" to add elements to natural tab order
  • •Use tabindex="-1" only for programmatic focus
  • •Ensure modals trap focus while open
View code example
<!-- Good: Natural DOM order -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- Bad: Using positive tabindex -->
<button tabindex="3">Third</button>
<button tabindex="1">First</button>
<button tabindex="2">Second</button>

Focus Indicators

  • •Ensure visible focus indicator on all interactive elements
  • •Use :focus-visible to show indicators only for keyboard navigation
  • •Maintain 3:1 contrast ratio for focus indicators (WCAG 2.1)
  • •Never remove outline without providing alternative
  • •Focus indicator should be at least 2px thick
View code example
/* Good: Visible focus indicator */
button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Bad: Removing focus indicator */
button:focus {
  outline: none; /* Don't do this! */
}

Focus Management

  • •Move focus to new content after navigation
  • •Return focus to trigger element after closing modal
  • •Set focus to first heading when loading new page/view
  • •Use aria-live for dynamic content announcements
  • •Skip links should be first focusable element
View code example
// Managing focus when opening modal
function openModal() {
  const modal = document.getElementById('modal');
  const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');

  modal.showModal();
  firstFocusable?.focus();
}

// Return focus when closing
function closeModal(triggerElement) {
  const modal = document.getElementById('modal');
  modal.close();
  triggerElement.focus();
}

Keyboard Interaction

  • •All functionality available via keyboard
  • •Use semantic HTML elements (button, a, input)
  • •Implement ARIA keyboard patterns for custom widgets
  • •Document keyboard shortcuts
  • •Provide keyboard alternatives to drag-and-drop
View code example
<!-- Custom interactive element -->
<div
  role="button"
  tabindex="0"
  onkeydown="if(event.key === 'Enter' || event.key === ' ') handleClick(event)"
  onclick="handleClick(event)"
>
  Custom Button
</div>

Skip Links

  • •Provide skip to main content link
  • •Skip link should be first focusable element
  • •Can be visually hidden but visible on focus
  • •Include multiple skip links for complex layouts
  • •Test that skip link target is properly focused
View code example
<!-- Skip link at start of page -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<style>
  .skip-link {
    position: absolute;
    left: -9999px;
  }

  .skip-link:focus {
    left: 0;
    top: 0;
    z-index: 9999;
    padding: 1rem;
    background: #000;
    color: #fff;
  }
</style>

<main id="main-content" tabindex="-1">
  <!-- Main content -->
</main>

Interactive Focus Demo

Press Tab to navigate through these elements. Notice the visible focus indicators.

Focusable Link

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Keyboard Navigation Tester