使广告可访问,不显示给屏幕阅读器

时间:2018-05-08 19:30:44

标签: html iframe accessibility ads wai-aria

我在网站上管理了很多广告。我想让广告可以访问,我一直在研究这个,但目前关于如何使广告可访问的信息很少。当我进一步研究这个时,我想让它们至少对于屏幕阅读器不可见,以便它们被跳过并被忽略。

广告通常采用以下格式:

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

在父div上使用aria-hidden="true"是否合适?我正在阅读适用于所有儿童div的内容,这很棒,但也适用于it is intended for items that are not visible to anyone,而不仅仅是那些使用屏幕阅读器的人。但广告是可见的 - 我只是不希望屏幕阅读器打扰它。

理想情况下,我还希望这样做,以便整个广告元素不是标签顺序的一部分,可以跳过,但tab-index =“ - 1”不适用于像{{1}这样的子div我确实需要将它应用于所有子div,这很困难。我不确定是否有解决方法。

所以这归结为三个问题:

  1. 我可以在父div上使用aria-hidden = true吗?
  2. 有没有办法使用tab-index = -1来确保在标签时跳过整个广告元素?
  3. 还有什么我应该考虑的吗?

1 个答案:

答案 0 :(得分:1)

  1. 是的,aria-hidden=true会阻止屏幕阅读器阅读
  2. 您可以应用我在How can restrict the tab key press only within the modal popup when its open?中指示的相同方法来禁用键盘交互(使用jQuery UI非常简单)
  3. 可访问性涉及很多人,使用屏幕阅读器的盲人只是其中的一小部分。因此,通过将其添加到屏幕阅读器或键盘导航,您的添加将无法通过魔法访问。
  4. 如果您在自己的网站上放置广告,那么您可能会想要点击或导航到这些广告。如果您将广告从tabindex中移除,那么使用键盘导航的用户如何点击您的广告?如果您从辅助功能树中删除了具有低视力的人如何使用屏幕阅读器阅读广告内容?出于这个原因,aria-hidden应该用于匹配元素的可见状态。

    与使用屏幕阅读器的全盲人相比,视力低下或使用键盘导航的人数要多得多。

相关问题