可访问性-提醒用户注意按钮内的动态文本更改。
我正在努力提高按钮的可访问性，该按钮可以测试连接。如果连接成功，则按钮文本更改为“成功”。如果没有，则改为“不工作”。它们看起来是这样的：
<button aria-label="success">Success!</button>
<button aria-label="failure">Not Working</button>我试图找到一种方法来提醒用户按钮的内容变化。到目前为止，我已经添加了aria标签来读取“成功”或“不工作”标题，但是只有当用户选项卡/移动离开按钮，然后在状态改变后再回到它上，这些标签才会被读取给用户。
我还尝试用<span>将按钮的文本包装为role=“警报”，希望能通知用户文本已经更改，但也没有任何结果：
<button aria-label="failure"><span role="alert">Not Working</span></button>我也尝试过将按钮包装在<div aria-live="polite"/>中，但我怀疑这不起作用，因为没有向页面添加新元素，而是元素的内容发生了变化。
什么是提醒用户动态变化的文本内容的好方法？
谢谢!
回答 2
Stack Overflow用户
发布于 2018-06-12 21:33:31
你已经接近你的尝试了。您可以使用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";
}Stack Overflow用户
发布于 2018-06-08 13:35:19
只需创建简单的div与显示无。
<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>
之后，动态地追加上述div中的值。
$(‘#dynamicText’).html(‘成功’)；$(‘#dynamicText’).html(‘不工作’)；
https://stackoverflow.com/questions/50746970
复制相似问题
腾讯云开发者
