Help and information

Extra user guiding

When headings or labels don’t provide sufficient information, we need to provide some additional help and guidance. If the help points to one particular element, that element should have an aria-describedby attribute with the help text’s id as value.

If the interface is element heavy, if there are many help texts or the texts take up a lot of space, it can be an idea to place them in a disclosure. The button uses the btn-link and btn-link--help classes.

<label class="form__label" for="parcelweight">Parcel weight (kg)</label>
<div class="flex align-ic">
<input
  type="text"
  class="form__control maxw8r mrs"
  id="parcelweight"
  aria-describedby="maxweight"
/>
<p id="maxweight" class="gray">Maximum parcel weight is 35 kg</p>
</div>

<!-- Help messages can also be toggled using JS -->
<div class="maxw16r">
<label class="form__label mrs" for="phone">Phone</label>
<button
  type="button"
  class="dib btn-link btn-link--help"
  title="Description"
  id="help-trigger"
>
  <span data-mybicon="mybicon-help" data-mybicon-class="icon-ui"></span>
</button>
<div id="phonehelp" class="message--info maxw48r mtxs mbs pam lh-tight" hidden>
  In case the driver needs contact with the person who will hand over the
  shipments.
</div>
<input
  type="tel"
  class="form__control"
  id="phone"
  aria-describedby="phonehelp"
  required
/>
</div>