Creating Accessible Pop-up Layers

A z-index is often used to create a layer screen readers used by people who are blind will continue to see all layers and users may have difficulty finding the text of the content of the new layer. Users are also likely to not understand the concept of a layer.


  • Indicate where the layer starts and ends with hidden content that screen readers can render when the layer is visible.
  • When the layer is opened move focus to the new content by using an “anchor” or by using the .focus method. In order to use the focus method you may need to set and then take away a tabindex of “-1”. It would be best if the layer appeared in the code exactly after the link. Screen readers render html to user in the order the content appears in the code.
  • Ensure the layer appears in the correct reading order of what it is related too by ensuring the code appears in that same order
  • Add text to the alternative text of the animated tagging image alerting users that a new layer of content will appear within the same page. For example, “view tagging links – opens pop-up layer on this page”
  • Ensure any link to close the pop-up layer contains additional text indicating that the pop-up layer will be closed and ensure the link is keyboard accessible and is in the appropriate tab order by using the tabIndex=0 attribute if necessary.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Help Desk | 800.889.9659
© 2005 - 2015 - SSB BART Group. All rights reserved.
Privacy | Security | Credits | License
Powered by Zendesk