0

我正在尝试在网页中添加实时区域支持，以使 NVDA 可用于该页面。但是，我已经看到与aria-live预期完全不同的属性行为。

  1. 我尝试添加一个隐藏的活动区域，并将所有消息（每条消息包含在<p>标签中）转储到该区域以供屏幕阅读器阅读。它工作正常，但唯一的问题是插入到活动区域 div 的第一条消息永远不会被 NVDA 屏幕阅读器读取。随后的消息被完美地阅读。当要宣布第一条消息时，动态创建此活动区域 div。

  2. aria-live="assertive"并不会真正中断当前流程来宣布消息。

  3. 我在网页中使用淘汰赛。当标记为 live-region 的 HTML div 基于敲除条件显示时，屏幕阅读器不会检测到它。例如：

    <!-- ko if: $data -->
<div aria-live="polite" data-bind="text: $data">
</div>
<!-- ko -->

    最初加载页面时，$data 为空。所以 live-region div 不存在。但是当获取数据时，div 会被插入。但是，NVDA 不会读取添加的 div 中的内容。这是预期的行为吗？是否有任何解决方法来解决此行为？

4

1 回答 1

1

快速回答，时间紧迫。

您必须在页面呈现时在页面上有您的活动区域。这使浏览器能够监视它的更新。事后添加元素只会启动浏览器，但不会触发它。

我把你的笔分叉并让它在第一个按钮中工作（通过浏览器将“XYZ”发音为“zeyes”）。这是在调试模式，所以那里根本没有 CodePen 代码（也没有框架）来顶起它：

http://s.codepen.io/aardrian/debug/wgWqVm

非调试模式，所以你可以看到代码：

http://codepen.io/aardrian/pen/wgWqVm

您的代码将aria-live放在一个包含在 Knockoutko if:语句中的元素上，因此它不会在加载时呈现到页面：

<p>Last name: 
  <!-- ko if: lastName -->
    <strong aria-live="polite" data-bind="text: lastName"></strong>
  <!-- /ko -->
</p>

我对其进行了调整以将活动区域放在ko if:支票周围，现在按下按钮时会宣布：

<p>Last name: 
  <div aria-live="polite">
    <!-- ko if: lastName -->
      <strong data-bind="text: lastName"></strong>
    <!-- /ko -->
  </div>
</p>

是的，我将 a 放入 a<div>中<p>，但这仅用于演示目的。

在 NVDA 2016.4 / Firefox 50.1.1 中测试，我相信它可以按照您的意图工作。我根本没有碰第二个。

于 2017-01-13T16:54:14.173 回答