Decide whether the answer belongs in the page
Consider a booking form asking for a preferred service window. If the customer must know that “morning” means a range, that information affects the choice. Put the range next to the option or in a permanently visible sentence whenever space allows. Hiding necessary terms behind a small question mark makes the form harder to scan, especially on touch screens where hover does not exist. A popup is better suited to a short extra explanation that helps but is not the sole route to a material condition. The design decision is about where customers find the answer, not about whether an icon can be made attractive.
Write down each help sentence and ask what happens if it is never opened. If the user might choose the wrong price, date, document type or consent because the sentence was missed, move it into the normal page flow. If it only explains an unfamiliar label, keep the label itself clear and use the help as an optional detail. Long instructions, links, or actions need a persistent disclosure or another suitable interface, not a tiny tooltip. The W3C Authoring Practices tooltip pattern explicitly says that a tooltip does not receive focus; content with focusable elements is better treated as a different kind of popup, such as a non-modal dialog.
Make temporary content controllable
WCAG 2.2 criterion 1.4.13 addresses additional content that appears and disappears with hover or focus. For author-controlled content within its scope, it requires the content to be dismissible without moving the pointer or focus when it obscures other content, hoverable when pointer hover opens it, and persistent until the trigger is removed, the user dismisses it, or it becomes invalid. These are distinct tests. A tooltip that closes while the pointer crosses a small gap fails a practical hover test. A tooltip that covers the next field with no dismissal route makes the form difficult to complete. A tooltip that vanishes on a timer can disappear before a reader finishes.
Do not turn the exception for browser controlled title tooltips into a recommendation to rely on them. The W3C guidance on names and descriptions notes that the HTML title attribute may not be accessible to some users, especially sighted people without a mouse. A native browser tooltip may behave differently across devices and offer little control over wording or timing. For form instructions that matter, provide visible text or a deliberate help control. If you create custom hover or focus content, test all three WCAG conditions on the actual rendered page, including when browser zoom or a narrow viewport moves the popup.
Keep a label, a description and a popup distinct
A customer should hear the control’s purpose without first opening extra help. Give the input a visible label, such as “Preferred visit date”, and make the help a description rather than a replacement name. The W3C tooltip pattern describes a trigger that references the tooltip with aria-describedby; focus remains on the trigger and Escape dismisses the tooltip. That pattern is marked as work in progress and has not reached task force consensus, so treat it as implementation guidance to test, not as a certificate of compliance. Use semantic HTML first, attach the description when appropriate, and verify what the supported screen readers announce in context.
An information icon next to a field needs its own clear name if it is a button. “Help about preferred visit date” communicates more than “Question mark”. A control opened by a click or tap should reveal and hide its content predictably; a customer must be able to reach it without hover. Do not give a short description a second tab stop unless it really is an interactive control. Conversely, do not make a clickable icon from a decorative span and leave keyboard users without an action. Choose the behavior first, then choose the element and its keyboard handling. Preserve a visible focus indicator and avoid placing the popup so far from the field that users lose the relationship.
Walk through one bilingual booking form
Imagine a service company asking customers to choose between a normal appointment and an urgent visit. The urgent option may carry a different fee, while the popup explains how the company will contact the customer to confirm availability. The fee difference belongs beside the choice, not only in the popup. The short contact explanation may be optional help if the form also shows a clear confirmation step. In English, write a direct sentence about the callback. In Traditional Chinese, use the terms already used by the local service team rather than translating “callback” mechanically. Have staff check that both versions describe the same real process, with no invented guarantee of a time slot.
Test a mouse user moving from icon to popup, a keyboard user tabbing to the trigger and pressing Escape, and a touch user opening and closing the help. Repeat at increased zoom, with the keyboard focus close to the viewport edge, and with the popup overlapping other content. A person using magnification may move the pointer across the text slowly; the popup must remain open while they read it. If the user tabs away, do not leave an orphaned bubble masking the form. If the help is persistent click-to-open content rather than a hover tooltip, define how it closes and whether the button exposes expanded state. Document which interaction design you chose so the same component behaves consistently across forms.
Specify what passes before release
Ask the content owner to mark every help sentence as essential or supplementary. Move essential conditions into normal text. Ask design to provide a narrow-screen layout where the popup is readable and does not trap pointer movement. Ask development to show the actual keyboard sequence, Escape behavior, description relationship and touch behavior. Then test the exact English and Chinese strings with realistic long labels. The pass condition is not merely that an accessibility scanner finds an ARIA attribute; a customer must be able to discover, read, dismiss and act on the help without losing the form entry.
Finally, check the page without relying on the popup: can the customer still understand the material fee and eligibility rules? If the answer is no, the information architecture needs repair. Keep a small regression set covering hover travel, focus, Escape, touch, zoom and screen reader output. Recheck it whenever a shared form component changes. A good help popup reduces uncertainty at a particular point in the journey; it does not become a secret container for business terms or a way to compensate for unclear labels.
Keep help accurate as the service changes
A technically accessible popup can still mislead if its content is stale. Give each help sentence an owner and connect it to the rule it explains. If booking cutoffs, service areas or required documents change, update the visible field text and any supplementary popup together. Test the old and new states during a release; one reused component may appear in several forms with slightly different eligibility rules. A generic tooltip that says “More information” but describes the wrong product is worse than a missing tooltip, because it can create confidence in a false answer. Build a content inventory with the field, the real rule, the English wording, the Chinese wording, and the date the rule was checked. That is a practical editing aid, not a claim that any external authority approved the design.
If the help needs several paragraphs, compare two alternatives before building a complicated popup. A short inline explanation under the field may be easier to read and localize. A clearly labelled disclosure that remains open may suit longer optional guidance. The choice depends on whether the content must be visible before the answer, whether it contains actions, and whether it covers other controls at common zoom levels. Ask a tester to complete the form without being told where help is located. Watch whether they discover it, whether the information changes their answer, and whether they can return to the field. This observed journey is more informative than a visual review of an isolated popup component.
Before you proceed
- Important fees and conditions remain visible without opening help.
- Hover, keyboard focus, Escape and touch paths work in both languages.
- The popup remains readable at zoom and can be dismissed when needed.
