On my web page there are about 10 buttons are there. User doesn’t want to use mouse. Is there a way to use control keys
Well your probably aware of this already, but the user can always hit 'Tab' and the focus will go from button to button. The button with focus will have a thin dotted line around it, hit 'Enter' when the button they want to use has focus and it's essentially the same as clicking ;).
Here's a simple example of how you can give focus to a particular button when the page has loaded. This way you can start the user on the button you choose and they can 'Tab' to the others from there:
Again, it's just a simple example, but it should give you the general idea. This particular example will start the user with focus on the third button. If they were to press enter right after the page loaded it would be like clicking the 3rd button ;) .
Edit: This is assuming the most simple scenario, you may be looking for/need a more key specific solution. If so, let us know ;).
I'd investigate the two attributes, tabindex and accesskey. :)
Originally posted by jkd
I'd investigate the two attributes, tabindex and accesskey. :)
Certainly an option worth looking into:
http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1 (see "11.Giving focus to an element")
However these solutions aren't very cross-browser, to the best of my knowledge anyway. As always, please correct me if I'm wrong ;)
I know they work in Gecko and Opera 6, as well as IE6.
And I'm pretty sure they work in Opera 5+, IE5+, and maybe even recent versions of Konqueror.
The only significant browser left out is NS4.
Originally posted by jkd
I know they work in Gecko and Opera 6, as well as IE6.
And I'm pretty sure they work in Opera 5+, IE5+, and maybe even recent versions of Konqueror.
The only significant browser left out is NS4.
In that case those are the probably the best options to consider, depending on the specific situation ksridhar69 is dealing with of course.
The only reason I brought up the browser compatibility issue is because I copied the source from one of the examples and tested it in IE 6 and it didn't appear to work. I only ran 1 quick test though, so the error was probably on my end. btw - jkd in the meantime, do you know where there's a working example/demo for testing? That would also give ksridhar69 a chance to see the option in action (just curious) ;) .
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>accesskey and tabindex example</title>
<style type="text/css">
a {
display: block;
color: blue;
text-decoration: none;
}
a:first-letter {
text-decoration: underline;
}
a:active {
background: pink;
color: white;
}
</style>
</head>
<body>
<div>
<a href="#" accesskey="h" tabindex="3">Hello</a>
<a href="#" accesskey="w" tabindex="2">world.</a>
<a href="#" accesskey="m" tabindex="1">Mighty fine example here.</a>
</div>
<div>
The links tab in reverse order, and their accesskey is the first letter. In Windows, ALT+ACCESSKEY, in MacOS, CMD+ACCESSKEY.
</div>
</body>
</html>
A valid XHTML 1.1 example of the accesskey and tabindex attributes on links. They work identically when dealing with form elements. :)
Very nice example jkd :thumbsup: !
I'm trying to do something similar with menus. I had used accesskey on anchor tags in my DHTML menu. Unfortunately, this only causes the focus to transfer to the link when when the link is visible. If the menu is hidden (cause the user hasn't traversed to it) then the access key is ignored. I tried converting to flat buttons, but got the same result (buttons will do the onclick action when the accesskey is pressed, but only if they are visible).
I know I can do some archane incantations of javascript looking for key press and scanning each menu item for the correct access key. but...
Is there an easier way. For non-menu controls, accesskey moves the focus to that control, but for menus I want the accesskey to activate the menuitem, similarly to how accesskey works with the button tag.