Featured Image for: Pop-Up Windows and Accessibility

Pop-Up Windows and Accessibility

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 – i.e., position on page, amount of time on page, etc.

Sample Popup

Leave a comment