gpt4 book ai didi

html - 使广告易于访问且不向屏幕阅读器显示

转载 作者:行者123 更新时间:2023-11-28 00:46:32 35 4
gpt4 key购买 nike

我在一个网站上管理着很多广告。我想让广告无障碍,我一直在研究这个,但目前关于如何让广告无障碍的信息很少。当我进一步研究这个问题时,我想让它们至少对屏幕阅读器不可见,这样它们就会被跳过和忽略。

广告通常采用以下格式:

<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"不适用于子 div,如 aria -hidden="true" 确实如此,因此我需要将它应用于所有子 div,这很困难。我不确定是否有办法解决这个问题。

所以这归结为三个问题:

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

最佳答案

  1. 是的,aria-hidden=true 将阻止屏幕阅读器阅读
  2. 您可以应用我在 How can restrict the tab key press only within the modal popup when its open? 中指出的相同方法禁用键盘交互(使用 jQuery UI 非常简单)
  3. 很多人都关心可访问性,而使用屏幕阅读器的盲人只是其中的一小部分。因此,您的添加内容不会通过从屏幕阅读器或键盘导航中移除而变得神奇可访问。

如果您在自己的网站上转换广告,那么您认为人们会想要点击或导航到这些广告。如果您将广告从 tabindex 中删除,使用键盘导航的用户如何点击您的广告?如果您将屏幕阅读器从可访问性树中删除,视力不佳的人如何能够使用屏幕阅读器阅读您的广告内容?正是出于这个原因,应该使用 aria-hidden 来匹配元素的可见状态。

视力不佳或使用键盘导航的人比使用屏幕阅读器的全盲人多得多。

关于html - 使广告易于访问且不向屏幕阅读器显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50241041/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com