I have tried everything I can think of to work around this. I cannot seem to call the closePopup(); function directly, which prevents me from creating my own button which I could make accessible. No matter what I do to the image used for the close button… tabindex, focus, role=button, etc. I cannot get it to do anything when it has focus and I click return or enter. I am sure here is a simple solution, but I have sure not found it.
OK, I found a thread about adding a class called “sg-popup-close” to my link. This This seems to work. THANK YOU.
So now I just have to to all the custom code and CSS to make my close button emulate the way the default one was displayed. However, I would strongly encourage you to make the close button be coded in such a way that it responds to tab events by default, as this is the recommended accessible behavior.
And you might even have an option to add tabindex=”1″ to any clickable hotspot inside the popup by default, to make sure it makes it way to the top of the food chain. The default behavior put my links at the very bottom of the page from an accessible viewpoint. This would be for those who don’t know how to code it.
Well darn, adding this class does not solve anything, because the item created still does not respond to keyboard events. It only works when you click on it. So what I need is an object that is selectable with tabbing, which sets the focus, and then hitting return or enter would execute the close function. Without this the popup fails accessibility standards.
Ok, I finally worked around this by brute force. I created my own function to hide the popup div and the overlay div, and called that. I made my own close button, styled it appropriately, and copied the CSS from the default image sudo button to get the positioning right. Then I call a javascript after the loading of the popup to set the focus to the close box. This is acceptable accessibly behavior. Hitting tab once then moves to the main button of the pop up.
This is an otherwise GREAT plugin, but the non-accessible default behavior was painful to work around. Accessibility is a top priority for all our clients now, and most pop-up builders are NOT accessible by default. This plugin could distinguish itself by making their default behavior accessible.
But the authors deserve great kudos for the power they built into the tool already. Being able to call a javascript after the pop display was a great so I could set the focus. Otherwise I would have had to write more lines of code for that.
Dear @timbobo ,
Thank you for sharing all of your findings regarding the close button being accessible.
You’re right, having the option of custom JS and CSS open a multitude of opportunities with our plugin for people knowing coding.
We have also noted your comment regarding the plugin having default accessibility settings so people can navigate around the popup with their keyboards only.
Thank you again for finding our plugin valuable.
And in case of any further questions, please, let us know. 🙂
