Form pattern guidance

The following guidance is for content creators to ensure compliance accessibility compliance

Redundant Entry

If a user enters any form data in to a form, this data must not be asked for again within the same session. Previously entered data must be either auto-populated or available for the user to select.

  • Goal - Make it easier for users to complete multi-step processes.
  • What to do - Don’t ask for the same information twice in the same session.
  • Why it’s important - Some people with cognitive disabilities have difficulty remembering what they entered before.

Success criteria

Information previously entered by or provided to the user that is required to be entered again in the same process is either:

  • auto-populated, or
  • available for the user to select.

Except when:

  • re-entering the information is essential,
  • the information is required to ensure the security of the content, or
  • previously entered information is no longer valid.

Further information on Redundant Entry from w3.org

Accessible Authentication (Minimum)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative

Another authentication method that does not rely on a cognitive function test.

Mechanism

A mechanism is available to assist the user in completing the cognitive function test.

Object Recognition

The cognitive function test is to recognize objects.

Personal Content

The cognitive function test is to identify non-text content the user provided to the Web site.

Accessible Authentication (Enhanced)

Understanding Accessible Authentication (Enhanced)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative

Another authentication method that does not rely on a cognitive function test.

Mechanism

A mechanism is available to assist the user in completing the cognitive function test.

Further information on Accessible Authentication from w3.org

{% extends '@uol-form' %}
<div class="uol-form__container uol-form-container--centered  ">

    <div class="uol-form__inner-wrapper">

        <form class="uol-form" action="/" role=search>

            <div class="uol-form__input-group  uol-form__input-group--block">

            </div>

            <div class="uol-form--button-inline">

                <div class="uol-form__inputs-wrapper">

                    <div class="uol-form__input-container 
">

                        <div role="radiogroup" aria-labelledby="randomId10" class="uol-form__custom-fieldset" changeInputType>

                            <span id="randomId10" class="uol-form__custom__legend">Label</span>

                            <div class="uol-form__inputs-wrapper uol-form__inputs-wrapper--inline">

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-1" name="search-by" value="Standard search 1" changeInputTo="standard" showSearchId="standardSearchId1" hideSearchId="typeaheadSearchId1" searchLabel="Standard search 1 label">
                                    <label class="uol-form__input--radio__label" for="radio-1">Standard search 1</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-2" name="search-by" value="Typeahead search" changeInputTo="singleTypeahead" showSearchId="typeaheadSearchId1" hideSearchId="standardSearchId1" searchLabel="Typeahead search label">
                                    <label class="uol-form__input--radio__label" for="radio-2">Typeahead search</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-3" name="search-by" value="Standard search 2" changeInputTo="standard" showSearchId="standardSearchId1" hideSearchId="typeaheadSearchId1" searchLabel="Standard search 2 label">
                                    <label class="uol-form__input--radio__label" for="radio-3">Standard search 2</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="uol-form__input-container 
 uol-form__input-container--search">

                        <label class="uol-form__input-label" for="standardSearchId1">
                            <span class="uol-form__input-label__text">Search by subject, course title or keyword</span>

                        </label>

                        <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                            <!--  -->

                            <input class="uol-form__input  uol-form__input--search" type="search" id="standardSearchId1" name="searchCourses1" value="" autocomplete="off">

                            <!--  -->
                        </div>

                    </div>

                    <div class="uol-form__input-container 
 uol-form__input-container--search">

                        <label class="uol-form__input-label" for="typeaheadSearchId1" id="typeaheadSearchId1-label">
                            <span class="uol-form__input-label__text">Cheese list</span>

                        </label>

                        <div class="uol-form__input-wrapper uol-form__input-wrapper--search uol-form__input-wrapper--with-icon uol-form__input-wrapper--search-typeahead" data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName1" id="typeaheadSearchId1" aria-label="Select Cheese list">

                                <option value="">Select an option</option>

                                <option value="BRI">Brie</option>

                                <option value="CBL">Cashel Blue</option>

                                <option value="CHE">Cheddar</option>

                                <option value="CYA">Cornish Yarg</option>

                                <option value="EDA">Edam</option>

                                <option value="MAN">Manchego</option>

                                <option value="PRE">Parmigiano-Reggiano</option>

                                <option value="SBL">Shropshire Blue</option>

                                <option value="STI">Stilton</option>

                                <option value="SBI">Stinking Bishop</option>

                                <option value="WEN">Wensleydale</option>

                            </select>
                            <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                                <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                            </svg>
                        </div>

                    </div>

                </div>

                <div class="uol-form__button-wrapper">
                    <button class="uol-button uol-button--primary
    " type="submit">Search</button>

                </div>

            </div>

        </form>

        <div class="uol-rich-text">
            <div class="uol-form__additional-content uol-form__additional-content--after">
                <p>Or <a href="https://www.leeds.ac.uk/forstaff/homepage/375/services">link to other site</a>.</p>
            </div>
        </div>

    </div>

