aurelia / aurelia/ui-virtualization

Accessibility - with a screen reader, items not in the DOM are inaccessible

Open
#20 3 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
89
Forks
44
PR merge metrics
No merged PRs in 30d

Description

With a mouse or keyboard, it's possible to scroll the list element to reveal more virtual items - previous, or next. Testing with Voiceover in Safari (OSX 10.10) with the demo application, someone using a screen reader cannot access elements in the list that are not in the DOM.

I believe that a fix for this could be to add a hidden element at the beginning and end of the DOM list (of the same type as the element with the virtual-repeat property) that contains a button or link of some type that would manually call the scroll event to load a new page of list elements. (We could possibly do that on focus, but I don't know if that's an accessibility trap.)

I imagine that when the list is in the home or end position, the corresponding element would be removed from the DOM.

I'm definitely open to suggestions and I'll probably continue testing this locally to see what else I find.

Contributor guide

Open the contributing guide

Research direction

Start with the demo application and the list element using the virtual-repeat property, reproducing the issue with VoiceOver in Safari. Trace how virtual items enter and leave the DOM and determine how screen-reader users can reach items outside the rendered range; done means the full list is navigable without relying on mouse or keyboard scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.