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

我一直在尝试在用户单击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个附加磁贴的全文。