Accessible Navigation & Keyboard Focus

Designing for Keyboard-First Workflows

Engineers and developers frequently navigate documentation using the keyboard (Tab, Shift+Tab, Enter, Escape, and Ctrl+K).

Practical Tip Skip Links & Focus Indicators Always provide a .skip-link as the first focusable element in <body> so keyboard users can jump directly to #main-content.

Verifying Focus Contrast in Python

You can calculate WCAG relative luminance contrast ratios directly in Python:

def contrast_ratio(l1, l2):
    bright, dark = max(l1, l2), min(l1, l2)
    return (bright + 0.05) / (dark + 0.05)

# White surface (L=1.0) vs Slate-900 ink (L=0.015)
ratio = contrast_ratio(1.0, 0.015)
print(f"Contrast ratio: {ratio:.2f}:1 (WCAG AAA requires >= 7.0:1)")