Help and information

Extra user guiding

When headings and 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 the help in a box with the message--info class and toggle its visibility. The button uses the btn-link and btn-link--help classes.

<form class="mb-form mb-form--spaced maxw24r">
  <label for="parcelweight">Parcel weight (kg)</label>
  <div class="flex align-ic">
    <input
      type="text"
      class="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="mrs" for="phone">Phone</label>
    <button
      type="button"
      class="dib btn-link btn-link--help"
      title="Toggle phone help"
      id="help-trigger"
      aria-controls="phonehelp"
      aria-expanded="false"
    >
      <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"
      id="phone"
      aria-describedby="phonehelp"
      required
    />
  </div>
</form>