Concerns

Let’s take a look at the concerns of using pop-up windows. Are they accessible to impaired users? Are they dependent on scripting or are there alternatives to those with ad-blockers or have JavaScript disabled. And do they add functionality to the page or do they overwhelm the user.

Accessibility

Once triggered – do Pop-up windows capture focus and keep focus until user closes the pop-up window? Is there an option to close or escape the pop-up? Does the focus return to the last item/element to have focus on the main page before the pop-up window was triggered? Are they properly announced to assistive technology users? And are they themselves structured properly i.e., logical role, heading structure, if form, labels for inputs, and other components the create a logical flowing window for assistive technology users to navigate both within and exit out of.

Functionality

While they can add functionality to a site they must utilize accessible scripting to do so. In addition, some users disable JavaScript or use pop-up blockers in order to avoid pop-up advertising, steps need to be taken to make sure the function of the page is not dependent on the pop-up window. While JavaScript is used to enable the pop-up window, a noscript alternative should also be used to offer users the same information.

Balance

JavaScript pop-up windows should only be used if they offer an advantage in functionality to the website. Care should always be taken not to overwhelm users with fancy or complex pop-up content for not only the complexity of scripting but the ability of those with impairments to navigate the content both within pop-up windows and the page.

Overview

• If using a link or button to open a new window or tab (either with TARGET attribute or with a script), make sure there is a label present indicating you are doing so, as those users (both screen reader and visual browsers) can be confused when they don’t realize a new window or tab is open and aren’t able to use the “back” button.
• Do not disable scrolling or resizing options – not only is it an ADA requirement but readers with low vision may need to resize content to accommodate larger text.
• Make sure to include a noscript option to direct users with disabled JavaScript to the same information.
• When possible use a regular link as well as a pop-up link and avoid using other triggering methods if possible – i.e., scroll position on page, amount of time on page, etc.
  • If you do use scroll position on page i.e. 25%, 50%, etc. make sure it is announced properly and you capture the last focus point on page to return to when modal/popup is closed – this should be straightforward as it is a positioning trigger.
  • if you do use a timer to launch – again make sure it is announced properly and you capture focus point on page to return to when modal/popup is closed – this also is straightforward just a bit more tricky – as you need to store the active focus “before” the modal is triggered – in order to return to the exact point on page when closed.

*** If javascript is disabled using the noscript tags then the Example Popup will not show but noscript version will be***

jQuery Pop-Up Example

Would be set with the - No Script - tag

Wrap the following in your noscript block and it will only show when JavaScript is disabled.