Question

我的页面上有一个测验，基本上是问题的h1和列表中的4个按钮。

对于辅助功能我每个按钮都有aria-label，当用户点击错误答案时，我为aria-label添加了'错误答案'。为了帮助用户理解他点击了错误的答案我想重新关注按钮，这样用户就会知道这是不正确的。

我的问题是，如果焦点已经在按钮上，则屏幕阅读器不会“重读”此按钮。

<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/

Answer 1

您可以使用disabled属性。

$('#answer_a').on('click', function(){
  $(this).attr('aria-label', 'incorrect_answer');
	$(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

Answer 2

谢谢大家。

我发现在重新聚焦帮助我之前使用：blur()。

用jquery重新聚焦元素

2 个答案: