用jquery重新调整元素

我在我的页面上有一个测验，基本上是一个问题的h1和一个列表中的4个按钮。用jquery重新调整元素

无障碍我有每个按钮的咏叹调标签，当用户点击错误的答案我添加'不正确的答案'的咏叹调标签。为了帮助用户理解他点击了错误的答案，我想重新关注按钮，以便用户知道这是不正确的。

我的问题是，如果焦点已经在按钮上，屏幕阅读器不会'重读'这个按钮。

<h1>this is a question</h1> 
<ul> 
    <li><button id="answer_a" aria-label="answer a">this is answer a</button></li> 
    <li><button id="answer_b" aria-label="answer b">this is answer b</button></li> 
    <li><button id="answer_c" aria-label="answer c">this is answer c</button></li> 
    <li><button id="answer_d" aria-label="answer d">this is answer d</button></li> 
</ul> 

$('#answer_a').on('click', function(){ 
    $(this).attr('aria-label', 'incorrect_answer').focus(); 
});

https://jsfiddle.net/koL51nxu/

来源

2017-01-01 user2587454

您在'click'事件后遗漏了''''。另外，你的问题似乎还不清楚，至少对我来说。你可以请一个小提琴演示你的问题，所以我可以帮忙吗？现在，您只有第一个按钮附加了点击事件，这有点令人误解。 – Ionut

我加了jsfiddle。我会尝试清除我的问题：我使用配音使我的测验可以访问，当用户专注于一个按钮时，语音读取咏叹调标签。当他点击错误的答案时，咏叹调标签会发生变化，但是声音不会读取新的咏叹调标签，直到我将焦点从背面按下并重新输入。 – user2587454

我不明白你想要什么效果.. –

可以使用disabled属性这一点。

$('#answer_a').on('click', function(){ 
 
    $(this).attr('aria-label', 'incorrect_answer'); 
 
\t $(this).attr('disabled', 'disabled'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<h1>this is a question</h1> 
 
<ul> 
 
    <li><button id="answer_a" aria-label="answer a">this is answer a</button></li> 
 
    <li><button id="answer_b" aria-label="answer b">this is answer b</button></li> 
 
    <li><button id="answer_c" aria-label="answer c">this is answer c</button></li> 
 
    <li><button id="answer_d" aria-label="answer d">this is answer d</button></li> 
 
</ul>

jsfiddle

更改功能$('#answer_a')到$('ul li button')会降低你的代码。因此，不需要再次为每个按钮编写代码 - example

来源

2017-01-01 13:14:06 Advaith

OP为什么禁用该按钮？ – epascarello

谢谢大家。

我发现使用：blur()之前，重新调整帮助我。

来源

2017-01-01 13:45:00 user2587454

用jquery重新调整元素

回答

相关问题