Carousel behaviour needs more clarification and a demo with matching behaviour

Aperta
  • Qualcosa non va?
#136 8 commenti 0 reazioni 1 assegnatario Vedi su GitHub

@Heydon ci sta già lavorando.

Dal 13/11/2019.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

accepted improvement needs discussion

How the carousel should behave when someone navigates with the tab key and/or with a screen reader is unclear and does not appear to describe what is happening in the demo. Such that the demo does not appear to behave quite as I would expect.

When navigating the carousel demo with the tab key I observed:

  • first tab press moves focus to the 'next' button.
  • second tab press moves focus to the first list item.
  • third tab press moves focus to the in-item topic link (personally not a fan sub-links in carousel items).
  • fourth-seventh tab presses move focus through the other visible items and topic links.
  • eighth tab press scrolls the carousel but doesn't appear to focus on anything specific (and certainly not the next list item).
  • ninth tab press appears to move focus to the last/7th item in the list and it's in-item link (rather unexpected).
  • tenth tab press again doesn't appear to focus on anything specific (not sure what to expect at this point).
  • eleventh tab press moves focus to the 'previous' button.
  • continued tab presses then move through the remaining now visible items and topic links.

If navigating with the tab key should (after the next button) move through the full list of items, then it is not doing this. If navigating with the tab key should trigger the carousel to scroll when moving onward from the last visible item, and then focus on the next/previous buttons before continuing through the new visible items, then the demo is not not doing this correctly either.

Which and what it is supposed to do is unclear from the documentation.

When navigating with screen reader controls (not the tab key) the behaviour is more consistent with what I would expect, though it takes 8 arrow presses to move through each item in the list rather than grouping the content within each item.

One of the big challenges with carousels for keyboard/switch/screenreader navigation is balancing between jumping through a list with next/previous (or scroll forward/backward) buttons, and being able to select an item that is currently visible in the carousel.

When navigating with keyboard control, it is nicely straightforward to ignore the next/previous buttons and move focus from item to item in the list, scrolling items into view as they gain focus. However, this quickly becomes tedious if a carousel contains a long list of items and the user cannot easily jump ahead.

When navigating without sight, it isn't obvious that not all list items are visible/available or that there is a way to skip ahead in the list.

And on mobile, I've seen some carousels without the next/previous arrows, which is not ideal for users who may not understand to swipe. Triggering scroll by touching a partially visible item at the edge of the screen, and keeping the item that currently has focus in the centre, can both help with this (Amy Leak did some user research around this for something else).

It would be good to document the navigation user journey for each type of user (keyboard/switch, screen reader, mobile with/without swipe gestures, etc) to be clearer about how a carousel should behave. And to ensure the demo matches the expected behaviour.

Lingua principale
JavaScript
Stelle
50
Fork
19
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di bbc/gel

Tutte le issue di bbc/gel

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.