Published lesson · 30 minutes

Make keyboard focus visible and predictable

Objective: Keep every interactive control reachable by keyboard and make the current focus location easy to see and follow.

The core idea

This lesson introduces make keyboard focus visible and predictable. Keep every interactive control reachable by keyboard and make the current focus location easy to see and follow. Begin with one small goal and make sure the result serves a real visitor or collaborator. The examples use fictional community information, so they can be adapted without exposing anyone’s private details.

The key idea is this: Keyboard focus shows where the next key action will go. Native links and buttons already support expected keyboard behavior. A visible focus indicator should have enough contrast and must not be hidden behind sticky content. Keep that idea separate from visual decoration or tool-specific habits. When you can explain why a choice helps the intended task, it becomes easier to review the result and to choose a different approach when the situation changes.

Put it into practice

Apply it to this situation: A visitor may use Tab to move through a notice page and Enter to open a link. A skip link can move past repeated navigation. Dialogs and menus need a clear opening, closing and return-focus behavior. Start with the smallest useful change. Inspect what changed, describe what you expected to happen and compare the result with the goal. This makes practice possible on a shared device or with limited connectivity.

Watch out for this: Removing the browser outline without adding a replacement hides the current position. Making non-interactive text focusable adds extra stops, while using a clickable div can omit keyboard behavior entirely. If something does not work, return to one known-good version and change one detail at a time. Do not include real names, contact details, passwords or access keys in examples, screenshots or shared project history.

Review your work before moving on. Use only the keyboard. Check the order, visible focus, skip link, menus, form controls and return point after closing a dialog. Confirm focus is not lost or covered as the page scrolls. A useful explanation names the audience, the decision and one check. Keep a short record of remaining questions so a facilitator or another learner can help without guessing what happened.

  • Name the task and audience before editing.
  • Make one focused change and inspect it.
  • Record one thing to improve or confirm next.

Worked examples

Make keyboard focus visible and predictable: a small example

See how make keyboard focus visible and predictable supports a clear, inclusive community web task.

index.html

<a class="skip-link" href="#main">Skip to notice</a>
<nav aria-label="Main">…</nav>
<main id="main"><h1>Community notice</h1></main>
<style>:focus-visible { outline: 3px solid #713400; outline-offset: 3px; }</style>

Practice tasks

  1. Explore the example

    Explore the make keyboard focus visible and predictable example. Change one small detail for a different fictional community situation, then explain what you expected and how you checked it.

  2. Build a focused result

    Create a small result that demonstrates this objective: Keep every interactive control reachable by keyboard and make the current focus location easy to see and follow. Keep the information fictional and explain one limitation that a future version should address.

  3. Review and explain your decision

    Review your make keyboard focus visible and predictable result from another person's point of view. Name one strength, one exact uncertainty and a change that would make the result clearer or safer.

Make keyboard focus visible and predictable is easier to learn when you name the goal, make one focused change and check the result with the people who need to use it.

Course overview