Skip to main content

Forms

Label Elements​

Ensure that all form fields have a label assigned to them and that the input field IDs are always unique to stop any confusion for screen readers.

You can test for fields with missing/wrongly assigned labels using the AXE Chrome extension.

info

You can download AXE from the Chrome Webstore here

Fieldset and Legend​

Ensure we use the Fieldset and Legend elements on all forms to group the form fields together for screen readers.

When doing a simple form like a Contact form for example you would have a single fieldset with a legend wrapped around the whole thing so the user knows the context of the form.

{%- form 'contact', class: 'frm-Form' -%}
  <fieldset>
    <legend>{{ 'templates.contact.form.title' | t }}</legend>

    <div class="frm-Form_Field">
      <input
        type="text"
        name="contact[name]"
        id="ContactFormName"
        placeholder="{{ 'templates.contact.form.name' | t }}"
      >
      <label for="ContactFormName">
        {{ 'templates.contact.form.name' | t }}
      </label>
    </div>
  </fieldset>
{%- endform -%}

When doing filters however you can wrap each filter group in a fieldset and legend so that the screen reader user has the context of what the following fields relate to.

<fieldset>
  <legend>Colour</legend>
  
  <div>
    <label for="beige">
      Beige
      <span aria-label="43 products">43</span>
    </label>
    
    <input id="beige" name="beige" type="checkbox">
  </div>

  <div>
    <label for="blue">
      Blue
      <span aria-label="43 products">43</span>
    </label>
    
    <input id="blue" name="blue" type="checkbox">
  </div>
</fieldset>

It's important to note that the <legend> element must be the first child element of a <fieldset> and not be wrapped by another element such as a <div>.

Tab order/accessible​

Ensure you are able to tab through the form in a logical order as well as that each field is possible to populate solely using the keyboard.

For example Price sliders will need a way of being controlled through a keyboard, e.g. the Max/Min values being shown as an input field at each end so they can be populated there rather than solely relying on dragging the dot elements