Content accessible on a mobile device

Making off-screen content accessible

Introduction:

An off-screen content is a content that isn’t currently displayed, yet still needs to be in the DOM (modal-windowdrawer panel, …). This type of UI pattern presents an interesting challenge for accessibility because of the tab order and assistive technology‘s content linearization (more on this bellow). Today, I would like to explore a possible solution for making our off-screen contents accessible to keyboard users and other assistive technology.

 

Drawer panel menu, example of an off-screen content.
The drawer panel is a good example of off-screen content. Initially hidden to user while still being present in the DOM, it is only revealled to users in response of an event (Image from https://tympanus.net/codrops/2013/08/13/multi-level-push-menu/)

 

A word on content linearization:

The web page is browsed in a linear manner by devices like screen readers or keyboards, this means that elements are presented one at the time. So an off-screen content present on the DOM which is not visible to sighted users but not properly hidden to assistive technology might disrupt the reading flow of users who depend on these technologies (please refer to Web AIM section on content Linearization).

 

For a proper accessible experience, “the state of an off-screen content in the DOM should constantly mirror the page visual appearance”. (Make sure an element hidden to sighted users is also hidden at DOM level)

 

Experiencing non-accessible off-screen content from keyboard users perspective and finding a solution!

The experience:

Supposing a modal window isn’t properly hidden and receive focus when being off-screen. Users can be under the impression that the focus is disappearing and reappearing as they tab through the page — this is clearly an undesirable effect.

Ideally, while engineering the experience, developers should prevent the modal window from gaining focus when off-screen, and only allow it to be focused when the user can interact with it.

The solution:

During development, it is important to tab through the site to make sure the tab order doesn’t disappear or jump out of a logical sequence. If this is the case, developers should ensure that off-screen contents are properly hidden by using display:none" or visibility:hidden", and then set it back to “display:block" or “visibility:visible" before showing it to the user (This technique is implemented on this website’s drawer-panel menu).

 

As a rule, try tabbing through your pages every so often just to make sure you haven’t accidentally messed up the tab order. It’s a good habit to adopt, and one that doesn’t require much effort.

– developers.google.com –

 

Conclusion:

An off-screen content is a great way to dynamically reveal information on the page. But to avoid disturbing assistive technologies processing flow, off-screen contents must be properly hidden and revealed using CSS “display” and “visibility” properties.

Do you have experience with making an off-screen content accessible or are you struggling with one? Please share your thoughts with us. Thank you.

 

Resources:

 

 

Published by

Eric Njanga

Web front-end developer passionate about finding the most efficient workflow for creating the most effective user-interfaces. His dream is to become a front-end instructor. wlayouts@gmail.com / https://ca.linkedin.com/in/ericanjanga