[Suggestion] Accessibilité et raccourcis clavier pour la navigation sur Zeste de Savoir

... pour une lecture plus tranquille !

a marqué ce sujet comme résolu.

Salut les agrumes ! :)

L’idée est de pouvoir se déplacer sur Zeste de Savoir quasiment (voir entièrement) sans souris, c’est-à-dire au clavier. On en a un peu discuter avec @A-312 sur Discord et on est arrivé à cette petite liste que je vous invite à compléter (et à critiquer ! :D ). Cette navigation pourrait augmenter l’accessibilité du site aux mals/non voyants qui arriveraient sur ZdS.

Quelques sources d’inspiration :


Idée finale (édité au fur et à mesure des retours)

Idée initiale (pour les logs)
  • Shift + Alt + 0 pour la page qui liste l’accessibilité (possiblement dans le même genre que "Rédiger sur ZdS")
  • Dans le forum (focus au prochaine .message-metadata pour le côté technique)

    • Page Down pour descendre d’une page
    • Page Up pour monter d’une page
    • Redirection vers la page suivante/précédente lors de l’arrivée en bas (+Page down) / haut (+Page up)
    • Lors de la redirection vers la page suivante, sauter le premier message qui est un rappel du dernier de la page précédente
  • Dans les contenus

    • Page Down/Up pour passer à la prochaine/précédente partie/chapitre/section
    • Bouton pour activer la lecture Zen ? (Ctrl + Alt + R comme le mode lecture dans Firefox ?)
  • Possiblement partout où il y a un moyen de valider ("Envoyer" sous la zone de rédaction de commentaire, "Valider" lors de la création d’un contenu, etc) que Ctrl + Entrée clique sur ce bouton
  • (déjà implémenté dans la plupart des navigateurs) Flèche Up et Down pour descendre dans la page
  • Alt + Shift +

    • 0 : Liste des raccourcis d’accessibilité (semble assez standard si on en croit les liens précédents)
    • 1 : bibliothèque
    • 2 : tribune
    • 3 : forum
    • 4 : recherche
    • 5 : profil
    • 6 : paramètres
    • 7 : mp
    • 8 : notifications
    • 9 : galerie
    • HOME : page d’accueil
  • Ctrl + Enter pour valider (envoyer un commentaire, etc)

Pfiouu… N’hésitez pas à proposer d’autres idées d’amélioration pour l’accessibilité et à donner votre avis (si, si, je te vois toi, au fond de la classe) ! ^^

+0 -3

Je moinsse, donc je justifie. Cela me semble une fausse bonne idée :

Ces touches ont parfois déjà un sens. Par exemple, page précédente et page suivante monte ou descend d’une page. Pas d’un message. Idem pour Origin ou Fin.

Si le navigateur défini déjà un sens à Ctrl-Alt-R, l’écraser me semble douteux.

Pour le Alt-Maj-Nombre, je suis super sceptique. On parle de rendre le site accessible à des gens ne pouvant pas se servir d’une souris en leur faisant appuyer en même temps sur 3 boutons.

Dans les logiciels que j’utilise, appuyer sur Alt souligne (trop discrètement) une lettre dans chacun des mots des menus, et appuyer sur cette lettre ouvre le menu. Une touche deux fois, c’est accessible. Pas trois touches en même temps.

Reste Ctrl-Entrée, qui ne me semble pas poser de problème.

+4 -0

Ces touches ont parfois déjà un sens. Par exemple, page précédente et page suivante monte ou descend d’une page. Pas d’un message. Idem pour Origin ou Fin.

Je voulais dire "page" et non pas message (je corrige).

Si le navigateur défini déjà un sens à Ctrl-Alt-R, l’écraser me semble douteux.

C’est exactement le même usage (mode lecture FF ou lecture zen) sauf que ça ne dépenderait pas du navigateur.

Pour le Alt-Maj-Nombre, je suis super sceptique. On parle de rendre le site accessible à des gens ne pouvant pas se servir d’une souris en leur faisant appuyer en même temps sur 3 boutons.

Ils ne peuvent pas se servir d’une souris parce qu’ils sont mals/non voyants donc il ne pourrait pas voir le pointeur ! Ca n’empêche pas de pouvoir taper au clavier (l’emplacement des touches est mémorisé avec la mémoire musculaire : la dactylographie).

Dans les logiciels que j’utilise, appuyer sur Alt souligne (trop discrètement) une lettre dans chacun des mots des menus, et appuyer sur cette lettre ouvre le menu. Une touche deux fois, c’est accessible. Pas trois touches en même temps.

