Formulaire de contact accessible

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact — La Librairie du Campus</title>
</head>
<body>
  <main>
    <h1>Nous écrire</h1>
    <p>Les champs marqués d’un astérisque (*) sont obligatoires.</p>
    <form action="/contact" method="post">
      <p>
        <label for="nom">Nom *</label>
        <input id="nom" name="nom" type="text" autocomplete="name" required>
      </p>
      <p>
        <label for="courriel">Adresse électronique *</label>
        <input id="courriel" name="courriel" type="email" autocomplete="email" required
               aria-describedby="aide-courriel">
        <span id="aide-courriel">Par exemple : nom@exemple.fr.</span>
      </p>
      <fieldset>
        <legend>Objet du message *</legend>
        <p>
          <input id="objet-commande" name="objet" type="radio" value="commande" required>
          <label for="objet-commande">Une commande</label>
        </p>
        <p>
          <input id="objet-livre" name="objet" type="radio" value="livre">
          <label for="objet-livre">Un livre introuvable</label>
        </p>
        <p>
          <input id="objet-autre" name="objet" type="radio" value="autre">
          <label for="objet-autre">Autre</label>
        </p>
      </fieldset>
      <p>
        <label for="message">Message *</label>
        <textarea id="message" name="message" rows="6" required></textarea>
      </p>
      <p><button type="submit">Envoyer le message</button></p>
    </form>
  </main>
</body>
</html>

Les trois boutons radio partagent le même name : un seul required suffit pour rendre la question obligatoire. La question est posée par la <legend>, et chaque réponse a son <label>. La page passe le validateur.