我请你帮助我,我完全坚持这个问题。
我想让我的代码可以通过键盘导航并可以用于屏幕阅读器设备。但我有几个问题。
这是我在JS中的代码:
function changeText()
{
document.getElementById('div1').innerHTML = '<input id="btn2" type="button" onclick="changeText2()" value="Change Text2" />';
document.getElementById('btn1').setAttribute("aria-hidden",true);
document.getElementById('div1').focus();
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input id="btn3" type="button" onclick="changeText()" value="Change Text" />';
document.getElementById('btn1').setAttribute("aria-hidden",true);
}
和HTML:
<div id="div1">
<input id="btn1" type='button' onclick='changeText()' value='Change Text'/>
</div>
当我在带有键盘的窗口中导航到btn1
时(使用标签页),然后按回车键(或空格键)按钮被更改,但它失去焦点。正如您所看到的,我尝试将其集中在JS上,但没有结果。我也尝试使用tabindex
标记,但也没有帮助。我希望它在按下时能够被聚焦,因此屏幕阅读器可以更容易导航和访问。
请帮忙!
焦点已在使用James Long解决方案的按钮上进行了测试,它确实有效!
但是,应删除btn.setAttribute('aria-hidden', true);
。
我得到了它,哈哈!为了让我的示例正常工作,我应该专注于btn2
而不是btn1
。这太傻了!所以,它如下:
function changeText()
{
document.getElementById('div1').innerHTML = '<input id="btn2" type="button" onclick="changeText2()" value="Change Text2" />';
document.getElementById('btn2').focus();
}
function changeText2()
{
document.getElementById('div1').innerHTML = '<input id="btn1" type="button" onclick="changeText()" value="Change Text" />';
document.getElementById('btn1').focus();
}
我为自己感到自豪:)
答案 0 :(得分:1)
我没有手持屏幕阅读器,所以测试它很棘手,但你可能更幸运更换按钮而不是更换它并专注于按钮本身。
<div id="div1">
<button type="button" id="btn1">Change Text</button>
</div>
然后你的JS:
document.addEventListener('DOMContentLoaded', function () {
function changeText(btn) {
btn.textContent = btn.textContent === 'Change Text'
? 'Change Text2'
: 'Change Text';
btn.setAttribute('aria-hidden', true);
btn.focus();
}
document.getElementById('btn1').addEventListener('click', function (e) {
changeText(e.target);
}, false);
}, false);
答案 1 :(得分:0)
将焦点放在按钮上:
$("#btn1").focus();
纯粹的JS:
document.getElementById('btn1').focus();