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

Question

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

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

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

我正在尝试找到一种方法来提醒用户按钮的内容更改。到目前为止，我已经添加了 aria-labels 来读取“成功”或“不工作”标题，但只有当用户按 Tab 键/从按钮移开，然后在状态结束后返回到按钮时，这些标题才会读取给用户。改变了。

我还尝试将按钮的文本包装在<span>带有 role="alert" 的 a 中，希望能通知用户文本已更改，但也没有运气：

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

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

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

谢谢！

Answer 1

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

但你必须穿上aria-live正在变化的元素。在本例中，为按钮本身。我尝试了以下方法，效果很好：

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

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