Is there a way to make all onclick elements navigateable by keyboard?

StackOverflow https://stackoverflow.com/questions/6306933

Question

With links and form fields you can use tab to cycle trough and activate them.

In my code however I use lots of elements, that have an onclick attribute to perform different actions. For example a table, where each tr is clickable and expands on click.

Now I want my page to be browseable by keyboard only as well.

I was thinking about setting tabindex on each tr, which worked in Firefox (I was able to tab through the items, but not click them), but did not in Chrome.

How can I cycle through all elements containing onclick using the keyboard? If not with plain HTML, maybe with JQuery.

Was it helpful?

Solution

I'd recommend that you simply wrap the elements in anchor tags (<a>).

OTHER TIPS

fiddle. Tabindex works in chrome 12 for me.

What's your actual problem?

What you can possibly do, is keep track of the current element with onclick selected, and everytime the user hits - lets say the ~ button - it will move to the next one, and when he hits Enter - just trigger the .click(); for that element.

I've set up an example on jsfiddle: http://jsfiddle.net/dvirazulay/4kJnM/

This is sort of re-implementing tabindex, and you could do it better and change the actual selector to your liking...

Something like this fiddle?

jQuery

var currentRow = -1;
$lastTd = jQuery();

$(document).keyup(function(event) {
    if ($.inArray([38, 40], event.keyCode)) {
        var $rows = $('table > tbody > tr');
        var newRow = currentRow + (event.keyCode == 40 ? 1 : -1);
        if (newRow > $rows.length - 1 || newRow < 0) return;

        currentRow = newRow;

        $lastTd.find('>div').hide();
        $lastTd.find('>span.indicator').remove();

        $lastTd = $rows.eq(currentRow)
                .find('>td')
                .prepend('<span class="indicator">&gt; </span>');

        // Show the content div
        $lastTd.find('div').fadeIn();
    }
});

Why not put a button on the row that will do the same action as the onclick of the row?

A button (or a link) will also get picked up by a screen reader.

I hope something like this might work for you, (it does not for me, i am poor at JS). You could edit it and you would get an invisible button filling the background of the table element and to tell the user which is selected you could have borders.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Nav</title>
        <style>
            table#sample {
                border-width: 1px;
                border-spacing: 2px;
                border-style: outset;
                border-color: gray;
                border-collapse: separate;
                background-color: white;
            }
            table#sample th {
                border-width: 1px;
                padding: 1px;
                border-style: inset;
                border-color: gray;
                background-color: white;
                -moz-border-radius: ;
            }
            table#sample td {
                border-width: 1px;
                padding: 1px;
                border-style: inset;
                border-color: gray;
                background-color: white;
                -moz-border-radius: ;
            }

        </style>
    </head>
    <body>
        <table id="sample">
            <tr>
                <th>Sample</th>
                <th>Sample</th>
            </tr>
            <tr>
                <td ="section1">1</td>
                <td id="section2">2</td>
            </tr>
            <tr>
                <td id="section3">3</td>
                <td id="section4">4</td>
            </tr>
            <tr>
                <td id="section5">5</td>
                <td id="section6">6</td>
            </tr>
            <tr>
                <td id="section7">7</td>
                <td id="section8">8</td>
            </tr>
        </table>
        <script>
            var sec;
            var inside;
            for (var i=1; i < 9; i++) {
                sec = "section" + i;
                inside = "<input type='button' tabindex='" + i + "' />"
                document.getElementById(sec).innerHTML = inside;
            };
        </script>
    </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top