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

我要你帮助我，我完全陷入了这个问题。

我想让我的代码可以通过键盘导航，并可以应用于屏幕阅读器设备。但是我有几个问题。

这是我在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并按Enter（或空格）时，按钮被更改，但是它失去了焦点。如您所见，我尝试将其集中在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();
}

我为自己感到骄傲:)

最佳答案

我没有屏幕阅读器，因此进行测试很棘手，但是与更改按钮而不是专注于按钮本身相比，更改按钮可能会更好。

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

关于javascript - JavaScript生成的代码和屏幕阅读器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34808205/