Tab Order is an accessibility standard that Google Lighthouse won’t automatically detect and they suggest for you to check for it manually in their updated reports: 

If you’re unfamiliar with this accessibility standard, it’s there for people who are unable to use a mouse when browsing the web.  To see if your tab order will make sense to a user, download the Screen Reader extension and tab through your page. You will hear the screen reader say what element it’s focused on along with a highlight around the object. Chrome has a great demo of this that I highly recommend watching. 

You may notice while tabbing through your page, that you don’t see the selection, but your screenreader will detect an overlay you have placed at the top of the DOM order. You will need to do two things in order to make your tab order make sense to a screen reader: 

  • Hide your overlay from tabbing
  • Dynamically focus on your overlay 

I will use this magnificent website I created in 5 minutes to serve as our example: 

See the Pen Accessible Overlay - Original by Ed Cupaioli (@ecupaio) on CodePen.

Hide your overlay from tabbing

First step is to add the visibility CSS property with a value of hidden which will tell screen readers to not read this while it’s hidden. 

Next, you need to add the aria-modal property with a value of true to the overlay element so that screen readers know it’s outside of the page flow when you focus on it. 

See the Pen Accessible Overlay - Step 1 by Ed Cupaioli (@ecupaio) on CodePen.

You should now be able to tab from your nav bar down to the content seamlessly without getting tripped up on the overlay. 

Note: You may see some documentation that says to use the aria-hidden property and set it to true. This will achieve in hiding your overlay, but it will not make it visible on click. Once it’s set to hidden, you cannot dynamically put it back into view of the tab order. It’s a similar case with setting the tab-index property to -1. Again it will set it on init and the screen reader will not detect it when you dynamically change it. The visibility property can be set dynamically and the screen reader will recognize it. 

Dynamically focus on your overlay 

You’re not done yet! When users trigger their overlay, they need to know that the overlay is opened. You will need to trigger a focus event on a focusable element: a button or an input. I focus on the close button since it will allow the user to back out of the overlay if they don’t wish to view the overlay and read the rest of the site. Also it’s the first focusable element at the top of the overlay. 

See the Pen Accessible Overlay - Step 2 by Ed Cupaioli (@ecupaio) on CodePen.

Now you’re all set!