Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard Focus Indicators</title>
</head>
<body>
<div class="container">
<h1>⌨️ Keyboard Focus Indicators</h1>
<div class="instruction">
<strong>Try This:</strong> Press <kbd style="background: white; padding: 4px 8px; border-radius: 4px; border: 1px solid #d1d5db;">Tab</kbd> to navigate between buttons below
</div>
<div class="comparison">
<div class="bad-example">
<h3>❌ No Focus Indicator</h3>
<button class="bad-button">Click Me</button>
<button class="bad-button">Another Button</button>
<button class="bad-button">Third Button</button>
<p>
Can you tell which button is focused? Keyboard users can't either!
This makes navigation impossible.
</p>
</div>
<div class="good-example">
<h3>✅ Clear Focus Indicator</h3>
<button class="good-button">Click Me</button>
<button class="good-button">Another Button</button>
<button class="good-button">Third Button</button>
<p>
Much better! The focused button has a bright outline, making it
obvious which element is active.
</p>
</div>
</div>
<div style="background: #eff6ff; padding: 25px; border-radius: 12px; margin-top: 30px; border-left: 4px solid #3b82f6;">
<h3 style="color: #1e40af; margin-bottom: 10px;">💡 Focus Indicator Best Practices</h3>
<ul style="list-style: none; line-height: 2; color: #1e3a8a;">
<li>✓ Use outline or box-shadow, not just background color</li>
<li>✓ Ensure 3:1 contrast ratio against adjacent colors</li>
<li>✓ Make it at least 2px thick</li>
<li>✓ Consider offset for breathing room</li>
<li>✓ Never use outline: none without a replacement!</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyboard Navigation Patterns</title>
</head>
<body>
<div class="container">
<h1>⌨️ Keyboard Navigation Patterns</h1>
<div class="pattern-grid">
<!-- Tab Pattern -->
<div class="pattern-card">
<h3>
<span style="font-size: 1.5rem;">⇥</span>
Tab / Shift+Tab
</h3>
<div class="keys">
<span class="key">Tab</span>
<span class="key">Shift + Tab</span>
</div>
<p class="description">
Move forward/backward through focusable elements (buttons, links, inputs).
This is the most important keyboard navigation pattern.
</p>
</div>
<!-- Enter/Space Pattern -->
<div class="pattern-card">
<h3>
<span style="font-size: 1.5rem;">↵</span>
Enter / Space
</h3>
<div class="keys">
<span class="key">Enter</span>
<span class="key">Space</span>
</div>
<p class="description">
Activate buttons and links. Enter works for links and buttons, Space for buttons and checkboxes.
</p>
<div class="interactive-demo">
<button onclick="alert('Button activated!')">Try pressing Enter or Space</button>
</div>
</div>
<!-- Arrow Keys Pattern -->
<div class="pattern-card">
<h3>
<span style="font-size: 1.5rem;">↕↔</span>
Arrow Keys
</h3>
<div class="keys">
<span class="key">↑</span>
<span class="key">↓</span>
<span class="key">←</span>
<span class="key">→</span>
</div>
<p class="description">
Navigate within components like menus, radio groups, tabs, and sliders.
</p>
<div class="interactive-demo">
<p style="color: #6b7280; margin-bottom: 10px; font-size: 0.9rem;">
Click any item, then use ↑↓ arrows to navigate:
</p>
<ul class="menu" onkeydown="handleMenuKeyboard(event)">
<li class="menu-item" tabindex="0">Home</li>
<li class="menu-item" tabindex="0">About</li>
<li class="menu-item" tabindex="0">Services</li>
<li class="menu-item" tabindex="0">Contact</li>
</ul>
</div>
</div>
<!-- Escape Pattern -->
<div class="pattern-card">
<h3>
<span style="font-size: 1.5rem;">⎋</span>
Escape
</h3>
<div class="keys">
<span class="key">Esc</span>
</div>
<p class="description">
Close modals, dialogs, dropdown menus, and other overlay content. Cancel operations.
</p>
</div>
<!-- Home/End Pattern -->
<div class="pattern-card">
<h3>
<span style="font-size: 1.5rem;">⇱⇲</span>
Home / End
</h3>
<div class="keys">
<span class="key">Home</span>
<span class="key">End</span>
</div>
<p class="description">
Jump to first/last item in lists, first/last character in inputs.
</p>
</div>
</div>
<div style="background: #fef3c7; padding: 25px; border-radius: 12px; margin-top: 30px; border-left: 4px solid #f59e0b;">
<h3 style="color: #78350f; margin-bottom: 15px;">⚡ Quick Testing Checklist</h3>
<ul style="list-style: none; line-height: 2; color: #92400e;">
<li>✓ Can you reach all interactive elements with Tab?</li>
<li>✓ Is focus indicator visible on all elements?</li>
<li>✓ Do buttons activate with Enter and Space?</li>
<li>✓ Do arrow keys work in custom widgets?</li>
<li>✓ Does Esc close modals/menus?</li>
<li>✓ Can you complete forms without touching mouse?</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
Makes non-interactive elements focusable. Adds to natural tab order.
<div tabindex="0" role="button">Focusable div</div>Focusable programmatically (via JavaScript) but not via Tab key.
<div tabindex="-1" id="modal">Modal content</div>DON'T USE! Creates confusing tab order. Use source order instead.
<!-- AVOID: tabindex="1", tabindex="2", etc. -->The best way to test keyboard accessibility is to actually use your site with keyboard only: