Orvain UI

Hint

How the Hint works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue
AAWCAG 2.2 target
7/9contrast pairs passing
1keyboard interactions

The Hint is the line of text under a field. It is plain text, so all it needs is to be linked to its field and to say clearly what to do. An error hint is announced as soon as it appears.

Keyboard#

Tab

The hint is not focusable. It is read with its field when the field takes focus.

Semantics#

id + aria-describedby

The field points at the hint's id, so the hint is read after the field's name and role.

Always
role="alert"

The error is announced as soon as it is shown. Show errors on blur or submit, not on every keystroke, or it will interrupt constantly.

error
aria-invalid

Set on the field, not the hint, so the field itself is announced as invalid.

error
aria-hidden="true"

The info glyph is decorative; the text carries the meaning.

Icon

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

4.5:1

Hint text · Default, Success

12px text in #6d6d6d passes. Success text in #229a14 is 3.68:1 on white, and fails.

WCAG 1.4.3 Contrast (Minimum) ↗
4.5:1

Error text · Error

#ec0d33 on white is 4.49:1, a hair under 4.5:1 at 12px.

WCAG 1.4.3 Contrast (Minimum) ↗
Not colour alone

Error not by colour · Error

Red is backed by the words of the error and by aria-invalid on the field. Write the message so it makes sense without the colour.

WCAG 1.4.1 Use of Color ↗WCAG 3.3.1 Error Identification ↗
Not required

Icon · All

The glyph is decorative, so it has no minimum. Default #8f8f8f and error #f34261 are both over 3:1 regardless.

WCAG 1.4.11 Non-text Contrast ↗
Not required

Disabled · Disabled

Inactive controls are exempt. The disabled text and glyphs (#cbcbcb) are deliberately faint.

WCAG 1.4.3 Contrast (Minimum) ↗

Measured contrast#

The hint's text and glyph on a white page in each state, from the ds.css tokens; text is held to 4.5:1 and the icon, a graphic, to 3:1. 2 of 9 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.

Part · elementDefaultErrorSuccess
Hint · text5.17passes4.49below the minimum3.68below the minimum
Hint · info text5.17passes5.17passes5.17passes
Hint · icon3.23passes3.64passes3.68passes

Motion#

  • The hint does not animate.

Checklist#

Every hint has an id that its field lists in aria-describedby.

Write errors as a fix, not a verdict: Enter a date after today, not Invalid date.

Error red (#ec0d33, 4.49:1) and success green (#229a14, 3.68:1) are under 4.5:1 at 12px and need darker shades before the code library ships.

Keep the hint to one short sentence. Longer help belongs in the label's help line or beside the form.

Don't hide guidance in the placeholder. Placeholder text disappears as soon as someone types; the hint stays.