goodlayers wordpress tabbed content keyboard focus

I’m working on a site and ‘m tyring to make sure that it can be read by screen readers as much as possible we’ve run into problem with a tabbed content element that won’t receive keyboard focus as it’s created with a div.

http://dev-rivervalleypools.pantheonsite.io/pools/vogue-panache/

Unfortunately my javascript isn’t great but I found this article – http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/

and i’m attempting to modify this script below to correct the problem. I’m stuck on setting the click function and i’m not sure if i’m even on the right track.

 $('<span>', {
'class': 'button', // So you can style it
role: 'button', // Tell assistive technology it's a button
tabindex: '0', // Make it keyboard focusable
click: function() { // Make something happen when it is clicked
    alert('You clicked me!');
},
keydown: function(e) { // Trigger the click event from the keyboard
    var code = e.which;
    // 13 = Return, 32 = Space
    if ((code === 13) || (code === 32)) {
        $(this).click();
    }
},
html: 'Click me!'
}).appendTo($('#button-container'));

Read more here: goodlayers wordpress tabbed content keyboard focus

Leave a Reply

Your email address will not be published. Required fields are marked *