Accessibility Blog

Mobile Site and Native App Accessibility Testing, Step 3: Test critical issues – Layer trap – Day Ten

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

  1. Activate each actionable item.
  2. If the actionable item triggers a pop-up or similar, can items on the current layer be actioned?
  3. If the actionable item triggers a pop-up or similar, can items on the current layer be actioned by a screen reader?
    1. Turn on the screen reader.
    2. Are actionable items on the current layer available to the screen reader?
    3. Are actionable items on the previous layer unavailable to the screen reader?
  4. If the actionable item triggers a pop-up or similar, can items on the current layer be actioned by a keyboard?
    1. Connect an external keyboard and (in iOS only) turn on the screen reader.
    2. Are actionable items on the current layer available to the keyboard?
    3. 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 HomepageMenu opened
Screengrab of ABC homepage with hamburger icon in the top right-hand corner.

Figure 1: Screen reader and keyboard read visible layer (menu closed)

Screengrab of ABC page with the navigation menu open. A close icon has replaced the hamburger icon.

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.

Screenshot of the Google maps app. Focus is on the location name.

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.

Screenshot of a flight booking app.

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.

Screenshot of an app listing shoulder and arm exercises.

Figure 5: Screen reader and keyboard can access visible layer

Screenshot of details about an elbow exercise, number of sets and reps.

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.

Screenshot of the Google maps app open to Tomato Lake.

Figure 7: Screen reader and keyboard can close top layer (top layer open)

Screenshot of the Google Maps app showing a map of an Australian city.

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.