2

I manage a lot of ads on a website. I want to make the ads accessible, and I've been been researching this but there is little information out there currently about how to make ads accessible. While I look into this further, I'd like to make them at least invisible to screenreaders, so that they are skipped over and ignored.

The ads are usually in the following format:

<div class="ad">
<iframe>
<html><body><div>Various more child divs here</div></body></html>
</iframe>
</div>

Is it appropriate to use aria-hidden="true" on the parent div? I was reading that would apply to all child divs, which is great, but also that it is intended for items that are not visible to anyone, not just those using screenreaders. But the ad is visible -- I just don't want screenreaders to bother with it.

Ideally I would also like to make it so that the entire ad element is not part of the tab order and can be skipped over, but tab-index="-1" does not apply to child divs like aria-hidden="true" does, and as such I would need to apply it to all the child divs, which is difficult. I'm not sure if there is a way around this.

So this comes down to three questions:

  1. Can I use aria-hidden=true on the parent div?
  2. Is there a way to use tab-index=-1 to make sure the entire ad element gets skipped over when tabbing?
  3. Is there anything else I should consider?
CodeBiker
  • 2,985
  • 2
  • 33
  • 36

1 Answers1

1
  1. yes, aria-hidden=true will prevent screenreaders to read that
  2. you can apply the same method I indicated in How can restrict the tab key press only within the modal popup when its open? to disable keyboard interaction (which is very simple with jQuery UI)
  3. Accessibility concerns a lot of people where blind people using screenreaders are a small part of them. So your adds won't become magically accessible by removing them to screenreaders or from keyboard navigation.

If you put ads on your website, then you suppose people will want to click or navigate to them. How can someone who navigate with keyboard click on your ads if you remove it from the tabindex? How someone with low vision will be able to read the content of your ads using a screenreader if you remove it from your accessibility tree? It's for that exact reason that aria-hidden should be used to match the visible state of the element.

There are much more people with low vision or using keyboard navigation than full blind people using screenreaders.

Adam
  • 17,838
  • 32
  • 54
  • These are all good points -- it's not just about blind people using screenreaders, and therefore either of these options (aria-hidden=true and tab-index=-1) are not great for this purpose. As such, what would you suggest I do to make ads accessible? It's notable that I have no control over the ads themselves -- they are sent in dynamically -- so I don't know what the content of the ads will be. – CodeBiker May 08 '18 at 20:42
  • 1
    @CodeBiker Making third-party content accessible is quite difficult as it would require checking text alternative for contents. Removing them is the best thing you could do, starting by removing them to screenreaders. – Adam May 09 '18 at 08:22