Telerik’s RadDock and RadTagCloud Are Even More Accessible – See Their New Keyboard Support

When you create a site you want it to be accessible as well as beautiful. We strive to give you both and this is why we have taken up a major campaign to improve the accessibility support of Telerik’s  ASP.NET AJAX controls .We, as developers, are quite used to getting things done through the keyboard and we want to give your users the same experience. This time the Dock and TagCloud controls are leveling up.

RadDock now has keyboard support

Since Q3 2012 RadDock has the ability to execute DockCommands using keyboard shortcuts. To enable this new feature all you need to do is set the AccessKey property of RadDock. Then, after focusing the dock by using the browser’s AccessKey shortcut combination, your users will be able to execute the assigned commands. There are two ways to do this - either through the built-in default command shortcuts (see the table below), or via the explicit shortcut set to the command

RadDock built-in commands’ default shortcuts

• DockCloseCommand: Esc
• DockPinUnpinCommand: Ctrl+F12
• DockCollapseExpandCommand: Ctrl+F11

Here is a sample RadDock declaration specifying a keyboard shortcut for a custom DockCommand:

Yes, it is that simple - just set the AccessKey property of the dock (to allow the users to focus the control) and the ShortCut property of the command and, voila, users can execute dock commands using just the keyboard.

RadTagCloud gets an upgrade

In the previous versions of the suite RadTagCloud did offer some basic keyboard support – it was possible to assign an AccessKey to a TagCloudItem to make it accessible with a shortcut combination. Also, users were able to navigate through its items by using the Tab key.

This was not enough for us, so we went further and implemented ArrowKeys navigation.

Just like in RadDock, to enable keyboard navigation for RadTagCloud you need to set the AccessKey property of the control (or of a specific TagCloud item). If an access key shortcut combination is executed, the focus will be set to the first item in the TagCloud (or to the item that was previously focused). Then use the keyboard arrows to navigate around the tags (yeah!!!).

There is always a catch

Since the TagCloud items are ordered in a list-like structure, using the left/right arrow keys feels natural. However what should we do with the up/down keys? Their nature imposes doing to the previous/next row, whereas the list structure has no concept of rows.

What we did is implement heuristics to enable row-like navigation among tag cloud items using the up/down arrow keys. This way the user can navigate through the items with better speed and flexibility.

In Conclusion

This may seem like a small thing, but the work behind it is quite complex. Poke around the demos we have: Dock Keyboard Support and TagCloud Keyboard Support. Should you think there is something more we need to do on these two controls – drop us a line.