Ensure that library works well with screen readers

[alexreardon]

It would be worth auditing how well this library works with screen readers and if there are any improvements that can be made

[svinkle]

As mentioned over in a11yproject/a11yproject.com#513 (comment), here are a few instructions/audible cues that would be beneficial for people who rely on screen readers:

• How to pick up and put down items
• Which order items are now in after dropping
• How many items there are in total
• Semantic meaning for each item (currently announced as, "link")

I just did a quick pass to check things over with Chrome + VoiceOver on maxOS. This needs to be tested with other browser/screen reader combinations as well.

Time permitting, I'd like to jump in and conduct more testing and dive into the code to see where these types of announcements and semantics could be added.

All that said, the keyboard support is really fantastic! 👍

[alexreardon]

Thanks for looking into this @svinkle !!

[alexreardon]

Super relevant: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09

[alexreardon]

Thanks @seancurtis for the link!

[alexreardon]

Another good article: https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering

[alexreardon]

I am looking into api options for this. Currently:

onDragStart(start: DragStart, {announce: (message) => void})

where you call announce with your message. If you do not call it then we use a default message

or

onDragStart(start: DragStart): string

We use the string you return from the handler as the message. If not is returned then we use a default. This is clean, but it might be a bit confusing to return a string from an event handler

[alexreardon]

@svinkle this will be shipping in v5 👍

[svinkle]

@alexreardon Awesome! Any method available where I could test the work being done so far?

[alexreardon]

We are publishing to npm tomorrow

…

On Thu, 22 Feb 2018 at 7:29 pm, Scott Vinkle ***@***.***> wrote: @alexreardon <https://github.com/alexreardon> Awesome! Any method available where I could test the work being done so far? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7fL-1EIrKru5j1FhpeRNsFGkBNhtks5tXSWDgaJpZM4Oy8QC> .

[alexreardon]

But the example storybook website has it now

…

On Thu, 22 Feb 2018 at 8:04 pm, Alex Reardon ***@***.***> wrote: We are publishing to npm tomorrow On Thu, 22 Feb 2018 at 7:29 pm, Scott Vinkle ***@***.***> wrote: > @alexreardon <https://github.com/alexreardon> Awesome! Any method > available where I could test the work being done so far? > > — > You are receiving this because you were mentioned. > > > Reply to this email directly, view it on GitHub > <#7 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ACFN7fL-1EIrKru5j1FhpeRNsFGkBNhtks5tXSWDgaJpZM4Oy8QC> > . >

[alexreardon]

This has been completed as a part of #321

It feels (and sounds) great!