web-dev-qa-db-fra.com

Où le focus clavier doit-il aller lorsqu'un bouton de contenu «Charger plus» est cliqué

Où le focus clavier doit-il aller lorsqu'un bouton "Charger plus" est cliqué? Sur les sites Web présentant cette fonctionnalité; soit le focus est déplacé vers le haut de la page lorsque le bouton est cliqué, soit le focus dépasse le nouveau contenu.

Je trouve ces méthodes problématiques, car comment les utilisateurs de clavier et les utilisateurs de technologies d'assistance savent-ils où le nouveau contenu est démarré - et passent facilement à ce point.

Je suis à la recherche d'une solution, et bien que je puisse penser à deux façons d'y remédier, je ne suis pas sûr de la meilleure approche du point de vue de l'accessibilité.

  1. Le focus est déplacé au début du nouveau contenu. Cela pourrait être réalisé en utilisant un tabindex-1 et des scripts pour définir le focus.
  2. Le nouveau contenu se charge après le "charger plus", le bouton reste en place et le focus reste sur le bouton. À la fin du nouveau contenu, un nouveau bouton "Charger plus" apparaît.

Je recherche des fonctionnalités de meilleures pratiques qui sont également accessibles

Les sites ont déjà vérifié la fonctionnalité du bouton de contenu "Charger plus"

  1. Bouton Afficher plus
  2. Ajout d'un bouton Charger plus à votre conten
  3. Comment ajouter un bouton de chargement supplémentaire pour une page HTML/CSS?
3
Laurence L

Si vous ne définissez pas le focus sur le premier élément chargé par la dernière demande, l'utilisateur perdra la trace de la séquence. Pour accéder à ce qu'ils ont manqué, ils devront tout au plus MAJ + TAB. C'est mauvais même pour un utilisateur de clavier voyant.

focus sequence demonstration Les chiffres indiquent la séquence de mise au point. Voyez comment l'accent reste sur le numéro 9 après avoir appuyé sur "Charger plus"? La séquence est maintenue. Le lecteur d'écran prononcera le point 9 dès qu'il sera rendu.

1
crimson_king

En général, il est préférable de ne pas déplacer le focus de l'utilisateur. Donc, si votre bouton "charger plus" est toujours visible sur la page après le chargement du nouveau contenu, le focus doit rester sur ce bouton. Laisser l'accent sur "charger plus" aidera à se conformer à WCAG 3.2.2

Aussi, pour des raisons d'accessibilité, il serait agréable d'annoncer combien de "trucs" viennent d'être chargés. Cela peut être fait avec aria-live si vous créez une page Web, mais je m'abstiendrai de plus de détails à ce sujet, car il s'agit davantage d'un détail d'implémentation non destiné à StackExchange. Vous pouvez trouver des informations sur aria-live sur StackOverflow.

2
slugolicious

Il n'y a pas de solution claire.

Il vaut la peine de demander à plusieurs utilisateurs ce qui leur convient le mieux. À mon avis, une fois que l'écran est toujours en place, l'écran ne doit pas bouger - lorsque le nombre d'éléments de la liste disparaît de l'écran, la position de l'écran doit passer au premier nouvel élément de liste visible.


L'origine de cette solution vise à réduire la surcharge cognitive selon loi de Miller - La personne moyenne ne peut conserver que 7 (plus ou moins 2) éléments dans sa mémoire de travail. Cela simplifie la navigation dans de nombreuses collections.

1
Piotr Żak