A11y Pitfalls
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):