PRACTICE 9 OF 9 · Controls and navigation
Tooltip and help text
Check whether critical help text is available on focus and not only on hover.
Recognize when help text must be persistently available or programmatically associated with a control.
PREPARE
Set up your test
- Turn on a screen reader you know how to operate.
- Navigate by controls or use Tab where the task asks you to.
- Listen for purpose and state, not one exact sequence of spoken words.
WORKING EXAMPLE
Establish the expected behavior
Move focus to the field and listen for the help text.
Expected behavior: critical help is available on keyboard focus and through the field description.
INTENTIONAL DEFECT
Find the barrier
The example below deliberately contains one accessibility defect. Skip the defective example.
Move focus to the field. Determine whether the question-mark help is available without a mouse.
Hint
Hover-only content is not available to keyboard-only users.
End of intentional defect.
DIAGNOSE
Choose the primary cause
EXPLANATION
Understand and repair it
Reveal explanation
What happened
The defective field hides important instructions behind a hover-only tooltip. The input has no programmatic description.
Repair
Prefer persistent visible help text for instructions users need to complete a field. Associate it with the input using aria-describedby.
<p id="api-help">Use the production key, not the test key.</p>
<input aria-describedby="api-help">Retest
- Focus the field and confirm the help text is available.
- Confirm the help does not require hover.
- Confirm any popup help can be dismissed and does not obscure content.
Report it
Example: The API key instruction is available only through a hover tooltip and is not associated with the input.
Standards and support
This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.
- WCAG 2.2: Understanding Content on Hover or Focus
- WCAG 2.2: Understanding Labels or Instructions
- WAI-ARIA: tooltip role
Editorially reviewed 20 July 2026.