University of Leeds Design System v1.0.14

Form: Radio buttons with search

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">

                            <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="Option 1">
                                    <label class="uol-form__input--radio__label" for="radio-1">Option 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="Option 2">
                                    <label class="uol-form__input--radio__label" for="radio-2">Option 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 class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-3" name="search-by" value="Option 3">
                                    <label class="uol-form__input--radio__label" for="radio-3">Option 3</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-4" name="search-by" value="Option 4">
                                    <label class="uol-form__input--radio__label" for="radio-4">Option 4</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-5" name="search-by" value="Option 5">
                                    <label class="uol-form__input--radio__label" for="radio-5">Option 5</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>

                <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,
        "options": [
          {
            "id": "radio-1",
            "name": "search-by",
            "value": "Option 1",
            "label": "Option 1"
          },
          {
            "id": "radio-2",
            "name": "search-by",
            "value": "Option 2",
            "label": "Option 2"
          },
          {
            "id": "radio-3",
            "name": "search-by",
            "value": "Option 3",
            "label": "Option 3"
          },
          {
            "id": "radio-4",
            "name": "search-by",
            "value": "Option 4",
            "label": "Option 4"
          },
          {
            "id": "radio-5",
            "name": "search-by",
            "value": "Option 5",
            "label": "Option 5"
          }
        ]
      },
      {
        "type": "search",
        "id": "standardSearchId1",
        "name": "searchCourses1",
        "label": "Search by subject, course title or keyword",
        "aria-invalid": "false",
        "autocomplete": "off",
        "has_icon": true,
        "swapInputs": true
      }
    ],
    "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>"
  }
}