Development #40886
Development #36305: Améliorer l'accessibilité (RGAA) des thèmes
[RGAA] accessibilité des listes "étoiles" > boutons radio
0%
Description
Les systèmes de notation utilisant des systèmes d'étoile utilisent un système de champ de sélection masqué et remplacé par des images d'étoiles. Malheureusement, ce système ne peut pas être utilisé au clavier et il est mal restitué par les lecteurs d'écrans.
Pour rendre ces systèmes plus accessibles, il serait préférable d'implémenter un système de boutons radio avec leurs labels (une étoile, deux étoiles…) masqués et le rendu des étoiles serait géré par l'utilisation de CSS.
Ressource : https://www.w3.org/WAI/tutorials/forms/custom-controls/
Fichiers
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Fichier 0001-a11y-add-evaluation-stars-rendering-using-radio-butt.patch 0001-a11y-add-evaluation-stars-rendering-using-radio-butt.patch ajouté
- Patch proposed changé de Non à Oui
Version du gabarit pour permettre la configuration du champ en mode bouton radio, et devenir ainsi accessible clavier/etc.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 3 ans
Mon retour:
- Je mettrais un `aria-hidden="true"' sur span.star pour éviter un rendu par les tech d'assistance de l'icon.
- css sur l'input (l. 754): pourquoi ne pas utiliser aussi @inlclude sr-only() à la place d'un positionnement absolute pour le masquer ?
Sinon très bien.
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Fichier 0001-a11y-add-evaluation-stars-rendering-using-radio-butt.patch 0001-a11y-add-evaluation-stars-rendering-using-radio-butt.patch ajouté
Je mettrais un `aria-hidden="true"' sur span.star pour éviter un rendu par les tech d'assistance de l'icon.
Ok. (sur un élément vide je n'imaginais pas ça pertinent).
css sur l'input (l. 754): pourquoi ne pas utiliser aussi @inlclude sr-only() à la place d'un positionnement absolute pour le masquer ?
Parce qu'il fournit la navigation au clavier.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 3 ans
Sur un élément vide je n'imaginais pas ça pertinent).
Les pseudo-elements CSS sont restitués, c'est une des critiques faites aux fonts icons.
css sur l'input (l. 754): pourquoi ne pas utiliser aussi @inlclude sr-only() à la place d'un positionnement absolute pour le masquer ?
Parce qu'il fournit la navigation au clavier.
J'ai testé et ça marche très bien avec un .sr-only.
Aussi, je préfère `@extend .sr-only;` quand c'est possible, ça évite la redondance de code dans le fichier compilé.
Mis à jour par Frédéric Péters il y a plus de 3 ans
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 3 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Solution validée à Résolu (à déployer)
commit 4f5606ea3a1a9acac78dcb0c57d3202272456917
Author: Frédéric Péters <fpeters@entrouvert.com>
Date: Sun Aug 2 22:18:02 2020 +0200
a11y: add "evaluation stars" rendering using radio buttons (#40886)
Mis à jour par Frédéric Péters il y a plus de 3 ans
- Statut changé de Résolu (à déployer) à Solution déployée
a11y: add "evaluation stars" rendering using radio buttons (#40886)