如何在点击 'Show more' 按钮后发布新内容？
How to announce new content after 'Show more' button is clicked?
我一直在尝试在用户单击 Show more 按钮后加载一些额外内容的区域添加 VO 支持（请参阅随附的屏幕截图）。
要求的行为：
我需要 VO 来宣布有关额外加载元素的信息，例如“什么是 cookie？以及另外 11 个项目”。
尝试过：
方法 1： 使用 aria-live="polite" aria-relevant="additions"
- 行为：宣布“什么是 cookie？，浏览 IT，按钮。”
方法二： 使用 role="alert"
- 行为：宣布“什么是 cookie？，浏览 IT 和另外 23 个项目，警报，什么是 cookie？，浏览 IT，按钮。”
如何获取它来公布额外添加的项目的信息？
Before Show-more clicked
After Show-more is clicked
听起来它大部分都在工作。关键是使用 aria-live. Note that when you use role="alert"，你会得到一个隐含的 aria-live="assertive"。我很少使用“assertive”或“alert”，因为这会导致其他消息被清除。坚持“礼貌”。
你没有说你不喜欢方法 1 或方法 2 的地方。他们都在宣布事情。您是否希望宣布添加的每个图块？我希望不是。屏幕上的信息太多了 reader。
原来您显示的是 12 个图块。当您单击“显示更多”时，会添加另外 12 个图块。你到底要宣布什么？如前所述，您不希望公布每个图块的标题。没有那个必要。我建议只是简单的“添加了 12 个额外的图块”或类似的东西。
如果您有一个空白的 aria-live 容器，您可以在其中放置任何您想要的文本，这正是我们将公布的内容。
点击“显示更多”之前：
<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 规则的通用名称，用于在视觉上隐藏仍可用于屏幕 reader 宣布的文本。该名称没有什么特别之处，并且 class 不会自动为您创建。您可以在 What is sr-only in Bootstrap 3? 看到“sr-only”的示例。您也不需要 Bootstrap。只需使用 Whosebug 文章中的值创建您自己的 CSS class。
第二个要注意的是容器正在使用aria-atomic。这会导致您注入到容器中的任何文本都被 完全 读取。 没有 aria-atomic，只会读取更改的文本。例如，如果您刚刚宣布 “添加了 12 个额外的图块” 并且用户再次单击“显示更多”但现在只添加了 6 个图块，那么您的消息容器将有“6 个额外的图块”添加了瓷砖。
再次点击“显示更多”后:
<div aria-live="polite" aria-atomic="true" class="sr-only">
6 additional tiles added
</div>
但是，只会公布数字“6”，因为“添加了 12 个额外的板块”和“添加了 6 个额外的板块”之间的区别只是“6”。 随着 aria-atomice="true"，全文“添加了 6 个额外的图块”将会公布。
我一直在尝试在用户单击 Show more 按钮后加载一些额外内容的区域添加 VO 支持（请参阅随附的屏幕截图）。
要求的行为：
我需要 VO 来宣布有关额外加载元素的信息，例如“什么是 cookie？以及另外 11 个项目”。
尝试过：
方法 1： 使用 aria-live="polite" aria-relevant="additions"
- 行为：宣布“什么是 cookie？，浏览 IT，按钮。”
方法二： 使用 role="alert"
- 行为：宣布“什么是 cookie？，浏览 IT 和另外 23 个项目，警报，什么是 cookie？，浏览 IT，按钮。”
如何获取它来公布额外添加的项目的信息？
Before Show-more clicked
After Show-more is clicked
听起来它大部分都在工作。关键是使用 aria-live. Note that when you use role="alert"，你会得到一个隐含的 aria-live="assertive"。我很少使用“assertive”或“alert”，因为这会导致其他消息被清除。坚持“礼貌”。
你没有说你不喜欢方法 1 或方法 2 的地方。他们都在宣布事情。您是否希望宣布添加的每个图块？我希望不是。屏幕上的信息太多了 reader。
原来您显示的是 12 个图块。当您单击“显示更多”时，会添加另外 12 个图块。你到底要宣布什么？如前所述，您不希望公布每个图块的标题。没有那个必要。我建议只是简单的“添加了 12 个额外的图块”或类似的东西。
如果您有一个空白的 aria-live 容器，您可以在其中放置任何您想要的文本，这正是我们将公布的内容。
点击“显示更多”之前：
<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 规则的通用名称，用于在视觉上隐藏仍可用于屏幕 reader 宣布的文本。该名称没有什么特别之处，并且 class 不会自动为您创建。您可以在 What is sr-only in Bootstrap 3? 看到“sr-only”的示例。您也不需要 Bootstrap。只需使用 Whosebug 文章中的值创建您自己的 CSS class。
第二个要注意的是容器正在使用aria-atomic。这会导致您注入到容器中的任何文本都被 完全 读取。 没有 aria-atomic，只会读取更改的文本。例如，如果您刚刚宣布 “添加了 12 个额外的图块” 并且用户再次单击“显示更多”但现在只添加了 6 个图块，那么您的消息容器将有“6 个额外的图块”添加了瓷砖。
再次点击“显示更多”后:
<div aria-live="polite" aria-atomic="true" class="sr-only">
6 additional tiles added
</div>
但是，只会公布数字“6”，因为“添加了 12 个额外的板块”和“添加了 6 个额外的板块”之间的区别只是“6”。 随着 aria-atomice="true"，全文“添加了 6 个额外的图块”将会公布。