-
Notifications
You must be signed in to change notification settings - Fork 257
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2920 from shawnthompson/issue1916-accessible-auth…
…entication add email and password technique for 3.3.7
- Loading branch information
Showing
2 changed files
with
74 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> | ||
|
|
||
| <head> | ||
| <title>Providing properly marked up email and password inputs</title> | ||
| <link rel="stylesheet" type="text/css" href="../../css/editors.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>Providing properly marked up email and password inputs</h1> | ||
| <section id="meta"> | ||
| <h2>Metadata</h2> | ||
| <p id="sc">3.3.7 Accessible Authentication</p> | ||
| <p id="type">Sufficient</p> | ||
| </section> | ||
| <section id="applicability"> | ||
| <h2>Applicability</h2> | ||
| <p class="instructions">Technologies that support authentication.</p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>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.</p> | ||
| <p>Browsers and password managers generally use the accessible name of the input to determine how to fill it in.</p> | ||
| </section> | ||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>properly marked up email and password inputs</h3> | ||
| <p>A secure website has an email and password based login form. </p> | ||
| <pre> | ||
| <code class="language-html"> | ||
| <form method="post" action="login"> | ||
| <div> | ||
| <label for="email">Email</label> | ||
| <input id="email" type="email" autocomplete="email" ... > | ||
| </div> | ||
| <div> | ||
| <label for="password">Password</label> | ||
| <input id="password" type="password" autocomplete="current-password" ... > | ||
| </div> | ||
| <input type="submit" value="Login" > | ||
| </div> | ||
| </form> | ||
| </code> | ||
| </pre> | ||
| </section> | ||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
| <section class="test-procedure"> | ||
| <h3>Procedure</h3> | ||
| <p>For websites which require users to login with an email and password only:</p> | ||
| <ol> | ||
| <li>Check that each input for authentication includes an appropriate accessible-name.</li> | ||
| <li>Check that each input for authentication allows pasting.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="test-results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>#1 and #2 are true.</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="resources"> | ||
| <h2>Resources</h2> | ||
| <ul> | ||
| <li><a href="https://www.boia.org/blog/is-your-sites-authentication-process-accessible">Bureau of Internet Accessibility: How To Make Your Website's Authentication Process Accessible</a></li> | ||
| </ul> | ||
| </section> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters