Help for your keyboard users

Apex’s Blue Responsive Theme 25 is a great theme for building a user-friendly website, and unlike many other themes which make the item labels clickable to get help, it renders little question-mark icons to the right of each item that has a help message defined.

theme-25-help-icon

One issue with this design, however, is that a keyboard-savvy user (such as myself) hates to switch between keyboard and mouse – so they Tab between each field as they fill in a form. With this theme, however, those little question-mark icons are in the tab order, so the user has to Tab twice between each field. If they’re not looking at the page they might forget; and if one item doesn’t happen to have a Help icon, they have to remember to only Tab once. All of this adds up to a poor user experience.

To fix this, we simply tell the browser to move the Help icons out of the tab order – and yet again, jQuery comes to the rescue as we can simply pick out all the elements with the class itemHelpButton and set their tabindex to “-1”:

$(".itemHelpButton").attr('tabindex',-1);

Put this code in the page attribute Execute when Page Loads – when the page loads, this will set the tabindex on all the help icons on the page, so now the user can tab through the page without interruption.

2 thoughts on “Help for your keyboard users

  1. Dear Jeff,

    Thank you for taking the time to comment on my blog (international-dba.blogspot.com). I clicked on your name and it took me back to this site. I’m not a developer so a lot of it is over my head but I liked your post from years ago about OR not being commutative so I translated it into Spanish and posted it on my Spanish blog at the URL shown. I hope that’s OK.

    Kind Regards,

    Andrew

    Like

  2. Hi Andrew, no objections; however, that article is now quite old, and is regarding an Oracle bug, so it might not be as relevant now (assuming the bug has been fixed). Cheers, Jeff

    Like

Comments are closed.