CODEWITHSUNDEEP
javascripthtmltabindex
DT.DTDG
DT.DTDG

Reputation: 765

Tabindex on javascript elements

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?

Upvotes: 1

Views: 1911

Answers (1)

Ben S.
Ben S.

Reputation: 1143

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>

Upvotes: 1

Related Questions