【问题标题】:Notify screen reader of the appearance of text通知屏幕阅读器文本的出现
【发布时间】:2017-07-19 08:12:45
【问题描述】:

我正在开发这样一个结构的页面:

在底部我有三个按钮。当我单击一个按钮时,我会在左侧显示一个图像,在右侧显示一个简短的描述。

现在,我需要语音合成(如 NVDA 和 JAWS)来记录文本的外观。

这种行为有标准吗?

【问题讨论】:

  • 你知道WAI-ARIA吗?如果是,您是否检查了它的规范以找到合适的属性?
  • 感谢您的回复。是的,我知道 WAI-ARIA,但我没有找到显示元素时页面应该如何工作。

标签: accessibility screen-readers


【解决方案1】:

是的,您可以为此使用 WAI-ARIA,有一个名为 aria-live 的属性,您可以将其放在显示文本的容器上,其值为“礼貌”以指示屏幕阅读器用户应该被告知,但不应该打断句子。

例如:

<div aria-live="polite">Text appears here</div>

您应该不需要做任何其他事情,只需更新文本以使其由屏幕阅读器宣布,您无需使用 JavaScript 或类似的东西更改属性。该属性告诉屏幕阅读器它应该在检测到更改时宣布。

如果您发现它宣布的内容超出您的预期或不够,您可以使用 aria-relevant 属性进行一些更精细的控制,该属性可以包含以下一个或多个值的空格分隔列表:

  • “additions” 将节点插入活动区域应该被认为是相关的。
  • "removals" 删除节点应该被认为是相关的。
  • "text" 对现有节点的文本内容的更改应被视为相关。
  • "all" 相当于添加删除文本。

aria-relevant="additions text" 是直播的默认值 地区。

以上引用的信息取自https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute

【讨论】:

    【解决方案2】:

    aria-live attribute 似乎是一个不错的选择。

    此处回答的问题可能重复:

    Getting screen reader to read new content added with JavaScript

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-26
      • 1970-01-01
      • 2012-05-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多