A11y Pitfalls | Hands-on Web Dev Code Check

Identify the accessibility (a11y) issues with this sign-in form! If you want to tinker with the code, you can find it on CodeSandbox .

Note: the form has not been wired up for any functionality; all of the issues are with the presentation.

 index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <link 
      rel="stylesheet" 
      href="./styles.css">
    </link>
  </head>
  <body>
    <div class="container">
      <form class="signin-form">
        <h1>
          Sign in
        </h1>
        <span>
          username
        </span>
        <input 
          name="username" 
          type="text"
        >
        <span>
          password
        </span>
        <input 
          name="password"
          type="password"
        >
        <button
          type="submit"
          class="submit"
        >
          sign in
        </button>
      </form>
    </div>
  </body>
</html>

 styles.css 
html, body, .container {
  height: 100%;
  width: 100%;
  font-family: futura, sans-serif;
}
body {
  background-color: #192835;
}
h1 {
  color: #dd973b;
}
button {
  all: unset;
  width: 8ch;
  display: flex;
  justify-content: center;
  background-color: #c26b28;
}
button, input {
  padding: 0.25rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}
form {
  width: 20ch;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: white;
  background-color: #33699e;
  padding: 2rem;
  border-radius: 1rem;
}
.container {
  display: grid;
  place-content: center;
}
.submit {
  align-self: flex-end;
}

Here’s a rendered version of the sign-in form (alas, no sign-in will occur when you click the button):