On le fait bien très souvent. C’est tout de même ce qui est utilisé par des sites dédiés à l’accessibilité lié au handicap qui applique le WCAG-20 du W3C.

Ils ne peuvent pas se servir d’une souris parce qu’ils sont mals/non voyants donc il ne pourrait pas voir le pointeur ! Ca n’empêche pas de pouvoir taper au clavier (l’emplacement des touches est mémorisé avec la mémoire musculaire : la dactylographie).

J’avais en tête le cas des gens tétraplégiques (parce que je connais un tétraplégique, pas de mal voyant). Ça peut empêcher d’utiliser une souris ou plusieurs touches en même temps.

On le fait bien très souvent. C’est tout de même ce qui est utilisé par des sites dédiés à l’accessibilité lié au handicap qui applique le WCAG-20 du W3C.

J’ai regardé dans les sites sur lesquels je vais, et 0 applique cela. Est-ce que ce n’est pas restreint seulement aux sites sur l’accessibilité en pratique ?

Sinon, je constate que le touche Tab est peu utilisable : pour atteindre les notifications, il faut parcourir l’ensemble des sous menus forum, tribune et bibliothèque. Pour arriver à l’écriture d’un message, il faut passer par tous les liens (Non lu, citer signaler, +/-1) de tous les messages.

+0 -0

Ils ne peuvent pas se servir d’une souris parce qu’ils sont mals/non voyants donc il ne pourrait pas voir le pointeur ! Ca n’empêche pas de pouvoir taper au clavier (l’emplacement des touches est mémorisé avec la mémoire musculaire : la dactylographie).

J’avais en tête le cas des gens tétraplégiques (parce que je connais un tétraplégique, pas de mal voyant). Ça peut empêcher d’utiliser une souris ou plusieurs touches en même temps.

Effectivement dans ce cas là c’est compliqué… Mais pour les non-voyants, le clavier doit le faire je pense ;)

On le fait bien très souvent. C’est tout de même ce qui est utilisé par des sites dédiés à l’accessibilité lié au handicap qui applique le WCAG-20 du W3C.

J’ai regardé dans les sites sur lesquels je vais, et 0 applique cela. Est-ce que ce n’est pas restreint seulement aux sites sur l’accessibilité en pratique ?

C’est parce que très peu de sites sont accessibles aux mal-voyants je pense.

Sinon, je constate que le touche Tab est peu utilisable : pour atteindre les notifications, il faut parcourir l’ensemble des sous menus forum, tribune et bibliothèque. Pour arriver à l’écriture d’un message, il faut passer par tous les liens (Non lu, citer signaler, +/-1) de tous les messages.

Gabbro

Je me suis renseigné et il semblerait que l’attribut tabindex en HTML permette de choisir qu’est-ce qui doit être désigné lors d’un appui sur Tab.

Je suis d’accord sur le fait que l’accessibilité est a améliorée.
C’est vraiment un point ou ZdS a intérêt à être nickel. Je veux dire, le but du site, c’est d’être accessible à tous et il n’y a pas vraiment de structure sur internet adapté aux mal-voyants permettant d’apprendre en ligne. Y a un truc à faire quoi.

Bon par-contre, j’ai pas l’impression que ce qui est proposé va dans le bon sens.
Avez-vous déjà testé Orca par exemple ? Le site est accessible globalement, mais si je ferme les yeux franchement, c’est compliqué.

Ce qu’il y a à améliorer, c’est l’ordre d’énonciation des éléments, la réduction du nombre de chose à lire (c’est incroyable vraiment) et après ça la navigation.

J’ai du mal franchement à voir la nécessité d’un raccourcie pour la lecture zen… Déjà, ça n’agis que sur le visuel….

Apparemment, le logiciel le plus utilisé est NV Access sous Windows, et sous Linux, c’est Orca.

PS: Si vous souhaitez naviguez vous même sans souris sur ZdS. Je le fais tous les jours grâce à VimiumFF. Je n’ai d’ailleurs pas de souris du tout.

+1 -0

Bonjour,

Je suis non-voyant et utilisateur d’un lecteur d’écran. En l’occurence, j’utilise Jaws, un logiciel propriétaire (et assez cher).

