WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JavaScript library for display and customization ofkeyboard shortcuts?

for

From: Bryan Garaventa
Date: Oct 30, 2015 2:08PM

Hi,
I'm coming into this thread a bit late, is the desire to have customizable key assignments for all widget types? Or is the desire to optionally expose all assigned keystrokes visually? I'm not sure which, and both would have different ways to approach.

I'm not really sure how valuable it would be to have totally customizable hotkeys for all widget types, especially for something as complex as a date picker for example.

E.G
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Date%20Pickers/ARIA%20Date%20Picker%20(Basic)/demo.htm
This provides full keyboard support for all date picker functionality using common keystrokes.

Since I've already got all of these included, it wouldn't be difficult to make them customizable, though it would require writing a popup dialog for controlling all of these things, which would in turn require a UI change for every such calendar implementation everywhere where this was included. For it to be scalable, it too would require full programmatic customization as well for support in different languages, and so on, just to give an idea of what would be needed to make this work accessibly everywhere. It is doable, but when this is done for every widget type across the board, it can be quite expensive to implement.

The desire to show key assignments visually is quite a bit easier in contrast, if this was the original question. For example this can be done currently by adding a custom attribute to an element such as data-keystroke="whatever", then use a CSS pseudo element like *[data-keystroke]:focus:before or *[data-keystroke]:focus:after to display this visually when the element receives focus.

There are problems here too though, for example it wouldn't make sense on touch devices, nor does it account for AT keystroke conflicts. Also, going back to the date picker, to get an idea how complex the key assignments are, every focusable date in the date picker supports all of the following keystroke assignments:

Press the Left and Right arrow keys to navigate the row by week day.
Press the Home and End keys to jump to the beginning or end of the current row.
Press the Up and Down arrow keys to navigate between weeks on the same week day.
Press the PageDown and PageUp keys to navigate backwards or forwards by month.
Press Alt+PageDown and Alt+PageUp to navigate backwards or forwards by year.
Press the Enter key to activate the selected date.
Press Escape to close the calendar without making a selection.

Plus you can press Shift+Tab to access the date picker buttons that appear before the focusable dates, or Tab to leave the date picker and close it automatically.

I agree that having keystrokes automatically built into browsers would be convenient, but this is going to be a long ways down the road, especially since browsers cannot currently predict the nature and intent of every widget in existence simply based on markup and styling.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Brian Lovely
Sent: Friday, October 30, 2015 5:35 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] JavaScript library for display and customization of keyboard shortcuts?

Rob,

The Aegis project has keyboard shortcuts, but they are baked in. jQuery UI does not appear to fully support accessibility and keyboard shortcuts at this time (assuming date picker to be typical of all widgets). http://wiki.jqueryui.com/w/page/12137778/Datepicker <http://wiki.jqueryui.com/w/page/12137778/Datepicker>;


Brian Lovely
<EMAIL REMOVED>



> On Oct 30, 2015, at 8:20 AM, Robert Fentress < <EMAIL REMOVED> > wrote:
>
> _mallory, you have expressed well my intent here. Screen reader users
> have a lot of great affordances, but straight-up keyboarders, not so much.
> On pages with lots of tab stops, this is a pain. Perhaps the keyboard
> shortcuts should be off by default to avoid conflicts with other AT,
> but I do think providing customizable hotkeys as an easily-enabled
> affordance could provide great value.
>
> Jennifer, thanks for the info. I had seen Marcy Sutton's slides, but
> didn't know there was a recording of her presentation, so that is helpful.
>
> Asa, thanks for the link to MouseTrap.
>
> Brian, I wonder if the accessibility enhancements in Aegis have since
> been folded into jQueryUI core. I thought they had, but I haven't
> really checked. Is there something in there that provides a
> customizable keyboard shortcut tool?
>
> Best,
> Rob
>
> On Fri, Oct 30, 2015 at 4:54 AM, _mallory < <EMAIL REMOVED> > wrote:
>
>> On Thu, Oct 29, 2015 at 11:41:37AM -0700, Jennifer Sutton wrote:
>>> And my larger question would be, why is this idea under consideration?
>>>
>>> Aren't we getting into the territory of possible keyboard conflicts
>>> with screen reader and browser keyboard controls? And the issues of
>>> people having to learn something new that only applies to a
>>> particular site?
>>
>> I think such an idea could have merit for:
>>
>> 1. non-SR-using keyboarders (and other keyboard-oriented users via
>> things like switches, Dragon, whatever) who for example cannot
>> navigate around by aria-thingies and, at least without any AT, are at
>> the mercy of the Thousand Tabs of Death
>>
>> 2. and then actually only useful for sites that are large, often-
>> revisited sites/apps like Gmail. There are javascripted keyboard
>> shortcuts in Gmail but I still have a lot of trouble moving around
>> big sections so I dunno what I'm missing, and if this were a library
>> where the user could set their own keystrokes, what this could allow
>> is users who've already put time and effort learning another similar
>> app (let's say a very awesome mail client like mutt) could put their
>> investment to use on this other site. Again, it would only make sense
>> on things like news sites, mail apps, maybe stuff like Twitter-- the
>> kinds of sites that you notice often already have a bunch of
>> javascripted keyboard shortcuts hidden behind a "?" key already,
>> because people revisit them. I actually don't see it being useful for
>> a shop, even if people visit the shop often, it's not such a daily
>> thing as mail or news.
>>
>> I don't see anything like this necessarily being useful for SR-users
>> as they have a nice set of navigation keystrokes available to them,
>> and as you mention, they have more possibility for conflicts.
>>
>> What I'd much rather want to see is more basic keyboard stuff
>> integrated into browsers, such as possibly giving non-SR browser
>> users the ability to at least navigate via [aria] roles, or by HTML
>> type (like quick keys for Tables, Forms, etc). But since that's never
>> going to come, a steaming pile of JS on every large site/app might be
>> the distant-but-best-shot number 2.
>>
>> _mallory
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
>
> --
> Robert Fentress
> Senior Accessibility Solutions Designer
> 540.231.1255
>
> Technology-enhanced Learning & Online Strategies Assistive
> Technologies
> 1180 Torgersen Hall
> 620 Drillfield Drive (0434)
> Blacksburg, Virginia 24061
> > > archives at http://webaim.org/discussion/archives
>