1091 sujets

Accessibilité du Web

Bonjour,

Je souhaiterais personnaliser le design des checkboxes de mon site sans détériorer l'accessibilité de ces éléments (navigation au clavier, lecteur d'écran...).
Pour le design personnalisé en CSS, pas de soucis.
Cependant pour la partie accessibilité, malgré la lecture de différents articles et de la documentation WAI-ARIA, je ne suis pas du tout sûr de moi.

Voici mon code HTML et SCSS (simplifié) :

<label for="checkbox-id">
  Mon label
</label>
<span class="checkbox">
  <input id="checkbox-id" type="checkbox"/>
  <label for="checkbox-id" aria-hidden="true"></label>
</span>


.checkbox {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  
  input {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    opacity: 0;

    &:focus + label {
      // Styles personnalisés
    }

    &:checked + label {
      // Styles personnalisés
    }

    &:disabled + label {
      // Styles personnalisés
    }
  }

  label {
    // Styles personnalisés
  }
}


J'ai lu que les éléments avec display none étaient ignorés par les lecteurs d'écran, alors j'ai utilisé la propriété opacity pour cacher le vrai input tout en conservant son fonctionnement natif.
- Cet input sera-t-il toujours accessible ?
- En supposant que oui, est-il nécessaire de mettre un attribut role="checkbox" sur le span ?

Le 2e label (à l'intérieur du span) me sert uniquement à afficher la checkbox personnalisée tout en étant lié avec le vrai input. Du coup, pas besoin de JavaScript, ni d'attribut aria-checked.
- Cette solution avec 2 labels est-elle "propre" ?
- L'attribut aria-hidden a-t-il du sens ici ?

De manière générale, comment puis-je améliorer l'accessiblité de cet élément ? Smiley smile

Merci d'avance pour vos réponses !
Modifié par VictorCaza (09 Oct 2018 - 04:43)
Administrateur
Bonjour,

houla un label vide de contenu et masqué aux lecteurs d'écrans avec aria-hidden="true" alors qu'un autre est associé avec le même for, c'est soit une erreur soit un énorme risque d'erreur.

Notre méthode est d'imbriquer l'input dans le label, d'ajouter for/id parce que le RGAA 3 le demande (mais avec cette structure HTML-là ça fonctionne partout depuis un bail), éventuellement un span autour du texte du label (donc frère de l'input) parce qu'il y aura aussi un message d'erreur dans ce label.
Ensuite cacher l'input (le recouvrir avec une image de fond du label a ma préférence mais d'autres méthodes sont possibles).
Quand l'input est :checked, l'image de fond change.
Même principe avec les radios sauf que si on utilise pas des SVG, il vaut mieux utiliser box-shadow pour réaliser les disques (on peut faire des disques avec border et border-radius MAIS d'expérience c'est pas centré quand on zoome, zut).

Je t'invite à voir comment Raphaël a fait sur le styleguide de KNACSS v7 https://github.com/alsacreations/KNACSS/ (le lien est dans la page d'accueil du projet).
Sass dans https://github.com/alsacreations/KNACSS/blob/master/sass/components/_checkbox.scss (oublie .switch, il y a quelques règles communes puis surtout .checkbox et .checkbox:checked sans espace devant le ':'. Si les sélecteurs imbriqués de Sass te reviennent pas - compréhensible quand on débute -, voir cette partie de la CSS compilée)
Et https://formations.alsacreations.fr/formations-demander-renseignement.html qui est probablement plus ancien.

Pour ce qui est de role="checkbox", non il y a déjà un input[type="checkbox"] natif, pas besoin d'ARIA ici (si tu veux t'amuser à reproduire une checkbox en partant d'un span et recréant en JS tous les comportements clavier et restitution dans les API navigateurs alors oui mais c'est vraiment pas une bonne idée de tenter de faire en quasi tout le temps moins bien et à coup sûr bien plus compliqué ce que tout navigateur fait déjà ?)
Modifié par Felipe (09 Oct 2018 - 17:44)
Meilleure solution
Merci pour ta réponse Felipe !

Le 2e label vide ne me semblait pas être une bonne idée et ta réaction le confirme Smiley ravi

Merci aussi pour les liens, la méthode utilisée dans KNACSS me convient parfaitement.
La dernière fois que je l'ai utilisé c'était la version 3 et je crois qu'il n'y avait pas encore les composants (checkbox, radio...). Maitenant je réfléchis à l'inclure dans mon projet Smiley smile
Modifié par VictorCaza (11 Oct 2018 - 04:11)