vertical-collection
vertical-collection copied to clipboard
html-next
Screen readers skip around when scrolling
Based on feedback we've received, we've learned that screen readers will push page content down as they change the active element, and that they begin to skip around after a certain amount of time. This is problematic for a11y, and we should figure out a way to prevent skipping while scrolling.
I was unable to reproduce this with VoiceOver in OSX, will continue trying with other screen readers and browsers.
cc @jcorradino can you reproduce this on the example in the demo website with any particular browser/screen reader combinations? Will have to get a windows machine going to test Edge/IE
https://html-next.github.io/vertical-collection/#/examples/infinite-scroll
NVDA (Screen Reader) has two modes when navigating a website: browse mode (navigating the page) and focus mode (interacting with "focusable" elements) - most of the time, you would use browse mode, as it flattens the DOM structure into a screen-reader-usable format. Hitting the down arrow will read out the next DOM element, the right arrow will read out an individual letter in that DOM element, tab will bring you to the next tabbable element, etc. However, once you've entered a table, the keyboard navigation changes a little - you use Ctrl+Alt+Arrow, allowing you to navigate from cell to cell, through the table's structure.
Navigating to a table using Vertical Collection on NVDA functions initially like any other table. You can navigate through the visible element without problems. But once the screen reader detects that something has changed within the table, it starts to treat it as an interactive element, dropping the user into focus mode, forcing them to switch back to browse mode and continue on, only to have it update another row and drop the user back into focus mode. While this is technically still usable, it results in nearly unusable UX.
The above is primarily an issue with tables (and I would imagine anything containing elements that NVDA has custom navigation for), but I was able to see a sort-of similar(ish) bug where it sort of loses its place and skips an element or three as you quickly navigate through. Using the VC infinite scroll demo linked above, were you to quickly navigate using the arrow keys, it would sometimes lose its place and skip a few elements. As there is no interactive elements within the list items however, it is not toggling modes like it does with tables.
From our conversation earlier, setting up some kind of pagination would definitely be beneficial. Though, in the infinite scrolling demo, would likely be less "bug fixing" (other than the whole "skips items" thing, that is), and more "significantly improve experience for screen reader users".
Side note: chatting with @melsumner, I was correct in my comments earlier about A11Y testing tending to be a pretty substantial amount of hands-on work. While we can try to implement keyboard navigation tests, it would be incredibly difficult to capture all of them.