WCAG Accessibility - require at least one entry from a fieldset

Question

I have a group of fields and require that at least one from the group must be filled out. An example would be a home, work and mobile phone number. Whilst applying for my service, the customer must fill in at least one contact method.

How should that be done in compliance with the latest WCAG 2.2 standards?

  <!-- Other fields above and below -->
  <fieldset>
    <div class="control-group" id="field-18">
      <label class="control-label" for="18">Home</label>
      <div class="controls">
        <input type="text" id="18" name="18" value="" maxlength="16" autocomplete="off" data-validation-type="text" class="">
      </div>
    </div>
    <div class="control-group" id="field-19">
      <label class="control-label" for="19">Work</label>
      <div class="controls">
        <input type="text" id="19" name="19" value="" maxlength="16" autocomplete="off" data-validation-type="text" class="">
      </div>
    </div>
    <div class="control-group" id="field-20">
      <label class="control-label" for="20">Mobile</label>
      <div class="controls">
        <input type="text" id="20" name="20" value="" maxlength="16" autocomplete="off" data-validation-type="text" class="">
      </div>
    </div>
  </fieldset>
</form>

Thanks Simon

Answer 1

fieldset {
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 2fr;
  row-gap: 1em;
}

<form>
  <fieldset>
    <legend>Phone numbers (at least one is required)</legend>
      <label for="field-18">Home</label>
      <input type="tel" id="field-18" name="field-18" value="" data-validation-type="text" class="">
      <label for="field-19">Work</label>
      <input type="tel" id="field-19" name="19" value="" data-validation-type="text" class="">
        <label for="field-20">Mobile</label>
        <input type="tel" id="field-20" name="20" value="" autocomplete="off" data-validation-type="text" class="">
        <input type="submit">
  </fieldset>
</form>

Communicate the required state

ARIA does have the aria-required property, but as of version 1.2 it can only be used on form elements, group (the role of <fieldset>) is not one of them.

Any group like <fieldset> must have a name, so a <legend> needs to be added. Otherwise, no user could know that phone numbers are expected, “Home” could be an address as well.

This group name will be announced by screen readers when the user enters the group.

It should hence be used to specify that at least one phone number is required.

Unfortunately, also aria-invalid can no longer be used on groups, so there is no way to mark up the validation error.

It must be part of the legend as well, to be announced reliably.

Other corrections for accessibility

In general, you have great guidance on the GOV.UK.Design System Documentation on Text Inputs and on phone number inputs

type="tel"

It is important to mark up type="tel". On touch screens, it will provide an optimised keyboard to enter phone numbers, which largely improves usability and therefore accessibility.

It also allows assistive technology to programmatically determine the purpose of the field, which is required by WCAG Criterion 1.3.5: Identify Input Purpose.

Further, it allows the browser to suggest historic inputs to the user, which avoids typing errors.

autocomplete="tel"

Autocomplete is an assistive feature. It massively speeds up form completion for users, and avoids typing errors. If the form requires the user’s personal information, it must be allowed. It might be implied with type="tel" already, but to be sure you should be explicit about it.

autocomplete="tel".

Avoid maxlength

Users often copy and paste information to forms. The copied text might include spaces for a more readable grouping, which might result in the text being truncated—without any feedback to the user!

The same goes for simply typing in numbers that are too long.

For a maximum of accessibility, your form should accept phone numbers in any format.

Oh, and ID attributes should begin with a letter to avoid inadvertent errors.