Welcome to our series on the ICT Symposium’s Mobile Site and Native App Accessibility Testing. For the next couple of months we will be posting a couple of times a week! We will be posting a series of articles to help testers and developers determine and improve the accessibility of their mobile websites and apps. All this information is already online in Word format, so if you can’t wait check out our page on Mobile testing. Our previous article was Mobile Site and Native App Accessibility Testing, Step 3: Test critical issues – Swipe and / or Scroll trap – Day Nine, or check out our page with links to all the published Mobile Site and Native App Methodology articles.
1.3: Layer trap
Applies to: All users (but mostly encountered by screen reader and keyboard users)
Ensure the user is not be trapped on a non-visible layer.
About this requirement
In some cases, a pop-up or layer does not receive proper focus. In this case some users, such as screen reader users and keyboard users, can be trapped in the underlying, or non-visible layer. This means they often cannot close the pop-up or layer or interact with it in any way.
Please note that this requirement is similar to the Exit Trap requirement. A failure of the Exit Trap requirement is that a user cannot escape from content or a page. A failure of the Layer Trap requirement is that the user is trapped on a non-visible layer. As a result, Layer Traps are also often Exit Traps as some users cannot access the visible layer in order to dismiss it.
Please note that if the screen reader reads the visible layer and then reads the non-visible layer this is not defined as a Layer Trap per say but could still cause problems for users. We feel that this case would be a violation of WCAG2 and have not included it in this methodology.
In some cases, it is an intended use that the content of the visible layer and the underlying layer are both available to the screen reader and keyboard user (for example, a Chat box or Picture in Picture). Where this feature has been used it is essential that it can be operated and closed by all users. In this particular situation, it is expected behavior that the screen reader reads the topmost layer and the underlying layer.
A note about iOS testing
As the keyboard only works in iOS when VoiceOver is enabled it is likely that when the screen reader is trapped in a non-visible layer that they keyboard is also trapped (and vice versa).
How to test
- Activate each actionable item.
- If the actionable item triggers a pop-up or similar, can items on the current layer be actioned?
- If the actionable item triggers a pop-up or similar, can items on the current layer be actioned by a screen reader?
- Turn on the screen reader.
- Are actionable items on the current layer available to the screen reader?
- Are actionable items on the previous layer unavailable to the screen reader?
- If the actionable item triggers a pop-up or similar, can items on the current layer be actioned by a keyboard?
- Connect an external keyboard and (in iOS only) turn on the screen reader.
- Are actionable items on the current layer available to the keyboard?
- Are actionable items on the previous layer unavailable to the keyboard?
Examples
Pass 1 – Screen reader and keyboard read visible layer
In the ABC website, the screen reader and keyboard users read out the visible layer when the menu is opened.
| ABC Homepage | Menu opened |
 Figure 1: Screen reader and keyboard read visible layer (menu closed) |  Figure 2: Screen reader and keyboard read visible layer (menu open) |
Pass 1 – Screen reader and keyboard can access top layer
The screen reader reads the content on the top layer.
 Figure 3: Screen reader and keyboard can access top layer |
Pass 2 – Screen reader and keyboard can access top layer
The Book Flight layer is accessible to the keyboard.
 Figure 4: Screen reader and keyboard can access top layer |
Pass 3 – Screen reader and keyboard can access visible layer
When selecting an option in the PhysiApp the screen reader and keyboard reads the visible layer.
 Figure 5: Screen reader and keyboard can access visible layer |  Figure 6: Screen reader and keyboard can access visible layer (after selecting an option) |
Pass 4 – Screen reader and keyboard can close top layer
The top layer on Google Maps can be closed by tapping the map or by activating the down arrow in the top left-hand corner.
 Figure 7: Screen reader and keyboard can close top layer (top layer open) |  Figure 8: Screen reader and keyboard can close top layer (top layer closed) |
Up Next
Up next for Native App Accessibility Testing is Critical issue – 1.4: Text-to-Speech Trap.
Contributors
This document was developed by the ICT Accessibility Testing Symposium Mobile Sub-Committee. Members include: Gian Wild (Co-Chair), Peter McNally (Co-Chair), Brent Davis, Corbb O’Connor, Karen Herr, Kathryn Weber-Hottleman, Kathy Eng, Laura Renfro, Megha Rajopadhye, Mona Rekhi, Morgan Lee Kestner, Rafal Charlampowicz, Ryan Pugh, Steve Sawczyn, Sunish Gupta, Tom Lawton and Chris Law This document was developed by the ICT Accessibility Testing Symposium Native App Sub-Committee. Members include: Gian Wild (Co-Chair), Jennifer Chadwick (Co-Chair), Kathy Eng, Ryan Pugh, Kathryn Weber-Hottleman, Brent Davis, Laura Renfro, Peter McNally, Karen Herr, Steve Sawczyn, Sunish Gupta, Tom Lawton, Sam Bouchat, Rafal Charlampowicz, Damon Wandke, Morgan Lee Kester, Mona Rekhi, Corbb O’Connor and Chris Law.