</div>
{
  "form": {
    "heading_level": "h1",
    "form_centered": true,
    "action": "/",
    "title": null,
    "lead": null,
    "additional_info_before": null,
    "button": {
      "style": "primary",
      "type": "submit",
      "content": "Search"
    },
    "fields": [
      {
        "type": "radio",
        "heading_level": "h2",
        "legend": "Label",
        "group_label_id": "randomId10",
        "group_inline": true,
        "changeInputType": true,
        "changeInputTarget": "inputId2",
        "options": [
          {
            "id": "radio-1",
            "name": "search-by",
            "value": "Standard search 1",
            "label": "Standard search 1",
            "searchLabel": "Standard search 1 label",
            "changeInputTo": "standard",
            "showSearchId": "standardSearchId1",
            "hideSearchId": "typeaheadSearchId1"
          },
          {
            "id": "radio-2",
            "name": "search-by",
            "value": "Typeahead search",
            "label": "Typeahead search",
            "searchLabel": "Typeahead search label",
            "changeInputTo": "singleTypeahead",
            "showSearchId": "typeaheadSearchId1",
            "hideSearchId": "standardSearchId1"
          },
          {
            "id": "radio-3",
            "name": "search-by",
            "value": "Standard search 2",
            "label": "Standard search 2",
            "searchLabel": "Standard search 2 label",
            "changeInputTo": "standard",
            "showSearchId": "standardSearchId1",
            "hideSearchId": "typeaheadSearchId1"
          }
        ]
      },
      {
        "type": "search",
        "id": "standardSearchId1",
        "name": "searchCourses1",
        "label": "Search by subject, course title or keyword",
        "aria-invalid": "false",
        "autocomplete": "off",
        "has_icon": true,
        "swapInputs": true
      },
      {
        "id": "typeaheadSearchId1",
        "name": "selectName1",
        "label": "Cheese list",
        "type": "select",
        "search_icon": true,
        "has_icon": true,
        "swapInputs": true,
        "options": [
          {
            "label": "Brie",
            "value": "BRI"
          },
          {
            "label": "Cashel Blue",
            "value": "CBL"
          },
          {
            "label": "Cheddar",
            "value": "CHE"
          },
          {
            "label": "Cornish Yarg",
            "value": "CYA"
          },
          {
            "label": "Edam",
            "value": "EDA"
          },
          {
            "label": "Manchego",
            "value": "MAN"
          },
          {
            "label": "Parmigiano-Reggiano",
            "value": "PRE"
          },
          {
            "label": "Shropshire Blue",
            "value": "SBL"
          },
          {
            "label": "Stilton",
            "value": "STI"
          },
          {
            "label": "Stinking Bishop",
            "value": "SBI"
          },
          {
            "label": "Wensleydale",
            "value": "WEN"
          }
        ]
      }
    ],
    "button_inline": true,
    "additional_info_after": "<p>Or <a href=\"https://www.leeds.ac.uk/forstaff/homepage/375/services\">link to other site</a>.</p>"
  }
}