How to meet accessible authentication (WCAG 2.2)

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.

teamwork-gcbd0b9fdd_1920
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

You can be the first one to leave a comment.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.