Chronologique Discussions  

< Chronologique >       < Discussions >

---

Resalut,

Juste pour corriger une petite erreur.

La ligne suivante:

var v = e.target.getAttribute("aria-checked");

doit être changée par:

var v = e.target.options[index].getAttribute("aria-checked");

Amicalement,

Yannick Daniel Youalé


Le 30/05/2023, Yannick Daniel Youalé<mailtoloco2011 AT gmail.com> a écrit :
> 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+.