WCAG 2.2 is up to now a working draft, but it will come in a few months. There is an AA criteria added, which is necessary to make logins accessible. In this case the requirement is for people with cognitive disabilities and therefore the goal is to make logins usable without successfully passing a cognitive test. The cognitive test is something like remembering user-data or solving mathematics.
Add Your Tooltip Text Here
Positive examples
- Username and Password can be saved bypassword managers
- It is possible topaste passwords and username
- Login with a third party oAuth Provider (like Google)
Example in HTML
In HTML you can define autocomplete values for managing the input fields. If you need an overview of all possibilities, you can have a look there: Documentation
<form>
<label for="username">Usernamer</label>
<input name="username" id="username" autocomplete="username">
<label for="password">Password</label>
<input name="password" id="password" autocomplete="current-password">
<button type="submit">Submit</button>
</form>
Example in Angular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Full Example provided on Stackblitz
<form [formGroup]="loginFOrm">
<label for="username">Username </label>
<input
id="username"
type="text"
formControlName="username"
autocomplete="username"
/>
<label for="password">password: </label>
<input
id="password"
type="password"
formControlName="password"
autocomplete="current-password"
/>
</form>
No Comments