After open Fancybox-2, send the focus in fancybox window

Question

For accessibility, I try to send the focus in the Fancybox window once it is opened.

I add a tabindex to 0 on the container of the Fancybox and I send the focus on it. This doesn't work.

afterLoad: function() {
    this.group[this.index].content.attr('tabindex','0');
    this.group[this.index].content.focus();
}

I use NVDA (NonVisual Desktop Access) http://www.nvaccess.org/ for test but Chrome can show focus too.

Thx for your help.

Answer 1

It pretty much depends on the type of content but this should do the trick (using inline, ajax or html content)

$(".fancybox").fancybox({
    afterShow: function () {
        $(this.content).attr("tabindex",1).focus()
    }
});

It should work equally well for single or gallery elements.

See JSFIDDLE (with Chrome to make it obvious)

NOTE: I would advise you to use tabindex > 0 to avoid issues with IE (if you care about cross-browser compatibility)

EDIT : here an example with different type of contents : JSFIDDLE where focus is not too obvious on images or iframes

EDIT 2 : something more general would be focusing on the .fancybox-inner selector regardless the type of content like

$(".fancybox-inner").attr("tabindex",1).focus();

See updated JSFIDDLE but wonder if that works for your purposes