How to set focus to close button on opening fancybox

  • Resolved nehagrover027

    (@nehagrover027)


    5 years, 6 months ago

    Hi There,

    We’re building an accessible website for visually and hearing impaired people.
    Try navigating this page: https://dev-cordorg.pantheonsite.io/what-we-do/housing/ with the “tab” button on keyboard. What we actually want to make this page fully accessible using only keyboard and no mouse events. This page has a video popup which opens in fancybox on a button click. https://www.screencast.com/t/j6WCNbghlTe4 Is it possible to set focus to close button once the popup is opened.? so they can easily hit “enter” key and just close this popup.? I’ve tried adding this:
    afterShow: function () {$(“#fancybox-close”).focus(); alert(“clicked”);}
    but no luck. Can you please help.?

    Thanks in advance.!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @nehagrover027 this is one of the bad things about a light box or any popup: notoriously hard to make truly accessible. And what’s worse: the classic FancyBox script dates back to the days when accessibility was not very underdeveloped and even less understood by many.

    And since the script is no longer being developed, it’l be up to me to make the necessary changes. I already did some changes to improve it a bit (like making the light box navigation elements tab-able at all) but there is much to be done yet.

    I’ll be happy to take this opportunity and, if I may, use your experience in the matter.

    
afterShow: function () {$(“#fancybox-close”).focus(); alert(“clicked”);}

    Aftershow is not a parameter in the classic FancyBox script, but there is onComplete or onStart. I’d guess onComplete is the better candidate.

    But first: I suppose the close button and other navigation elements need meaningful ARIA tags to make sense of them at all?

    Thread Starter nehagrover027

    (@nehagrover027)

    Thanks Ravan,

    I was able to do this by overwriting the fancybox script in the theme. and that worked, atleast for now. ??
    I really appreciate your prompt help though.
    Cheers.!

    overwriting the fancybox script in the theme

    OK, so you don’t have the plugin Easy FancyBox installed?

    Thread Starter nehagrover027

    (@nehagrover027)

    I do have that plugin installed and configured.

    But the same (or another version?) script is already included by your theme? In most cases, running two similar scripts together means trouble… Best to include either the one from the theme or one from a plugin, but not both.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to set focus to close button on opening fancybox’ is closed to new replies.