Plutôt que d'une nouvelle technique, il s'agit d'une astuce qui part du constat suivant : souvent, la mention des champs obligatoires est effectuée au moyen d'une astérisque (*), qui est très souvent refoulée après le champ concerné, au lieu de se trouver à côté du libellé (ou étiquette) du champ.

Faut-il donc rapprocher systématiquement l'astérisque de l'intitulé ? Pas nécessairement. En effet, l'élément HTML label peut être parent de l'élément HTML employé pour le champ de formulaire (que ce soit input, select ou textarea) : c'est ce qu'on appelle l'association implicite du libellé du champ et du champ correspondant. Dans ce cas, on pourra toujours placer l'astérisque après le champ, mais à l'intérieur de l'élément label ; de plus, pour que l'association du libellé et de son champ soit bien repérée, on ajoutera l'attribut for à label, qui reprend la valeur de l'attribut id du champ en question. Ce qui donne le code suivant :

<form action="">
  <p>Les champs accompagnés d'une astérique (*) sont obligatoires.</p>
  <p>
    <label for="obligatoire">
      Libellé du champ
      <input id="obligatoire" name="obligatoire" type="text" />
      *
    </label>
  </p>
</form>

Les aides techniques, telles que les lecteurs d'écran, tiendront compte de l'astérisque comme partie intégrante du libellé du champ : Jaws, par exemple, lira bien les deux parties du contenu textuel de l'élément label.

Fabrice Bonny fournit un exemple de formulaire accessible selon cette méthode, dont le code source est enrichi par rapport au code ci-dessus : des éléments HTML sont ajoutés, comme span autour de la première partie de chaque libellé et strong autour de chaque astérique, de quoi permettre d'appliquer au formulaire un design élaboré.