I have a side nav with dots (each of these dots on click scrolls to anchor down the page).
For accessibility purposes, I'd like users to be able to tab through the dots. I have set up a <span> element to wrap the anchors of each dot and the tabindex works fine, however..
I'd like the click event to be fired when they tab on the nav element. ie: If they tab to dot 2 it should imitate a click event so it takes them to that anchor.
Possible?
If I understand correctly, I think that you should be able to solve your problem by listening for the "focus" event on the dots and simulating a click on the dot when you receive it. There are several ways to do this, depending on what frameworks (if any) you are using. For example, if you are working with jQuery and the dots are identified by having the "dot" class:
$('.dot').focus(function(e) {
e.target.click();
}
Here's a small test page that I put together - it seemed to work in both IE10 and Chrome:
<html>
<head>
<script type="text/javascript">
function handleOnLoad() {
var elems = document.getElementsByTagName("span");
var i;
for (i = 0; i < elems.length; ++i) {
elems[i].onfocus = function(event) {
if (event.target) {
event.target.firstChild.firstChild.click();
}
else if (event.srcElement) {
event.srcElement.firstChild.firstChild.click();
}
}
}
}
</script>
</head>
<body onload="handleOnLoad()">
<span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll1">Foo</a></ul></span>
<span class="focus" tabindex="2"><ul class="inactive" tag="scroller"><a href="#scroll2">Bar</a></ul></span>
<span class="focus" tabindex="3"><ul class="inactive" tag="scroller"><a href="#scroll3">Baz</a></ul></span>
<span class="focus" tabindex="4"><ul class="inactive" tag="scroller"><a href="#scroll4">Ban</a></ul></span>
</body>
</html>
span surrounding the anchor so that it can be tabbed to. My HTML is this <span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll" style="opacity:0;">O</a></ul></span> - so how can I set the click on the anchor within the ul when it focus is on the span that surrounds it?
e.target.click(); to $('a', e.target).click();. If you know you won't have any whitespace in your markup, e.target.firstChild.firstChild.click(); should also work if you don't want to have to do another query.handleOnLoad() function isn't being called, so it doesn't set up the onfocus handlers. If I add something to handleOnLoad() that should has a clearly visible effect, like modifying the names of the links, I don't see it happen, and when I inspect the contents of the frame with a debugger, the onfocus handlers don't see to be there. When I try it offline (i.e. a simple HTML file that I open in a browser), it seems to work.