Overview
Even though the web is accessible, sometimes efficiency matters like how quicker the people with disabilities can perform the things on the web, especially frequent actions. Let us understand this better with the web email application as an example. There are many frequent actions in the web email application such as composing an email, sending an email, replying to an email, and so on.. author would have done those elements accessible but still navigating to those elements from the user’s current position on the web for such frequent actions would consume certain amount of time. It is always better to provide hot keys for the users to perform such frequent actions on the web in order to enhance the user’s efficiency in performing the things on the web. Hotkeys/keyboard shortcuts not only help the efficiency of the people with disabilities but also efficiency of the power users as power users take some time to locate the desired item with the mouse pointer. Web Gmail, for the instance, already implemented the hot keys(like C for compose, control enter from the message area to send the email, R for reply, and so on..) for such frequent actions. Do you think assigning and implementing the keyboard shortcuts happen just like that? Answer is no. first of all, there should be provision for author to add/define the keyboard shortcuts for an element programmatically and this provision is not present in ARIA till ARIA1.0, and it is a problem.
In order to address this problem ARIA1.1 introduced new attribute called aria-keyshortcuts. Aria-keyshortcuts Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. In other words, aria-keyshortcuts enables the author to define what keyboard shortcuts activates or takes the focus to an element. When aria-keyshortcuts attribute is defined for an element then assistive technologies like screen readers are expected to announce name of the element and it’s keyboard shortcut(for ex: compose button alt+c). to put it simpler, aria-keyshortcuts exposes the availability of the keyboard shortcut having said that, the functionality of the keyboard shortcut is completely dependent upon the web developer. Web developer needs to write the script for functioning the keyboard shortcut as expected. Author should choose the keyboard shortcut in such a way that keyboard shortcut must contain 0 or more modifier keys and exact one non-modifier key. If you are wondering that what modifier key means? Modifier key is nothing but alt, shift, control, and so on.. whereas non-modifier key is nothing but any printable character(a, b, 1, 2$, and so on..)
In addition, there is a misconception that both aria-keyshortcuts and HTML accesskey do the same thing but that is not true. Although they both do the similar kind of job like assigning/defining the keyboard shortcuts/hotkeys, the way of the implementation differs. The main difference between both of them is that, if HTML accesskey attribute is defined for an element then modifier key is decided by browser but if the aria-keyshortcuts attribute is defined for an element then modifier key is decided by the author(again, it’s author wish whether modifier key should be provided or not in the keyboard shortcut). Let us not dig more about what all HTML accesskey do in this post and let us continue to put our attention on aria-keyshortcuts attribute.
Author notes
- Author can use this attribute on any element of the base markup
- Author must ensure that the value of this attribute is string
- string may contain more than one keyboard shortcuts with space-delimited
- Each keyboard shortcut consists of one or more tokens delimited by the plus sign(ex: alt+shift+t)
- Authors must ensure that the modifier key comes first and non-modifier key comes last as part of the keyboard shortcut(for ex: it should be “alt+c” but it should not be “c+alt”)
- It is author responsibility to make the keyboard shortcut functional as expected with the help of java script or with the help of other relevant programming techniques
- Authors must ensure that both upper and lower letter of the non-modifier key in the keyboard shortcut function the same
- Authors should implement the keyboard shortcuts by keeping the below points in the mind
- Keyboard shortcuts should not produce unintended results when they are activated as different languages have the different keyboards
- It is always better to have the ASCII letters instead of other keys in the keyboard shortcuts to prevent the conflicts from the international keyboards as numbers characters and common punctuation often require modifiers in the international keyboards(for ex: German keyboard).
- The keyboard shortcuts developed by author should not conflict with the keyboard shortcuts of assistive technology, user agent, and operating system
- The keys defined in the shortcuts represent the physical keys pressed and not the actual characters generated(ex: the keys in the keyboard shortcut should be “shift+5” but should not be “%”)
- Authors should expose the keyboard shortcuts for the sighted keyboard users too by using tooltip or other techniques
Sample code snippet
if given
<body>
<div id=”sd” tabindex=”0″ role=”button” aria-keyshortcuts=”alt+c”>compose
</body>
then the element with role=”button” and id=”sd” exposes aria-keyshortcuts=”alt+c”