The following guidance is for content creators to ensure compliance accessibility compliance
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.
Information previously entered by or provided to the user that is required to be entered again in the same process is either:
Except when:
Further information on Redundant Entry from w3.org
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:
Another authentication method that does not rely on a cognitive function test.
A mechanism is available to assist the user in completing the cognitive function test.
The cognitive function test is to recognize objects.
The cognitive function test is to identify non-text content the user provided to the Web site.
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:
Another authentication method that does not rely on a cognitive function test.
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>"
}
}