Mais si vous voulez expérimenter, vous pouvez le faire gratuitement:

  • Sous Windows avec NVDA http://www.nvda-fr.org/ ou http://www.nvda-project.org/
  • Sous Mac et iOS avec VoiceOver. A savoir que VO est inclus dans le système, pour l’activer resp. Pomme+F5, triple clic sur le bouton home, ou Réglages>Général>Accessibilité>VoiceOver
  • Sous Linux il y a effectivement Orca, il imite NVDA et Jaws dans une certaine mesure; à savoir que les non-voyants sous linux sont particulièrement rares

Maintenant pour votre idée d’ajouter des raccourcis clavier, à part Ctrl+Enter pour envoyer, les autres sont une très mauvaise idée.

Les accesskeys à base de Alt+Lettre ou Alt+Shift+Lettre ne sont pas beaucoup utilisés ni conseillés car peu pratiques et pas universellement supportés de la même manière. ET même les autres, comme le Ctrl+Alt+R suggéré, ne sont pas mieux.

Le plus gros problème c’est que ces raccourcis peuvent potentiellement entrer en conflit avec:

  • Un raccourci existant sur le navigateur
  • Un raccourci au niveau du système
  • Un raccourci sur le logiciel d’aide technique

En cas de conflit, le comportement va être potentiellement aléatoire: quelle fonctionnalité va être déclenchée ? une ? laquelle ? ou les deux en même temps ? dans tous les cas c’est confusionnant, quand il ne se passe pas ce à quoi on s’attend. Les raccourcis à 3 ou 4 touches combinées sont courants avec les lecteurs d’écran, donc choisir un raccourci "compliqué" ne met nullement à l’abri d’un conflit.

Quant aux touches simples genre les flèches PageUp/Down, là non plus il ne faut pas les utiliser pour des fonctionnalités générales comme le scroll. On peut utiliser ces touches mais pour customizer un composant si le comportement standard n’est pas satisfaisant; mais certainement pas pour un truc générique

Je vous suggère de lire ces articles: https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html et https://www.alsacreations.com/article/lire/570-Histoire-de-tabindex.html et plus généralement les tutoriels accessibilité de chez AlsaCréations https://www.alsacreations.com/tuto/liste/3-Accessibilite

Les règles de base en accessibilité sont d’utiliser au maximum les composants standard; c’est eux qui ont les meilleures chances d’être les plus accessibles, si on part du principe que le système et le navigateur le sont; et en plus généralement vous n’avez rien à faire, c’est accessible out of the box. En fait la plupart des sites ne sont pas ou peu accessibles précisément parce qu’ils ont décidé de ne pas utiliser des composants standard; présumablement parce que c’est visuellement moche à leur goût, ou parce que ça n’est pas visuellement pareil sur toutes les plate-formes (la phobie du pixel près).

Si on ne peut pas utiliser de composants standards, utiliser ARIA et surcharger les comportements clavier/souris/etc. mais le moins possible et sur la zone la moins étendue possible.

Typiquement pour les raccourcis type flèches ou PageUP/Down, c’est acceptable de les utiliser sur un composant bien précis, et c’est même important de le faire pour garantir l’accessibilité au clavier; mais ça doit se limiter au composant où c’est utile, et certainement pas s’étendre à une fonctionnalité générale de la page comme le scroll.

Quant à tabindex… les seules valeurs que tabindex doit admettre sont -1 et 0. Toutes les autres sont à bannir. 0 permet de rendre focusable un élément qui ne l’est pas de base, p.ex. un <span>. -1 fait le contraire, l’élément peut uniquement prendre le focus si demandé explicitement par JavaScript.

Du coup sur votre belle liste, le seul que je conserverais, c’est Ctrl+Enter pour poster. Tous les autres sont au mieux inutiles, ou au pire vont entraver l’accessibilité.

Du point de vue général, d’après moi, ZDS fait figure de très bon élève en matière d’accessibilité aux lecteurs d’écran, par rapport à tant d’autres. D’ailleurs j’avais déjà fait quelques demandes en 2014–2015 et les plus simples ont été implémentées rapidement, le bénéfice a été immédiat. Merci d’ailleurs pour cela, c’est une des choses qui font que j’apprécie ZDS.

+5 -0

Je suis d’accord sur le fait que l’accessibilité est a améliorée.
C’est vraiment un point ou ZdS a intérêt à être nickel. Je veux dire, le but du site, c’est d’être accessible à tous et il n’y a pas vraiment de structure sur internet adapté aux mal-voyants permettant d’apprendre en ligne. Y a un truc à faire quoi.

C’est dans ce sens que je voudrais que la suggestion aide.

