3rd party ads and accessibility

In today’s digital landscape, advertisements permeate nearly every corner of our browsing experiences. Regrettably, these ads are often inaccessible. As an example, within my ongoing project, we have ads that refresh every few seconds. This refresh cycle can cause a disconcerting situation: as users tab through the ad, it can suddenly vanish from the DOM, replaced by a new one. When this happens, the browser’s focus shifts back to the document, leading to a rather disruptive user experience.

This prompted me to conduct some research to identify the most optimal solution for this issue:

aria-hidden=”true”

Several news websites use aria-hidden=”true” to make their ads hidden from screen-readers. However, users can still access them via keyboard and they still may end up in the wrong place after the ad refreshes

tabindex=”-1"

My second attempt was to add tabindex=-1 on the HTML element that contains the ad. However, most ads include HTML like this:

<iframe 
  aria-label="Advertisement" 
  tabindex="0" 
  title="3rd party ad content"
  />

This means that despite the parent having ‘tabindex=”-1"’, the browser can still focus on the iframe, so this method is ineffective.

Skip Ad button

A solution I noticed on The New York Times website is the inclusion of a ‘Skip Ad’ button. This button lets users bypass the ad and moves the focus of the element after the ad. It operates similarly to the ‘Skip to main content’ pattern: the button stays hidden until a keyboard focus makes it visible. This method also gives users more control.

Conclusion

In my opinion, combining the ‘aria-hidden’ attribute and the ‘Skip Ad’ button could be the best approach. This way, screen readers will ignore the ads, but keyboard users can choose whether to skip them or navigate to them.