Chronologique Discussions  

< Chronologique >       < Discussions >

---

Salut Quentin,

> As-tu essayé si ça fonctionnait avec divers navigateurs et lecteurs d'écran
> ?

Uniquement avec NVDA et google chrome.

> Autre question, comment fait-on pour cocher/décocher les cases ?

Je ne pense pas qu'il y ait une autre solution que de passer par le
javascript.

Avec par exemple une fonction évènementielle à attacher telle que la suivante:

Début du code javascript

myCheckedListbox.addEventListener("keydown", function(e){

if(e.keyCode == 32){ // appuie sur la barre d'espace
if(e.shiftKey==false && e.ctrlKey==false && e.altKey==false){
e.stopPropagation();
e.preventDefault();

// normalement ici, il est préférables que les traitements qui suivent
se fassent dans une fonction externe.
// Cela dit, allons-y quand même.
// premièrement, on recueille la position et la valeur de la coche
var index = e.target.selectedIndex;
var v = e.target.getAttribute("aria-checked");
// selon cette valeur
if(v == "true"){
// on la bascule à false
e.target.options[index].setAttribute("aria-checked", "false");
// on modifie la couleur de fond pour les voyants
e.target.options[index].style.backgroundColor = "white";
} else { // c'est actuellement à false
// on la bascule à true
e.target.options[index].setAttribute("aria-checked", "true");
// on modifie la couleur de fond pour les voyants
e.target.options[index].style.backgroundColor = "blue";
} // end if coché ou pas coché
return false; // on annule le comportement par défaut de l'appuie sur
la barre d'espace
} // end if

} // end if touche espace

}); // fermeture du addEventListener

Fin du code javascript

A mon avis cela devrait fonctionner nickel.

Je crois que c''est Charles Rostan qui a dit: "Une vérité qui fait
plaisir doit être prouvée deux fois."

Yannick Daniel Youalé


Le 30/05/2023, QuentinC<progliste AT framalistes.org> a écrit :
> Salut,
>
> Intéressant !
>
> As-tu essayé si ça fonctionnait avec divers navigateurs et lecteurs
> d'écran ?
> Jaws + NVDA + Voice Over + Talkback
> Chrome + Firefox + Safari + Chrome pour android
>
> Autre question, comment fait-on pour cocher/décocher les cases ?
>
> Le 30.05.2023 19:56, Yannick Daniel Youalé a écrit :
>> Salut à tous,
>>
>> J'écris particulièrement pour faire part de ma trouvaille à mon
>> homonyme, qui avait une fois posé sur la liste la question de savoir
>> s'il était possible de faire une liste de cases à cocher valide en
>> utilisant l'élément html select.
>>
>> Hé bien, il se trouve qu'en employant l'attribut "aria-checked" pour
>> chaque élément d'option, c'est possible.
>>
>> Ensuite, pour que cela soit également perceptible pour les voyants, on
>> peut jouer avec un code couleur (comme le bleu par exemple en
>> arrière-plan) afin de leur signaler l'état actif ou pas de chaque
>> option.
>>
>> Voici un échantillon de code que vous pouvez rapidement copier et
>> coller dans un fichier html afin de le tester.
>>
>> <select size="10" aria-label="jours de la semaine">
>> <option value="1" aria-checked="true">
>> lundi
>> </option>
>> <option value="2" aria-checked="false">
>> mardi
>> </option>
>> <option value="3" aria-checked="false">
>> mercredi
>> </option>
>> <option value="4" aria-checked="true">
>> jeudi
>> </option>
>> </select>
>>
>> Pour information, je compte utiliser cette astuce dans le
>> WebAccessibilizer, sur la liste des paramétrages disponibles.
>>
>> Cordialement,
>>
>> Yannick Daniel Youalé
>>
>>
>>
>

---

• [progliste] Utiliser l'élément select pour simuler une liste de cases à cocher, Yannick Daniel Youalé, 30/05/2023
  • Re: [progliste] Utiliser l'élément select pour simuler une liste de cases à cocher, QuentinC, 30/05/2023
    • Re: [progliste] Utiliser l'élément select pour simuler une liste de cases à cocher, Yannick Daniel Youalé, 30/05/2023
      • Re: [progliste] Utiliser l'élément select pour simuler une liste de cases à cocher, Yannick Daniel Youalé, 30/05/2023

---

Archives gérées par MHonArc 2.6.19+.