Skip to main content

Back to Guidelines

What is On Input?

Changing input does not automatically change context without warning.

Changing input does not automatically change context without warning.

Keyboard and screen reader users.
People who need predictable interactions.
Users who benefit from visible focus and clear labels.

Good vs Bad Examples

Use the tabs to compare the accessible pattern with the example to avoid.

Good Example 1 – Input Stays on the Same Page

Add Student form where selecting a class updates the student list on the same page without changing context.

html

<select aria-label="Class">
  <option>Class 8</option>
  <option>Class 9</option>
</select>
<button type="button">Save Student</button>

Why this is correct (developer logic):

Selecting a class updates content within the same page.
Users stay in control and keep their place.
No warning is needed because context does not change.

Good Example 2 – Search Suggestions Without Context Change

Dashboard search box showing suggestions while the user types without navigating away.

html

<input type="search" aria-label="Quick Search" />
<ul aria-label="Search suggestions"></ul>

Why this is correct (developer logic):

Typing shows suggestions without changing pages.
Users can choose a result or keep typing.
The task continues in the same context.

Implementation Checklist

Progress0 / 5 completed (0%)

Keep the interaction predictable and easy to understand.
Test with keyboard and screen reader navigation.
Make sure focus is visible and easy to track.
Avoid hidden, unexpected, or unnecessary repetition.
Confirm the example meets the intended accessibility requirement.

Knowledge Check

Answer Yes or No to test your understanding of on input.

Score: 0 / 3 · Answered: 0 / 3

Does the good example demonstrate on input correctly?

Is the bad example acceptable for on input?

Should this pattern be checked with keyboard and screen reader testing?