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é) :
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 ?
Merci d'avance pour vos réponses !
Modifié par VictorCaza (09 Oct 2018 - 04:43)
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 ?
Merci d'avance pour vos réponses !
Modifié par VictorCaza (09 Oct 2018 - 04:43)
