Discussion :

[CoderInTheDark]

Bonjour,

Je suis non-voyant j'utilise un lecteur d'écrans pour naviguer sur le site, je travail seulement au clavier.
Je rencontre des problèmes d'accessibilité sur le forum.

Premier problème pour poster un message.
Quand je suis dans l'éditeur je ne peux pas en sortir avec la touche tabulation pour atteindre le bouton "envoyer", il y a bien un raccourcis clavier alt + maj + s, mais il ne marche plus.
C'est une régression après un maj.

Je dois sortir de l'éditeur en utilisant la sourie à l'aveuglette ou une sourie virtuelle propre au lecteur d'écrans pas très utile.

Deuxième problème quand je suis sur la discussion je ne peux pas mettre de "plus" ou "moins", car je ne peux pas les activer au clavier. avec espace ou entré C'est du texte et pas un bouton ou un élément focussable, il ne doit pas y avoir d'attribut "tab index".

Cordialement

[Anomaly]

Bonjour CoderInTheDark,

Je tiens à te remercier pour ton rapport et aussi te dire à quel point je suis admiratif de voir que malgré ton handicap tu utilises l'outil informatique.

J'ai bien noté pour les boutons de votes + et -, je suppose qu'en effet cela n'a jamais été pris en compte et j'ai bien l'intention d'y remédier.

Ce qui m'étonne par contre, c'est ta régression au niveau de l'éditeur. Qui dit régression, dit que cela fonctionnait auparavant. Or, nous n'avons pas touché à cette partie du forum depuis longtemps ; peux-tu nous dire depuis quand à peu près tu as ce nouveau problème ?

[CoderInTheDark]

Bonjour CoderInTheDark,

Je tiens à te remercier pour ton rapport et aussi te dire à quel point je suis admiratif de voir que malgré ton handicap tu utilises l'outil informatique.

Pas de quoi, c'est à moi que je rends service. et j'espère aussi à ma communauté

Par contre avec une licence pro de concepteur dévelopeur informatique, un titre de développeur d'application et un bts d'informatique de gestion ça serait malheureux de ne pas pouvoir se servir d'un ordinateur.
Faut juste un peu de travail d'adaptation

Même si mon parcours en comptabilité et les cours de secrétariat et les cours d'apprentis clavier me serve beaucoup.

J'ai bien noté pour les boutons de votes + et -, je suppose qu'en effet cela n'a jamais été pris en compte et j'ai bien l'intention d'y remédier.

Je crois qu'il y a longtemps cétait de vrais boutons.
Il n'y a pas longtemps j'ai mis un plus un, je ne sais pas comment en appuyant sur espace ou entré, je n'ai pas pu reproduire.
Et surtout je ne sait pas où était mon curseur, sur le graphique ou le texte à côté.

Si l'élément est focussable en ajoutant un attribut "tabIndex" et un attribut "role='button'", ça devrait le faire, en le mettant dans une span éventuellement.

Ce qui m'étonne par contre, c'est ta régression au niveau de l'éditeur. Qui dit régression, dit que cela fonctionnait auparavant. Or, nous n'avons pas touché à cette partie du forum depuis longtemps ; peux-tu nous dire depuis quand à peu près tu as ce nouveau problème ?

C'est vrai qu'avec le bon terme "régression" on se comprend mieu

Je n'ai pas rencontré ce problème sur ma précédente discussion sur le forum Spring "problème de lancement" début juillet.

Le problème est sur l'éditeur de texte "enrichi", habituellement j'utilise le raccourçis cclavier "alt maj +s" pour le quiter et accéder au bouton "envoyer le message".
Et le plus étrange est que ça marche pour créer une discussion, et pas pour répondre à la discussion.

Je n'ai pas ce problème avec les éléments de formulaire simples car je peux les quitter avec la touche tabulation.

Si ce n'est pas chez vous, c'est peut être le composant, ou le navigateur.

Je vais tester avec Google chrome et edge, mais je me refuse à utiliser ce dernier j'ai ma dignité ;D

[CoderInTheDark]

Ca marche sous chrome

[CoderInTheDark]

Ca marche sous Edge

[CoderInTheDark]

J'utilise FireFox et ça marche maintenant.
Je vais aller me flagéler
Désolé pour le dérangement

Mais l'autre problème demeure

J'ai mis à jour mon lecteur d'écran ça a peut être corriger un conflit de raccourcis clavier
Ca peut venir aussi d'une mise à jour du plugin du lecteur d'écrans pour direfox
On m'a fait remarquer qu'il y avait aussi des pub intempestives sur mon firefox, ça peut gêner le lecteur d'écrans

[CoderInTheDark]

Concernant les boutons j'avais écrit ça.
CA peut s'appliquer aux plus ou moins 1.

********

Il est de plus en plus courant de substituer les boutons HTML par des SPAN ou d'utiliser des images pour simuler des boutons ou des éléments cliquables. Dans la mesure du possible les bouton HTML devraient être préférés.
Néanmoins si vous souhaité utiliser un bouton personnalisé, pour le rendre accessible vous devez l’adapter Selon une des solution suivantes.

Les boutons html hors formulaire
Les « <input type= »bouton » … » utilisé en dehors d’un formulaire et associés à un code HTML sont accessibles, et sont actionnable avec la touche « entré et « espace ».
Ils ne demandent pas d’adaptation, c’est pourquoi ils devraient être préférés.

<input type="button" value="bouton standard" onClick="alert('clicked')" />
Les boutons sur des liens
On peut ajouter la propriété « role= ‘button’ » sur un lien, mais il ne faut pas oublier qu’un lien est activé seulement pour la touche entré et pas par la barre espace, il faut donc ajouter un gestionnaire de clavier.

Les boutons <span> et <div>
•
Il faut leur attribuer une propriété « rôle » « . avec la valeur « button ».
•
les rendre foccusable, si il ne le sont pas.
leur attribuer un nom accessible à l’aide des attributs aria-label ou aria-labelledby, si il n’y a pas de texte à l’intérieur de la balise.
•
Ajouter un gestionnaire de clavier JavaScript , car l'évènement onClick concerne seulement la sourie, il faut gérer la touche espace et entré.

<input type="button" value="bouton standard" onClick="alert('clicked')" />
Valider
</span>

Les boutons interrupteur à deux ou trois état.
Il faut utiliser les propriétés ARIA
•
« role= »button » » .
•
Utiliser un gestionnaire de clavier.

La propriété « aria-pressed » permet de fixer l’état :
• « false », le bouton n’est pas activé.
•
« True », le bouton est activé.
« mixed », le bouton est dans un état indéterminé (bouton de Schrödinger ).

Il faut gérer l’état avec le JavaScript, et changer le rendu visuel en conséquence.


<span role="button" tabIndex="0" aria-pressed="true" onClick="switchButton(this)" onKeyUp="if(isValidated(event)) {switchButton(this)}">
Interrupteur
</span>


Les boutons images
Il faut s’assurer qu’ils ont une alternative textuelle, surtout quand ils n’ont pas de texte comme pour un bouton qui simulera une icône. Il faut utiliser la propriété ARIA « label » ou « labelledby » pour fournir un texte descriptif .
Globalement ils se gèrent comme un bouton à deux états, il faut juste changer les images et le texte associé à l’image.