用于搜索结果的 aria-live

当用户在搜索框中输入查询时，您希望搜索结果能够自动更新到页面上。为了实现这一目标，您可以使用 aria-live 属性。该属性告诉屏幕阅读器搜索结果是动态的，并且需要立即通知用户。

什么是 aria-live 属性？

aria-live 是一个 ARIA （可访问性富互联网应用程序）属性，可以向屏幕阅读器提供有关应用程序用户界面上发生哪些更改的信息。

该属性告诉屏幕阅读器动态区域的界面元素实时地反馈更改，并且需要立即通知用户。

aria-live 属性可以解决什么问题？

如果搜索结果非常丰富，例如包括大量的页面标记和文本内容，您希望用户能够随时看到更新的结果。在这种情况下， aria-live 属性可以解决以下问题：

• 用户可以立即看到搜索结果。 aria-live 属性告诉屏幕阅读器搜索结果是动态的，并且需要立即通知用户。这使得用户能够立即看到更新的结果，从而提高了用户体验。
• 避免屏幕阅读器使用旧版本。 如果搜索结果无法及时更新，屏幕阅读器可能会使用旧版本。通过使用 aria-live 属性，您可以确保屏幕阅读器使用最新版本的搜索结果。

如何使用 aria-live 属性？

在您的搜索结果容器上添加 aria-live 属性，通常建议使用 assertive 值，以确保屏幕阅读器立即通知用户搜索结果的更改。

示例代码:

<div role="region" aria-live="assertive" aria-relevant="additions" aria-atomic="true" class="search-results">
    <!-- 展示搜索结果的内容区域 -->
</div>

• role="region"：告诉屏幕阅读器要直接通知用户区域内出现的内容变化。
• aria-live="assertive"：告诉屏幕阅读器要立即通知用户区域内出现的内容变化。
• aria-relevant="additions"：告诉屏幕阅读器用户关心该区域内发生的添加事件。
• aria-atomic="true"：告诉屏幕阅读器发生更改时，要重新读取所有内容，而不仅仅是更改部分。

结论

使用 aria-live 属性可以提升搜索结果的交互性，并让您的应用程序更加可访问。要使用 aria-live 属性，请将其添加到搜索结果容器上，并确保适当设置 role 和 aria-relevant 属性，以便屏幕阅读器可以正确地通知用户。