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
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>