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">Log in</h2>
<div class="uol-rich-text">
<div class="uol-form__additional-content uol-form__additional-content--before">
<p>Not signed up? <a href="/">Register</a></p>
<p>Forgot password? <a href="/">Reset password</a></p>
</div>
</div>
<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
">
<label class="uol-form__input-label" for="usernameID">
<span class="uol-form__input-label__text">Username or email (required)</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--text
" data-field-invalid=false>
<!-- -->
<input class="uol-form__input uol-form__input--text" type="text" id="usernameID" name="usernameName" value="" autocomplete="username" required>
<!-- -->
</div>
</div>
<div class="uol-form__input-container
">
<label class="uol-form__input-label" for="passwordID">
<span class="uol-form__input-label__text">Password (required)</span>
<span class="uol-form__input__requirements" aria-hidden="true">
<span>Must be at least 8 characters </span>
<span>Must contain at least 1 uppercase letter </span>
</span>
<span class="hide-accessible">
Must be at least 8 characters, Must contain at least 1 uppercase letter,
</span>
</label>
<div class="uol-form__input-wrapper
uol-form__input-wrapper--password
" data-field-invalid=false>
<!-- -->
<input class="uol-form__input uol-form__input--password" type="password" id="passwordID" name="passwordName" value="" autocomplete="current-password" required>
<button type="button" class="uol-form__input--password-toggle" aria-controls="passwordID" data-password-visible="false" hidden></button>
<!-- -->
</div>
</div>
</div>
<div class="uol-form__button-wrapper">
<button class="uol-button uol-button--primary
" type="submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
{
"form": {
"heading_level": "h2",
"form_centered": true,
"action": "/example-form-action",
"title": "Log in",
"lead": null,
"additional_info_before": "<p>Not signed up? <a href=\"/\">Register</a></p><p>Forgot password? <a href=\"/\">Reset password</a></p>",
"button": {
"style": "primary",
"type": "submit",
"content": "Log in"
},
"fields": [
{
"type": "text",
"label": "Username or email",
"autocomplete": "username",
"required": true,
"id": "usernameID",
"name": "usernameName"
},
{
"type": "password",
"label": "Password",
"requirements": [
{
"item": "Must be at least 8 characters"
},
{
"item": "Must contain at least 1 uppercase letter"
}
],
"autocomplete": "current-password",
"required": true,
"id": "passwordID",
"name": "passwordName"
}
]
}
}