时间戳

首页 > 解决方案 > 可访问性 - 提醒用户注意按钮内的动态文本更改

javascript - 可访问性 - 提醒用户注意按钮内的动态文本更改

问题描述

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

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

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

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

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

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

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

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

谢谢！

标签： javascripthtmlaccessibility

解决方案

你的尝试很接近。您可以使用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";
    }

推荐阅读