我正在努力提高按钮的可访问性,该按钮可以测试连接。如果连接成功,则按钮文本更改为“成功”。如果没有,则改为“不工作”。它们看起来是这样的:
<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"/>
中,但我怀疑这不起作用,因为没有向页面添加新元素,而是元素的内容发生了变化。
什么是提醒用户动态变化的文本内容的好方法?
谢谢!
发布于 2018-06-12 13: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";
}
发布于 2018-06-08 05: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
复制相似问题