Hint text

Do

  • Expose basic hint text wherever possible.
  • Hint text should sit above a form field.
  • Ensure hint text can be read correctly by screen readers by using the aria-describedby attribute. Screen readers will announce both the label and help text when the form field has focus.
  • For complex hints which state validation requirements up front see passwords.
  • Complex hint text should sit in an alert box above a form field.

Don't

  • Don't hide hint text behind a tooltip.

Example

8 or more characters

Show password

Code

<div class="form-group lcc-form-group"> <label class="form-label" for="password"> Password </label> <span id="password-hint" class="lcc-hint">8 or more characters</div> <input class="form-control lcc-input" id="password" name="password" type="password" aria-describedby="validate-hint" data-validate-uppercase="[A-Z]" data-validate-numerical="\d" data-validation-length="min8" data-validation-element="#validate-hint"> <p class="lcc-form-note"> <a title="show password" href="javascript:void(0);" class="lcc-show_password" aria-controls="password">Show password</a></p></div>