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.