Project

General

Profile

Development #40886

Development #36305: Améliorer l'accessibilité (RGAA) des thèmes

[RGAA] accessibilité des listes "étoiles" > boutons radio

Added by Marie Kuntz (absente) almost 3 years ago. Updated about 2 years ago.

Status:
Fermé
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

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/


Files

Associated revisions

Revision 4f5606ea (diff)
Added by Frédéric Péters about 2 years ago

a11y: add "evaluation stars" rendering using radio buttons (#40886)

History

#2

Updated by Frédéric Péters over 2 years ago

Version du gabarit pour permettre la configuration du champ en mode bouton radio, et devenir ainsi accessible clavier/etc.

#3

Updated by Frédéric Péters over 2 years ago

  • Status changed from Nouveau to Solution proposée
#4

Updated by Thomas Jund about 2 years ago

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.

#5

Updated by Frédéric Péters about 2 years ago

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.

#6

Updated by Thomas Jund about 2 years ago

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é.

#8

Updated by Thomas Jund about 2 years ago

  • Status changed from Solution proposée to Solution validée
#9

Updated by Frédéric Péters about 2 years ago

  • Status changed from Solution validée to 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)
#10

Updated by Frédéric Péters about 2 years ago

  • Status changed from Résolu (à déployer) to Solution déployée

Also available in: Atom PDF