I have 4 menu items, where the content of each is featured in its own container on the same page:
Menu 1
Menu 2
Menu 3
Menu 4
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.
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.
<!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>
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.
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?
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