辅助功能 - 提醒用户按钮内的动态文本更改

Question

我正在尝试改进测试连接的按钮的可访问性。如果连接成功，则按钮文本将更改为“成功”。如果没有，它将变为“不工作”。他们看起来像这样：

<button aria-label="success">Success!</button>

<button aria-label="failure">Not Working</button>

我正在尝试找到一种方法来提醒用户按钮的内容更改。到目前为止，我已经添加了aria-labels来读取“成功”或“不工作”标题，但是如果用户选中/移开按钮然后在状态有后再返回到用户，则只会向用户读取这些标签。改变。

我还尝试将按钮的文本包含在<span>中，并附带一个role =“alert”，以期通知用户文本已更改，但没有运气：

<button aria-label="failure"><span role="alert">Not Working</span></button>

我也尝试将按钮包裹在<div aria-live="polite"/>中，但我怀疑这不起作用，因为没有新元素添加到页面，而是元素的内容已更改。

提醒用户动态更改文字内容的好方法是什么？

谢谢！

Answer 1

你接近你的尝试。您可以使用aria-live并且是最合适的解决方案。您不必向DOM添加元素以使aria-live起作用。如果您使用默认的aria-relevant值，则更改元素的文本就足够了。 （如果未指定aria-relevant，则会将“添加文本”作为默认值。）

但是你必须将aria-live放在正在改变的元素上。在这种情况下，按钮本身。我尝试了以下内容并且工作得很好：

  <button onclick="myclick6()">change it</button>
  <button id='livebutton' aria-live="polite">Success!</button>

    function myclick6() {
      document.getElementById("livebutton").innerHTML = "Not Working";
    }

Answer 2

只需创建显示无的简单div。

<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>

之后动态地将值附加到上面的div。

中

$（ '＃dynamicText'）的HTML（ '成功'）。 要么 $（'＃dynamicText'）。html（'不工作'）;