Make fancybox more friendly to keyboard users. Title information is specific to Omeka, but the rest should work anywhere.

fancybox-keyboard-focus.js

// Omeka loads jQuery No Conflict by default, so we can't use $

    jQuery(document).ready(function() {
    /* Code to make fancybox more accessible 
    Be sure to also set .fancybox-nav span's visibility to "visible" 
    so buttons are shown without the mouse. */
    jQuery('.fancybox').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',

        prevEffect : 'none',
        nextEffect : 'none',

        // Show the close button
        closeBtn  : true,


        // Stop enter key from going to next image in gallery
        keys : {
            next : {
                34 : 'up',   // page down
                39 : 'left', // right arrow
                40 : 'up'    // down arrow
            },
            prev : {
                8  : 'right',  // backspace
                33 : 'down',   // page up
                37 : 'right',  // left arrow
                38 : 'down'    // up arrow
            },
            close  : [27], // escape key
            play   : [32], // space - start/stop slideshow
            toggle : [70]  // letter "f" - toggle fullscreen
        },

        helpers : {
            title : {
                type : 'inside'
            },
            buttons : {}
        },


        // Set the fancybox image alt text to the parent image's alt text
        beforeShow : function() {
            var alt = this.element.find('img').attr('alt');                    
            this.inner.find('img').attr('alt', alt);                                
        },

        // Move keyboard focus to the next button
        afterShow: function(){
            jQuery('.fancybox-next').focus();
        },

        // Set up content for the fancybox caption
        // This was used for an exhibit layout, so it makes use of
        // the Exhibit Builder items/show URL rather than the standard one.
        afterLoad : function() {          
            var itemHref = <?php echo '"' . $exhibitUrl . '"'; ?> + "/item/" + this.element.parent().parent().find('div.item-file').attr('item-id');
            var itemTitle = '<h3>' + this.element.parent().find('img').attr('title') + '</h3>';
            var itemLink = '<a href="' + itemHref + '" target="_blank">View more information about this item (opens in new window).</a>';
            var itemCount = '<span class="item-count">Item ' + (this.index + 1) + ' of ' + this.group.length + '</span>';
            this.title = itemCount + "<br>" + itemTitle + itemLink ;               
        },

         // Return focus to the element used to open the fancybox
         afterClose: function() {
            jQuery(this.element).focus();
        }
    });
});

Focusing on the fancybox with afterShow isn't working for me

afterShow: function() {
  $(this.content).focus();
}

Doesn't seem to do anything at all. All other fancybox functionality is fine

Full code:

$(function (){
$('.fancybox').fancybox({
// Accessibility
// Set focus to the modal on show
afterShow: function() {
$(this.content).focus();
},
// Set focus to the trigger on close
afterClose : function() {
$(this.element).focus();
}
});
});