4

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.

Steven Mouret
  • 5,730
  • 1
  • 18
  • 21
  • 1
    what type of content (inline, iframe, image)? using a form? focus on a specific form field? what is the goal to get focus in fancybox other than a form field? – JFK Sep 26 '13 at 17:16

1 Answers1

9

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

JFK
  • 40,963
  • 31
  • 133
  • 306