Keyboard-Accessible Search and Data Tables

A reference site is successful when a reader can find a value, understand its column, and take it away. Keyboard access and narrow-screen layout directly affect that task. A visually attractive search field is incomplete if the results cannot be reached, and a responsive page is incomplete if it clips the last columns of a table.

Begin with native elements: a labeled search input, real links for results, buttons for actions, and table headers for data. Add custom behavior only where the interaction needs it. Native semantics reduce the amount of state and keyboard behavior the application must recreate.

Make a search dialog a complete interaction

Give the dialog a visible title and use showModal when a modal experience is intended. Move focus into the search field after opening. Escape should close it, and closing should return focus to the control that opened it. Keep the background out of the modal focus sequence.

Announce a concise result count through a polite status region. Do not announce the whole result list on every keystroke. Support a useful empty state and a load-failure state that offers ordinary navigation. The search shortcut should not intercept a slash typed into an input, textarea, select, or editable region.

Let the table scroll, not the entire page

.table-region {
  max-width: 100%;
  overflow-x: auto;
}
.grid-child {
  min-width: 0;
}

A wide data table may legitimately need horizontal scrolling. Keep that scrolling within a clearly labeled, keyboard-reachable region, while the surrounding prose reflows. Do not use body-level overflow hiding as the fix: it can conceal columns without giving the reader a way to reach them.

Preserve th scope attributes and use a caption or nearby heading to identify the table. If filtering hides rows, announce the remaining count and keep the column headers. Make it easy to clear the query. Filtering should improve scanning while the full server-rendered table remains available without JavaScript.

Verify real states

Test from the keyboard alone: open search, enter a query, move to a result, close the dialog, and check focus restoration. At a narrow width, open navigation, close it with Escape, and rotate or resize while it is open. Try larger text and reduced motion. Check the table’s first and last columns, not just the left edge.

These checks do not constitute a complete accessibility audit. They do establish whether the primary lookup workflow works under conditions that ordinary mouse-only desktop testing misses.

Reference tables to keep nearby

• Accessible Interface Pattern Checklist — Keyboard, focus, and semantic requirements for common browser interface patterns.
• Responsive CSS Layout Recipes — Small CSS patterns for resilient columns, readable text, scrollable data, and mobile controls.

Primary sources

These are the specifications and project documentation behind the examples. Check the relevant implementation and version before applying a pattern.

• WAI-ARIA Authoring Practices
• W3C modal dialog pattern
• MDN CSS grid layout
• W3C reflow guidance