Fwd: Accessible Dropdown - iteration 2

[Tony Atkins]

Hi, All:

Some of you may have participated in our discussions around Confluence's
lack of support for keyboard navigation, and how that affects our decision
to use or not use it when trying to build an inclusive wiki to house parts
of our information.

I have been corresponding with Sean Curtis, the developer charged with
refactoring the Atlassian design library that powers the common menus and
other design patterns across all Atlassian products.  He has shared his
first drop-down prototype for review, and could use your feedback.  Please
take a minute to give it a look.

Thanks,


Tony

---------- Forwarded message ----------
From: Sean Curtis <scurtis at atlassian.com>
Date: Thu, Jun 19, 2014 at 9:20 AM
Subject: Accessible Dropdown - iteration 2


Hi all (everyone is BCC'd),

I know it's been a while, but we haven't been sitting on our hands. We've
been defining expected behaviour and auditing what the various
markup/interaction patterns announce in a variety of different screen
readers and browsers. The combinations tested so far:

VoiceOver with:

   - Safari
   - Firefox
   - Chrome
   - Chrome Canary

JAWS 15 with:

   - IE11
   - Firefox

NVDA with:

   - IE11
   - Firefox

Window Eyes with:

   - IE11
   - Firefox

VoiceOver and NVDA performed best in my tests. Window Eyes was pretty
terrible and JAWS confused me with a heap of beeps where it enters into
certain modes. I'm unsure if it'd confuse people used to using it though
(eg I had to hit escape twice to close, or enter twice to exit the mode).
I'd love some training on what these beeps mean and whether or not this
dropdown menu code clashes with them.

We'll be collating our results and compiling them into something more
digestible. In the meantime, I'd love your feedback on this latest demo:

http://seancurtis.com/experiments/aria-dropdown/

Things to test are keyboard interactions:

   - space/up/down/enter opens the menu
   - escape closes the menu and returns focus to the trigger
   - tab closes and moves to the next focusable item in the page (I've put
   an extra button after it for testing purposes)
   - up/down to focus different items
   - enter/space/AT key (eg VoiceOver Control + Alt + Space or NVDA +
   Space) toggle checkbox/radio state and that state should be announced
   - enter/space/AT key cause menu item links to be followed (they'll take
   you to http://example.com)
   - Group headings should be announced (JAWS fails at this - I'll be
   raising a bug with them)
   - Disabled menu items can be focused and will announce as dimmed, but no
   interactions work on them (there's one link, one radio and one checkbox)
   - The correct number of items in each section are announced (3 in each)


Cheers,

Sean



-- 
Free code hosting... forever. http://www.atlassian.com/hosted/bitbucket/
Tony Atkins, Lean Innovation Program Manager, Atlassian -
aatkins at atlassian.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20140718/4818a6a7/attachment.html>