通过AJAX加载新内容时,通知屏幕读取器



当用户选择一个按钮时,我在页面上加载一些其他内容。新内容在视觉上会非常清楚,但是是否需要任何步骤来确保新内容可用于筛选读者?

我发现了两个最佳实践似乎表明需要更多步骤:为内容变化的辅助技术提供信息。确保辅助技术实时了解内容变化:

开发人员必须使用某些方法来提醒辅助技术,即内容通过JavaScript发生了变化。当不使用这些方法时,辅助技术(例如屏幕读取器(的用户可能会对页面内容的过时/过时视图。

我找不到应该使用的特定JavaScript或标记来清楚更改。

我们可能会加载几种不同的内容:

  • 搜索响应查询(例如Typeahead搜索(
  • 更长的描述(例如,在选择搜索结果后,为记录加载几段详细信息(

对于您指定的一般内容类型:

更长的描述(例如,选择搜索结果后,为记录加载几段详细信息(

听起来您只想要手风琴(显示/hide(功能。查看 wai-aria的第2.2节创作实践1.1 进行详细讨论。它以一个简单的手风琴示例结尾。

搜索响应查询(例如Typeahead搜索(

我以各种术语描述了这一点,但通常是自动完整的小部件(搜索网络查看这些关键字(。这是一个非常易于访问的一个很好的例子,它描述了针对正确的键盘控制和屏幕读取的特征和行为。

另外,如果您提供自动完成功能,直接在用户键入的位置,请确保使用aria-autocomplete属性正确标记并始终选择完整的文本。

最后,考虑提供关闭此功能的机制。一些屏幕阅读器和低视觉用户只是发现它非常分散注意力(例如,可以在用户的帐户设置中关闭Google Instant(。

最新更新