Bon par-contre, j’ai pas l’impression que ce qui est proposé va dans le bon sens.
Avez-vous déjà testé [Orca][orca] par exemple ? Le site est accessible globalement, mais si je ferme les yeux franchement, c’est compliqué.

Ce qu’il y a à améliorer, c’est l’ordre d’énonciation des éléments, la réduction du nombre de chose à lire (c’est incroyable vraiment) et après ça la navigation.

Rendre certaines choses (plus ou moins utiles) inaccessibles comme la signature, etc ?

J’ai du mal franchement à voir la nécessité d’un raccourcie pour la lecture zen… Déjà, ça n’agis que sur le visuel….

Effectivement…

Apparemment, le logiciel le plus utilisé est NV Access sous Windows, et sous Linux, c’est [Orca][orca].

[orca]: https://wiki.gnome.org/Projects/Orca

ache

J’essaierai Orca pour voir comment ça se passe au niveau de la lecture.

Bonjour,

Je suis non-voyant et utilisateur d’un lecteur d’écran.

Avoir un retour d’une personne non-voyante est très constructif pour cette discussion. :)

Maintenant pour votre idée d’ajouter des raccourcis clavier, à part Ctrl+Enter pour envoyer, les autres sont une très mauvaise idée.

Les accesskeys à base de Alt+Lettre ou Alt+Shift+Lettre ne sont pas beaucoup utilisés ni conseillés car peu pratiques et pas universellement supportés de la même manière. ET même les autres, comme le Ctrl+Alt+R suggéré, ne sont pas mieux.

Le plus gros problème c’est que ces raccourcis peuvent potentiellement entrer en conflit avec:

  • Un raccourci existant sur le navigateur
  • Un raccourci au niveau du système
  • Un raccourci sur le logiciel d’aide technique

En cas de conflit, le comportement va être potentiellement aléatoire: quelle fonctionnalité va être déclenchée ? une ? laquelle ? ou les deux en même temps ? dans tous les cas c’est confusionnant, quand il ne se passe pas ce à quoi on s’attend. Les raccourcis à 3 ou 4 touches combinées sont courants avec les lecteurs d’écran, donc choisir un raccourci "compliqué" ne met nullement à l’abri d’un conflit.

Je comprends mieux ce que tu exposais maintenant @Gabbro.

Quant aux touches simples genre les flèches PageUp/Down, là non plus il ne faut pas les utiliser pour des fonctionnalités générales comme le scroll. On peut utiliser ces touches mais pour customizer un composant si le comportement standard n’est pas satisfaisant; mais certainement pas pour un truc générique

Pour les flèches bas/haut, c’est le comportement de base dans les navigateurs. L’idée avec le Page Up/Down c’était que justement ça permette de passer à la prochaine page de commentaire/contenu, ce qui garderait la cohérence avec l’utilité initiale de la touche. Evidemment ça n’affecterai que si l’utilisateur a le focus sur la page entière (pas sur une textarea, etc.)

Je vous suggère de lire ces articles: https://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html et https://www.alsacreations.com/article/lire/570-Histoire-de-tabindex.html et plus généralement les tutoriels accessibilité de chez AlsaCréations https://www.alsacreations.com/tuto/liste/3-Accessibilite

Je m’y attèles tout de suite ;)

Typiquement pour les raccourcis type flèches ou PageUP/Down, c’est acceptable de les utiliser sur un composant bien précis, et c’est même important de le faire pour garantir l’accessibilité au clavier; mais ça doit se limiter au composant où c’est utile, et certainement pas s’étendre à une fonctionnalité générale de la page comme le scroll.

Je vois…

Quant à tabindex… les seules valeurs que tabindex doit admettre sont -1 et 0. Toutes les autres sont à bannir. 0 permet de rendre focusable un élément qui ne l’est pas de base, p.ex. un <span>. -1 fait le contraire, l’élément peut uniquement prendre le focus si demandé explicitement par JavaScript.

D’accord.

Du coup sur votre belle liste, le seul que je conserverais, c’est Ctrl+Enter pour poster. Tous les autres sont au mieux inutiles, ou au pire vont entraver l’accessibilité.

Je pense que c’est bien de retirer tout ces contrôles (Alt + shift + X, etc), sauf Ctrl+Enter.

Du point de vue général, d’après moi, ZDS fait figure de très bon élève en matière d’accessibilité aux lecteurs d’écran, par rapport à tant d’autres. D’ailleurs j’avais déjà fait quelques demandes en 2014–2015 et les plus simples ont été implémentées rapidement, le bénéfice a été immédiat. Merci d’ailleurs pour cela, c’est une des choses qui font que j’apprécie ZDS.

