Keyboard and Focus Checks

A site can look perfect with a mouse and be frustrating from the keyboard.

Test it.

Keyboard path

Starting at the browser chrome, use the keyboard to move through interactive elements.

Ask:

• Can every navigation link be reached?
• Is the current focus visible?
• Does focus order match the visual/logical order?
• Can menus or controls be operated without a pointer?
• Does focus disappear behind fixed elements?

Do not remove focus outlines casually

This is dangerous:

*:focus {
  outline: none;
}

If you customize focus appearance, replace it with an equally clear or better indicator.

Shared-template leverage

If navigation focus styling comes from one shared stylesheet/include, one improvement can benefit every page.

Controlled failure

Temporarily apply a style that makes focus nearly invisible.

Navigate by keyboard.

Feel the problem.

Then restore/build a visible focus treatment.

Skip navigation

For longer repeated navigation, consider a skip link that lets keyboard users move directly to main content.

Implement it only if you understand where focus lands and can verify it works.

Portfolio action

Complete a keyboard-only pass of:

• Home;
• Projects index;
• one Project page;
• Journal.

Checkpoint

Record one keyboard issue, the shared/local source responsible, the fix, and the verification result.