Boutons radio simulés en CSS

Sommaire

Principe

Les boutons radio sont des éléments de formulaires qui permettent à l’utilisateur de sélectionner une option unique parmi un groupe d’options proposées.

Les boutons radio sont dits « simulés en CSS » lorsqu’ils sont construits sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="radio" />, mais que ces boutons radio standards sont masqués à l’écran puis simulés en CSS grâce à des images, des polices d’icônes ou des styles spécifiques.

De nombreuses approches sont envisageables. L’exemple ci-dessous expose comment simuler des boutons radio à l’aide de pseudo-éléments CSS et d’images d’arrière-plan, tout en conservant leur caractère accessible.

Socle HTML


<fieldset>
  <legend>Question</legend>
    <ul>
      <li>
        <input type="radio" id="reponse-1" name="question" value="reponse-1" />
        <label for="reponse-1">Réponse 1</label>
      </li>
      <li>
        <input type="radio" id="reponse-2" name="question" value="reponse-2" />
        <label for="reponse-2">Réponse 2</label>
      </li>
      [...]
    </ul>
  </legend>
</fieldset>

Socle CSS


input[type="radio"] {
  position: absolute;
  z-index: 100;
}

input[type="radio"]:focus + label {
  outline: 1px dotted;
}

input[type="radio"] + label::before {
  position: relative;
  z-index: 200;
  content: url('radio.png');
}

input[type="radio"]:checked + label::before {
  content: url('radio-checked.png');
}

Sur la base de ce socle CSS, les images d’arrière-plan sont ensuite à positionner correctement par-dessus les boutons radio. Par exemple à l’aide du code suivant :


input[type="radio"] + label::before {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
} 

Démonstration

La notice d’accessibilité pour les composants d’interface riche AcceDe Web est-elle votre livre de chevet ?

Composants

Les composants ci-après sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.

  1. Accessible Inline Radio Inputs.
  2. Des cases à cocher au design personnalisé et accessibles.
  3. Accessible custom checkboxes and radio buttons.
  4. WTF, forms?.
  5. A sweet toggle switch.

Commentaires

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page