问题描述
我一直在尝试在用户单击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>
aria-atomice="true"时，将宣布添加了"；6个附加磁贴的全文。
这篇关于如何在单击“显示更多”按钮后公布新内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！