QuentinC

Je viens de remarquer que lors de l’arrivée sur une page de ZdS, un appui sur Tab ouvre un menu en haut de page : Aller au (?:Menu|Contenu|Recherche)?.

Aurais-tu d’autres idées d’améliorations que ZdS pourrait mettre en place ?

+1 -0

Rendre certaines choses (plus ou moins utiles) inaccessibles comme la signature, etc ?

Pour la signature, ça serait intéressant d’avoir une option dans son compte pour les afficher ou non. Perso je désactiverais leur affichage si je pouvais…

Pour les flèches bas/haut, c’est le comportement de base dans les navigateurs. L’idée avec le Page Up/Down c’était que justement ça permette de passer à la prochaine page de commentaire/contenu, ce qui garderait la cohérence avec l’utilité initiale de la touche. Evidemment ça n’affecterai que si l’utilisateur a le focus sur la page entière (pas sur une textarea, etc.)

Justement, les raccourcis globaux de ce genre sont suceptibles de poser problème. Dans le même ordre d’idée, on a les sweep sur mobile…

Certaines touches passent à la fois dans le lecteur d’écran et dans la page, du coup deux actions se produisent en même temps. D’autres sont interceptées par le lecteur d’écran et ne passent pas du tout sur la page, du coup la fonctionnalité est inatteignable et donc inutile.

Je viens de remarquer que lors de l’arrivée sur une page de ZdS, un appui sur Tab ouvre un menu en haut de page : Aller au (?:Menu|Contenu|Recherche)?.

Ca s’appelle des liens d’évitement. Perso je ne les utilise pas, car je me sers essentiellement des titres de niveaux pour naviguer rapidement. Mais ces liens sont utiles pour d’autres handicaps empêchant d’utiliser la souris.

+0 -0

Je plussoie à fond @Situphen !

Pour les flèches bas/haut, c’est le comportement de base dans les navigateurs. L’idée avec le Page Up/Down c’était que justement ça permette de passer à la prochaine page de commentaire/contenu, ce qui garderait la cohérence avec l’utilité initiale de la touche. Evidemment ça n’affecterai que si l’utilisateur a le focus sur la page entière (pas sur une textarea, etc.)

Justement, les raccourcis globaux de ce genre sont suceptibles de poser problème. Dans le même ordre d’idée, on a les sweep sur mobile…

Certaines touches passent à la fois dans le lecteur d’écran et dans la page, du coup deux actions se produisent en même temps. D’autres sont interceptées par le lecteur d’écran et ne passent pas du tout sur la page, du coup la fonctionnalité est inatteignable et donc inutile.

D’accord, je vois. ;) Juste une chose : le sweep ?

Je viens de remarquer que lors de l’arrivée sur une page de ZdS, un appui sur Tab ouvre un menu en haut de page : Aller au (?:Menu|Contenu|Recherche)?.

Ca s’appelle des liens d’évitement. Perso je ne les utilise pas, car je me sers essentiellement des titres de niveaux pour naviguer rapidement.

Au moins s’y est déjà pour ceux qui s’en serviraient.

Mais ces liens sont utiles pour d’autres handicaps empêchant d’utiliser la souris.

QuentinC

Comment fais-tu toi —en tant que non-voyant— pour te servir du pointeur de la souris ? Autant les cliques c’est comme les touches du clavier mais le pointeur je ne vois pas comment… :ninja:

Pour la signature, ça serait intéressant d’avoir une option dans son compte pour les afficher ou non. Perso je désactiverais leur affichage si je pouvais…

Tu peux décocher la case "Afficher les signatures" dans les paramètres de ton profil pour cacher les signatures ! :)

Situphen

C’est certainement qu’elle est pas assez accessible (╥_╥)

+0 -0

Juste une chose : le sweep ?

LE balayage, en français

Comment fais-tu toi —en tant que non-voyant— pour te servir du pointeur de la souris ? Autant les cliques c’est comme les touches du clavier mais le pointeur je ne vois pas comment…

Je ne me sers jamais de la souris, sauf éventuellement pour de rares jeux accessibles la nécéssitant. Tout se fait entièrement au clavier.

C’est certainement qu’elle est pas assez accessible (╥_╥)

C’est probablement plutôt que cette option n’existait pas la dernière fois que j’ai visité cette page… Cette fois-ci elle est décochée.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte