Hello,
I have 4 menu items, where the content of each is featured in its own container on the same page:
I want to make it so that if the user tabs through the menu items with their keyboard and presses enter, the corresponding container below it receives focus. This way keyboard users can make their selection and the content of their choice receives focus.
If anyone can point me in the right direction, I would appreciate it.
You can use the tabindex HTML attribute.
You can specify in what order elements receive focus when tabbing.
I looked at tabindex and it can only give focus to certain elements. I’m looking to give focus to a container after the enter button is clicked.
Hi there,
By container, do you mean div?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Set focus</title>
</head>
<body>
<div id="myDiv">Hello</div>
<script>
var div = document.getElementById("myDiv");
div.setAttribute("tabindex", 1);
div.focus();
</script>
</body>
</html>
As Force Flow points out a div can receive focus if it has a tabindex attribute
Thanks for that. How would I make it so that a link activates the focus of “Hello”?
In other words, we would have a link above “Hello” that says “Click here”. When the user clicks on the link, “Hello” would receive focus.
Here is a more visual example of what I am trying to accomplish:
Hi there,
You could do it like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Set focus</title>
</head>
<body>
<a href="#" data-focus="divA">Link A</a>
<div id="divA">Link A div</div>
<a href="#" data-focus="divB">Link B</a>
<div id="divB">Link B div</div>
<script>
function focusElement(e){
var el = document.getElementById(this.dataset["focus"]);
el.setAttribute("tabindex", 1);
el.focus();
e.preventDefault();
}
var anchors = document.getElementsByTagName("a");
for (var i = 0, len = anchors.length; i<len; i++){
anchors[i].addEventListener('click', focusElement, false);
}
</script>
</body>
</html>
All you would have to ensure is that the data-focus attribute on the links, matches the id of the element that should receive focus.
Hey there,
I tried the code, but it doesn’t seem to work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Set focus</title>
<script>
function focusElement(e){
var el = document.getElementById(this.dataset["focus"]);
el.setAttribute("tabindex", 1);
el.focus();
e.preventDefault();
}
var anchors = document.getElementsByTagName("a");
for (var i = 0, len = anchors.length; i<len; i++){
anchors[i].addEventListener('click', focusElement, false);
}
</script>
</head>
<body>
<table width="25%">
<tr>
<td><a href="#" data-focus="divA">Link A</a></td>
<td><a href="#" data-focus="divB">Link B</a></td>
</tr>
<tr>
<td>
<div id="divA">
<a href="test.html">Link A1</a>
<br /><a href="test.html">Link A2</a>
<br /><a href="test.html">Link A3</a>
</div>
</td>
<td>
<div id="divB">
<a href="test.html">Link B1</a>
<br /><a href="test.html">Link B2</a>
<br /><a href="test.html">Link B3</a>
</div>
</td>
</tr>
</table>
</body>
</html>
As you can see the tabbing order remains the same (left to right) even after Link A is clicked.
Hi there,
Just include the JavaScript at the end of your page (before the closing </body> tag) and all will be well 
As it stands you are trying to reference elements on the page before they exist.
Hi,
Can’t you just use fragment identifiers?
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
:focus {
background:blue;
color:#fff
}
:target { background:red }
</style>
</head>
<body>
<h1>Fragment Identifier</h1>
<ul id="menu">
<li><a id="menu1" href="#link1">Go to link 1</a></li>
<li><a id="menu2" href="#link2">Go to link 2</a></li>
<li><a id="menu3" href="#link3">Go to link 3</a></li>
<li><a id="menu4" href="#link4">Go to link 4</a></li>
</ul>
<h2>Destinations below</h2>
<div id="link1">
<p>This is the content in link 1 and contains <a href="#">a link</a> and some other content <a href="#menu1">Go back to menu item 1</a>.</p>
</div>
<div id="link2">
<p>This is the content in link 2 and contains <a href="#">a link</a> and some other content <a href="#menu2">Go back to menu item 2</a>.</p>
</div>
<div id="link3">
<p>This is the content in link 3 and contains <a href="#">a link</a> and some other content <a href="#menu3">Go back to menu item 3</a>.</p>
</div>
<div id="link4">
<p>This is the content in link 4 and contains <a href="#">a link</a> and some other content <a href="#menu4">Go back to menu item 4</a>.</p>
</div>
</body>
</html>
<whine>But that doesn’t involve JavaScript!</whine>
Nice one, Paul!
That’s a much better solution.
I tried the first example with <script> at the very end. When you click on Link A or Link B, the corresponding div below it does receive focus. However, once that div is focused, you still can’t navigate through the links that belong to Link A. If I am a keyboard user and I press Enter when Link A is focused, I should be able to tab through all the links that belong to Link A before going to Link B. That order is not currently followed.
The second example is also great. My only caveat with that one is that on a long page, it forces the browser down to where the target area is. I would prefer that the top links remain visible on the screen, at it appears in the first example.
Thank you both once again.
I’m not to familiar with the specifics of keyboard navigation and what is expected behaviour and what isn’t.
You could do what you are suggesting programatically, but that feels like a dirty hack.
Do you have any suggestions, Paul?
That would be illogical captain.
If the destination was below the fold (or if the window is small) then you would never see the content. It is only logical that an element in focus comes to the fore. Nothing else is sustainable in a real page as you don’t want to break the web.
Just normally tabbing through a page will cause the page to scroll.
If you want the top links always visible then you may want to look at having a small fixed positioned sidebar containing those links.
Of course without seeing your greater plan we can only give tips based on what we see here