How to visually indicate custom keyboard shortcuts on web apps

Question

While there is a WebAIM guideline on keyboard accessibility, I was unable to find any guidelines - or even recommendations - about how to convey the existence of custom keyboard shortcuts to sighted people.

For screen reader users like myself it is simple enough:

<input type="submit" aria-keyshortcuts="Alt+S" value="Send" />

A screen reader would then announce "Send button Alt plus S" and the keyboard shortcut would also be apparent for braille display users.

Sighted users who cannot or do not want to use the mouse, however, need a simple indicator of which keyboard shortcuts are available on a given control so that they have a similar user experience and don't have to search for lists of keyboard shortcuts in separate documentation. (Such lists are, of course, important, but they shouldn't be the only way for sighted users to know which keyboard shortcuts they can use.)

Can you provide me with resources or suggestions how to visually indicate available keyboard shortcuts?

Answer 1

The guidance for aria-keyshortcuts says:

Authors SHOULD provide a way to expose keyboard shortcuts so that all users may discover them, such as through the use of a tooltip.

which is essentially what you're asking about. You know you should convey the information to all users but how should that info be conveyed? A tooltip, as suggested in the spec, is one possibility but only if that tooltip is exposed for keyboard users too. Currently, a tooltip (title attribute) is only displayed upon mouse hover with Firefox and Chrome (not sure about Safari). Say what you will about Internet Explorer but IE would display the tooltip upon keyboard focus so that's a great feature. That feature was carried forward into Edge as well.

So you can use a tooltip but would still need another way to convey that information for all users. If space allows, I often see the keyboard hint as text right on the page. Ideally, the hint is near the element it applies to but if there are several shortcut keys, then having a section with all the keys listed might be a better option. Have an appropriate <h#> element for that section to make it easier to find with a screen reader.

Note that using the accesskey attribute for the shortcut key will automatically be announced by screen readers so you wouldn't need aria-keyshortcuts. But that attribute only allows a simple letter and would still have the issue of it not being conveyed to sighted keyboard users. Browsers should automatically display a tooltip for an element with an accesskey but sadly they don't.

Another alternative is suggested in this answer, How to display a specific shortcut key in HTML?. Look at the CSS solution (link should go directly to that answer) but instead of referring to accesskey in the CSS, refer to aria-keyshortcuts. (Ignore the javascript part of that answer.)