Como em todos os elementos de texto, você precisa garantir que os estilos aplicados ao text input sejam acessíveis. Isso significa que a fonte precisa ter um tamanho adequado e a cor precisa ter contraste suficiente com o fundo.

<link rel="stylesheet" href="styles.css">

<form class="accessible-form">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" placeholder="Enter your username">
  <button type="submit">Submit</button>
</form>

body {
  background-color: #f9fafb;
  color: #222;
  padding: 2rem;
}

.accessible-form {
  max-width: 320px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 2px solid #555;
  border-radius: 4px;
  background-color: #fff;
  color: #111;
}

input[type="text"]:focus {
  outline: 3px solid #1e90ff;
  border-color: #1e90ff;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #187bcd;
}

O placeholder, no entanto, é frequentemente esquecido. É importante lembrar que isso também é texto e você provavelmente precisará alterar o estilo para garantir que seja legível.

<link rel="stylesheet" href="styles.css">

<form class="accessible-form">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">
  <button type="submit">Submit</button>
</form>

body {
  background-color: #f9fafb;
  color: #222;
  padding: 2rem;
}

.accessible-form {
  max-width: 320px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 2px solid #555;
  border-radius: 4px;
  background-color: #fff;
  color: #111;
}

input[type="email"]::placeholder {
  color: #555; 
  opacity: 1; 
  font-style: italic;
}

input[type="email"]:focus {
  outline: 3px solid #1e90ff;
  border-color: #1e90ff;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #187bcd;
}

Outra coisa a ter em mente é que você deve permitir que o usuário modifique a entrada. Por exemplo, se for uma área de texto você não deve remover a capacidade de redimensioná-la. A entrada também deve escalar adequadamente quando o usuário der zoom na página.

<link rel="stylesheet" href="styles.css">

<form class="accessible-form">
  <label for="message">Your message</label>
  <textarea id="message" name="message" placeholder="Type your message here..."></textarea>
  <button type="submit">Send</button>
</form>

body {
  background-color: #f9fafb;
  color: #222;
  padding: 2rem;
  line-height: 1.5;
}

.accessible-form {
  max-width: 480px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.8rem;
  font-size: 1rem;
  border: 2px solid #555;
  border-radius: 4px;
  background-color: #fff;
  color: #111;
  resize: both; 
  box-sizing: border-box; 
}

textarea::placeholder {
  color: #555;
  opacity: 1;
}

textarea:focus {
  outline: 3px solid #1e90ff;
  border-color: #1e90ff;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #187bcd;
}

Elementos de entrada também podem receber foco. Ao editar seus estilos você deve garantir que preserve um indicador visível quando o elemento estiver com foco, como uma borda em negrito.

<link rel="stylesheet" href="styles.css">

<form class="accessible-form">
  <label for="name">Full name</label>
  <input type="text" id="name" name="name" placeholder="Enter your full name">

  <label for="email">Email address</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">

  <button type="submit">Submit</button>
</form>

body {
  background-color: #f9fafb;
  color: #222;
  padding: 2rem;
}

.accessible-form {
  max-width: 360px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 2px solid #666;
  border-radius: 4px;
  background-color: #fff;
  color: #111;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input::placeholder {
  color: #555;
  opacity: 1;
}

input:focus {
  border-color: #1e90ff;      
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.4); 
  outline: none;              
}

button {
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #187bcd;
}

Além disso, há o estado de erro a considerar. Quando o texto do usuário não passa na validação de entrada há um indicador visual que mostra que há algo errado. Para que a mensagem de erro seja atualizada dinamicamente, você precisaria usar JavaScript, que você aprenderá nas próximas aulas.

<link rel="stylesheet" href="styles.css">

<form class="accessible-form">
  <label for="email">Email address</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    placeholder="you@example.com" 
    aria-describedby="email-error"
  >
  <p id="email-error" class="error-message">
    Please enter a valid email address.
  </p>

  <button type="submit">Submit</button>
</form>

<script src="index.js"></script>

body {
  background-color: #f9fafb;
  color: #222;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}

.accessible-form {
  max-width: 360px;
  margin: 0 auto;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 2px solid #666;
  border-radius: 4px;
  background-color: #fff;
  color: #111;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input::placeholder {
  color: #555;
  opacity: 1;
}

input:focus {
  border-color: #1e90ff;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.4);
  outline: none;
}

input.error {
  border-color: #d93025;
  background-color: #fff5f5;
}

input.error:focus {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.4);
}

.error-message {
  color: #d93025;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}

button {
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:focus {
  background-color: #187bcd;
}

À medida que você dá ao seu elemento seu toque pessoal, você quer ter certeza de que o estado de erro ainda é perceptível e que ele não se parece com o indicador de foco. Com tudo isso em mente, agora você pode criar formulários de usuário cativantes.