Accessible Login Screen

accessible-login-screen.markdown

Accessible Login Screen

This is literally just an incredibly basic login form, designed to be WCAG 2.0 AA compliant.

A Pen by Greg on CodePen.

License.

index.html

<form id="login">
  <fieldset>
    <legend>Login</legend>
    <div class="error" id="errors" role="alert" aria-live="assertive" aria-atomic="true">
    </div>
    <label for="username" class="block">Username:
      <input type="text" name="username" id="username" aria-required="true">
    </label>
    <label for="password" class="block">Password:
      <input type="password" name="password" id="password" aria-required="true">
    </label>
    <button type="submit">Login</button>
  </fieldset>
</form>

script.js

$( document ).ready(function() {
  $('#login').on('submit',function() {
    if($('#username').val().length === 0) {
      $('#errors').append('<p>You must provide your username to login!</p>');
    }
    if($('#password').val().length === 0) {
      $('#errors').append('<p>You must provide your password to login!</p>');
    }
    return false;
  })
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.error {
  color: red;
  font-weight: bold;
}

.block {
  display: block;
  margin: 15px 10px;
}

legend {
  font-size: 1.2rem;
  font-weight: bold;
}