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">
<h2 class="uol-form__title">Form element spacing check</h2>
<form class="uol-form" action="/example-form-action">
<div class="uol-form__input-group uol-form__input-group--block">
</div>
<div class="uol-form--button-block">
<div class="uol-form__inputs-wrapper">
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="layout-1">
<span class="uol-form__input-label__text">Title and valid input</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--tel
" data-field-invalid=false>
<!-- -->
<input class="uol-form__input uol-form__input--tel" type="tel" id="layout-1" name="layout-1" value="" autocomplete="off">
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="layout-2">
<span class="uol-form__input-label__text">Title, hint and valid input</span>
<span class="uol-form__input-label__hint">Hint text </span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--tel
" data-field-invalid=false>
<!-- -->
<input class="uol-form__input uol-form__input--tel" type="tel" id="layout-2" name="layout-2" value="" autocomplete="off">
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="layout-3">
<span class="uol-form__input-label__text">Title, error and invalid input</span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--tel
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--tel" type="tel" id="layout-3" name="layout-3" aria-invalid="true" value="" autocomplete="off">
<!-- -->
</div>
</div>
<div class="uol-form__input-container
uol-form__input-container--small">
<label class="uol-form__input-label" for="layout-4">
<span class="uol-form__input-label__text">Title, hint, error and invalid input</span>
<span class="uol-form__input-label__hint">Hint text </span>
<span class="uol-form__input__error"><span class="hide-accessible">Error: </span>Specific error message</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--tel
" data-field-invalid=true>
<!-- -->
<input class="uol-form__input uol-form__input--tel" type="tel" id="layout-4" name="layout-4" aria-invalid="true" value="" autocomplete="off">
<!-- -->
</div>
</div>
<div class="uol-form__input-container
">
<div role="group" aria-labelledby="cBoxes1 cBoxes1-hint cBoxes1-error" class="uol-form__custom-fieldset" data-checkboxes-required="2">
<span id="cBoxes1" class="uol-form__custom__legend">Checkboxes</span>
<span class="uol-form__input-label__hint" id="cBoxes1-hint">Select all that apply </span>
<span class="uol-form__input__error" id="cBoxes1-error"><span class="hide-accessible">Error: </span>Specific error message</span>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxOne" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxOne" id="cboxOne-label">Option 1</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxTwo" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxTwo" id="cboxTwo-label">Option 2</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxThree" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxThree" id="cboxThree-label">Option 3 displaying example with a really really really long title</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxFour" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxFour" id="cboxFour-label">Option 4</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxFive" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxFive" id="cboxFive-label">Option 5</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
<div class="uol-form__input--checkbox-wrapper">
<input class="uol-form__input--checkbox" type="checkbox" id="cboxSix" name="cboxName" value="">
<label class="uol-form__input--checkbox-label" for="cboxSix" id="cboxSix-label">Option 6</label>
<span class="uol-form__input--checkbox-custom">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="38" height="38" focusable="false" aria-hidden="true">
<path fill="#000" fill-rule="nonzero" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="uol-form__button-wrapper">
<button class="uol-button uol-button--primary
" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
{
"form": {
"heading_level": "h2",
"form_centered": true,
"action": "/example-form-action",
"title": "Form element spacing check",
"lead": null,
"additional_info_before": null,
"button": {
"style": "primary",
"type": "submit",
"content": "Submit"
},
"fields": [
{
"type": "tel",
"id": "layout-1",
"name": "layout-1",
"label": "Title and valid input",
"input_width": "small"
},
{
"type": "tel",
"id": "layout-2",
"name": "layout-2",
"label": "Title, hint and valid input",
"hint": "Hint text",
"input_width": "small"
},
{
"type": "tel",
"id": "layout-3",
"name": "layout-3",
"label": "Title, error and invalid input",
"error": "Specific error message",
"invalid": true,
"input_width": "small"
},
{
"type": "tel",
"id": "layout-4",
"name": "layout-4",
"label": "Title, hint, error and invalid input",
"hint": "Hint text",
"error": "Specific error message",
"invalid": true,
"input_width": "small"
},
{
"type": "checkbox",
"error": "Specific error message",
"invalid": true,
"heading_level": "h3",
"legend": "Checkboxes",
"num_required": 2,
"hint": "Select all that apply",
"group_label_id": "cBoxes1",
"options": [
{
"id": "cboxOne",
"name": "cboxName",
"value": "cboxVal1",
"label": "Option 1"
},
{
"id": "cboxTwo",
"name": "cboxName",
"value": "cboxVal2",
"label": "Option 2"
},
{
"id": "cboxThree",
"name": "cboxName",
"value": "cboxVal3",
"label": "Option 3 displaying example with a really really really long title"
},
{
"id": "cboxFour",
"name": "cboxName",
"value": "cboxVal4",
"label": "Option 4"
},
{
"id": "cboxFive",
"name": "cboxName",
"value": "cboxVal5",
"label": "Option 5"
},
{
"id": "cboxSix",
"name": "cboxName",
"value": "cboxVal6",
"label": "Option 6"
}
]
}
]
}
}