Disclosure and dialogs
Accessible tooltips and help text: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
A tooltip supplies a brief description for a focused or hovered control. Make the information available on keyboard focus and satisfy applicable hover/focus persistence and dismissal requirements; use a different pattern for interactive content.
A practical example
A compact help icon describes what an audit template means. The explanation stays open while the user moves onto it and can be dismissed without forcing focus away from the trigger.
How to check it
- Reveal the description through both pointer and keyboard interaction.
- Test Escape or the intended dismissal method, pointer movement into the tooltip and persistence while reading.
- Check its association with the trigger and ensure it contains no controls requiring a separate focus model.
What can be missed
Essential instructions are often clearer as visible text. A tooltip containing links or buttons needs a different interaction design, such as a disclosure or nonmodal dialog.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<button type="button" aria-describedby="template-help">What is a template?</button>
<div role="tooltip" id="template-help">A reusable page layout shared by several URLs.</div>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.