Question

When a colorbox is opened on a page, the tab button on the keyboard moves the
focus to tags in the page behind the colorbox. The only way to get the tab button to work in a colorbox is to first click on the colorbox, then hit tab on the keyboard. Unfortunately, this doesn’t meet 508 standards. I need to be make sure any links or other content inside a colorbox is accessible with a keyboard. Has anyone found a fix for this? Is there a similar jQuery plugin that IS keyboard accessible?

Example page: http://water.epa.gov/type/watersheds/named/msbasin/success_stories.cfm

Click on a state for a colorbox. If you press tab, you’ll see that the focus remains on the parent page, behind the colorbox. But, if you click on the colorbox, the tab button scrolls through the content just fine.

Answer 1

Try:

$.colorbox({
    ...
    onOpen: function(){
        $('#colorbox').focus();
    }
});