如何在单击“显示更多”按钮后公布新内容?

我一直在尝试在用户单击Show more按钮后加载一些附加内容的区域中添加VO支持(请参阅所附的截图)。

必需的行为:

我需要VO宣布有关额外加载的元素的信息,比如什么是cookie?和另外11个项目(&Q;)。

已尝试:

方法-1:使用的aria-live=";polite";aria-Related=";Additions";

  • 行为:宣布什么是cookie?,浏览IT,按钮。
  • (&Q;)

方法-2:使用的角色=";alert";

  • 行为:宣布什么是Cookie?,浏览IT&;另外23个项目,警告,什么是Cookie?,浏览IT,按钮。

如何才能让它公布有关额外添加项目的信息?

显示前-单击更多

显示后-单击更多


解决方案

听起来大部分都在工作。关键是使用aria-live。请注意,当您使用role="alert"时,您会得到一个隐式aria-live="assertive"。我很少使用";assertive";或";alert";,因为这可能会导致其他消息被清除。坚持使用礼貌(&P;)。

您没有说您对方法1或方法2有什么不喜欢的地方。它们都在宣布一些事情。您希望每一个添加的磁贴都要公布吗?我真希望不是这样。这对于屏幕阅读器来说太多了。

最初您显示的是12个磁贴。当您单击";显示更多";时,将添加另外12个磁贴。你到底想宣布什么?如前所述,您不希望公布每个磁贴的标题。没必要那么做。我建议您只需添加&q;12个简单的瓷砖或类似的东西即可。

如果您有一个空的咏叹调实况容器,您可以在其中放入任何您想要的文本,这正是将要宣布的内容。

在";显示更多";被单击之前:

<div aria-live="polite" aria-atomic="true" class="sr-only"> 
  <!-- initially blank --> 
</div>

单击";显示更多";之后:

<div aria-live="polite" aria-atomic="true" class="sr-only"> 
  12 additional tiles added 
</div>

注意,我在名为";sr-only";的容器上使用class。这只是调用CSS规则的一个常用名称,用于以可视方式隐藏仍可供屏幕阅读器宣布的文本。该名称没有什么特别之处,并且不会自动为您创建该类。您可以在What is sr-only in Bootstrap 3?中查看";仅限sr";的示例。您也不需要Bootstrap。只需使用该StackOverflow文章中的值创建您自己的CSS类。

需要注意的第二件事是容器正在使用aria-atomic。这会导致您注入到容器中的任何文本都被完全读取。如果没有aria-atomic,则只会读取更改的文本。例如,如果您刚刚宣布";12个附加磁贴已添加";,而用户再次单击";显示更多&q;,但现在只添加了6个磁贴,则您的邮件容器将添加";6个附加磁贴。

再次单击";显示更多信息后:

<div aria-live="polite" aria-atomic="true" class="sr-only"> 
  6 additional tiles added 
</div>
但是,只会公布";6";的数量,因为添加的&qot;12个额外的瓷砖和添加的&q;6个额外的瓷砖之间的差值就是";6";。使用aria-atomice="true"时,将宣布添加了";6个附加磁贴的全文。

相关文章