Project 27: To-Do List UI

HTML Masterclass

Builds on these lessons

A11y Accessible Forms A11y Accessible Images A11y Accessible Tables A11y Color Contrast

Step 1 of 4

Project

An Accessible New-Task Form

Add a form with a properly labeled text input for the new task and a submit button. Add a small helper <p id="task-hint">Press Enter to add</p> and link it to the input with aria-describedby="task-hint" — screen readers announce that hint right after the field's label whenever it's focused.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
</head>
<body>
  <h1>My Tasks</h1>
  <form action="/tasks" method="POST">
    <label for="new-task">New task</label>
    <input type="text" id="new-task" name="task" aria-describedby="task-hint">
    <p id="task-hint">Press Enter to add</p>
    <button type="submit">Add</button>
  </form>
</body>
</html>

← Previous Next →