Providing properly marked up email and password inputs

Metadata

3.3.8 Accessible Authentication (Minimum)

Sufficient

Applicability

Technologies that support authentication.

Description

The objective of this technique is to provide examples of properly marked up email and password inputs. This technique involves providing form mechanism where the user can enter their email address and password to log into the website.

Browsers and password managers generally use the accessible name of the input to determine how to fill it in. The user agent (including password managers) should not be blocked from populating the fields, and pasting by the user should also not be blocked.

Examples

properly marked up email and password inputs

A secure website has an email and password based login form.

<form method="post" action="login">
  <div>
    <label for="email">Email</label>
    <input autocomplete="email" id="email" type="email" ...>
  </div>
  <div>
    <label for="password">Password</label>
    <input autocomplete="current-password" id="password" type="password" ...>
  </div>
    <input type="submit" value="Login">
  </div>
</form>

Tests

Procedure

For websites which require users to login with an email and password only:

  1. Check that each input for authentication includes an appropriate accessible-name.
  2. Check that each input for authentication allows pasting.

Expected Results

Resources