Design & UXIntermediate 2 to 3 hours

Keyboard Navigation Design

Design the keyboard navigation flow for a complex component.

The Scenario

A data table component has sortable columns, row selection, inline editing, and a context menu. Mouse users can do everything easily. Keyboard users are stuck — there is no focus management, no arrow key navigation, and Escape does not close the context menu.

The Brief

Design the complete keyboard navigation specification for this data table. Cover focus order, key bindings, focus trapping for the context menu, and screen reader announcements.

Deliverables

  • A focus order specification: Tab sequence through the table, including column headers, rows, and action buttons
  • Key bindings: Arrow keys for cell navigation, Enter for editing, Escape for cancelling, Space for row selection
  • Focus management for the context menu: how it opens, traps focus, and returns focus on close
  • Screen reader announcements: what is announced when sorting, selecting, and editing

Submission Guidance

A data table with 100 rows and 8 columns has 800 cells. Tab-bing through every cell is unusable. Use arrow keys for cell navigation and Tab for structural navigation. Show this distinction.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.