Check keyboard navigation in a static HTML report

Inventory the interactions

Even a mostly static report can contain section links, footnotes, expandable appendices, and horizontally scrollable code. List those interactions before testing. A reader should be able to reach meaningful controls without moving through dozens of decorative elements. Avoid adding tabindex to ordinary paragraphs merely to make them appear interactive.

Native elements provide useful behavior, but styling and surrounding layout can still create problems. A custom clickable div may lack keyboard behavior entirely, while a real link can have its focus outline removed by a stylesheet. Start with appropriate elements and keep the interaction model simple enough to inspect thoroughly.

Follow the reading sequence

Move through the document's interactive elements in order and compare that sequence with the content flow. Large differences can be disorienting, especially when CSS visually rearranges elements. Do not use positive tabindex values to patch a confusing source order; repair the underlying structure so visual and nonvisual reading are aligned.

Check whether focused links remain visible and whether fixed headers or overlays cover them. For long navigation blocks, a skip link may help readers reach the main content. Keep the destination meaningful and verify it in the actual artifact. A link that exists in the source but lands at an obscured or confusing location does not provide a useful shortcut.

Inspect exceptional content

Scrollable code and tables deserve special attention because keyboard reachability can vary with markup and environment. Verify that the reader can access the content without getting trapped or losing their place. Disclosures should open and close predictably, and their labels should make sense before expansion.

1. Start at the top and traverse every interactive element.
2. Confirm that focus is clearly visible against each background.
3. Check that navigation order matches the report's logical sequence.
4. Open native disclosures and inspect their contents.
5. Verify access to locally scrollable code or tables in the intended environment.
6. Remove pointer-only instructions such as hover to reveal essential evidence, and provide that evidence directly in the document.

Read next

• Describe architecture diagrams as relationships, not shapes
• Give data tables headers that survive nonvisual reading
• Write links that remain meaningful outside their paragraph
• Declare language and text direction in multilingual HTML

All accessible documentation guides →