Ecran convivial pour étiqueter une case à cocher/bouton radio, qui utilise déjà une étiquette pour être cliquable

Question

Si je veux qu'une case à cocher/radio soit remplie lorsque l'utilisateur clique sur le texte associé, alors j'ai tendance à l'emballer dans une étiquette par exemple

HTML

<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

Alors ... Comment étiqueter maintenant la case à cocher/Radio set question dans un manoir conforme?

Est-ce un cas de "quoi" html + css? par exemple.

HTML

<p class="pretendLabel">Do you like compliant code?</p> 
<fieldset class="inline"> 
     <label for="radio-inline-1" class="block-label"> 
      <input type="radio" value="Yes" name="radio-inline-group" id="radio-inline-1"> 
      Yes 
    </label> 
    <label for="radio-inline-2" class="block-label selected"> 
      <input type="radio" value="No" name="radio-inline-group" id="radio-inline-2"> 
      No 
    </label> 
</fieldset> 

Ou dois-je utiliser une étiquette supplémentaire avec deux « pour » s, déballer les étiquettes ou autre chose? Mon souci est principalement autour des lecteurs d'écran n'associant pas correctement la question et les réponses potentielles sans un «pour» ou une autre association directe sur le label de prétention.

Answer 1

Utilisez un fieldset avec un élément de légende.

<fieldset class="inline"> 
    <legend>Do you like compliant code?</legend>