JavaScript 生成的代码和屏幕阅读器

JavaScript generated code and screen readers

我请求你帮助我,我完全被这个问题困住了。

我想让我的代码能够通过键盘导航并适用于屏幕 reader 设备。但是我有几个问题。

这是我在 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>

当我仅使用键盘(使用选项卡)导航到 windows 中的 btn1,然后按回车键(或 space)时,按钮已更改,但它失去了焦点。正如你所看到的,我试图用 JS 来聚焦它,但没有结果。我也尝试使用 tabindex 标签,但也没有帮助。我希望它在按下时聚焦,这样导航起来会更容易,屏幕 readers 也可以访问它。

请帮忙!

编辑

已使用 James Long 解决方案在按钮上测试 Focus 并且有效!

但是,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();
}

我为自己感到骄傲:)

将焦点放在您的按钮上:

$("#btn1").focus();

在纯 JS 中:

document.getElementById('btn1').focus();

我手头没有屏幕 reader,因此很难对其进行测试,但你可能更幸运地更改按钮而不是替换按钮并专注于按钮本身。

<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);