可访问性-失去焦点，我应该强迫焦点下一个焦点

我正在创建一个大表单，并将在各节之间提供按钮导航，以方便访问。

这意味着你可以通过按钮导航展开/折叠下一节或上一节。

然而，当你切换section时，当前section被display CSS属性隐藏(下一个显示)，所以刚刚使用的按钮不再集中，因为它不可见。

看一下这个JSFiddle或下面的代码来理解问题。

<a href="#">An anchor</a>
<article>
    <header>First box</header>
    <main>
        This is first box.
        <label><input type="radio" class="focusable" />This is input</label>
        <button class="next focusable">Next box</button>
    </main>
</article>
<article class="box-hidden">
    <header>Second box</header>
    <main>
        This is second box.
        <button class="focusable">Extra button</button>
        <label><input type="radio" class="focusable" />This is input</label>
        <button class="prev focusable">Previous box</button>
        <button class="next focusable">Next box</button>
    </main>
</article>
<article class="box-hidden">
    <header>Third box</header>
    <main>
        This is third box.
        <label><input type="radio" class="focusable" />This is input</label>
        <button class="prev focusable">Previous box</button>
    </main>
</article>
<a href="#">An anchor</a>

.box-hidden main {
    display: none;
}
/* Only cosmetic below */
article { background: #ddd; margin: 10px 0; }
header { background: #ccc; }
button:focus { outline: 2px solid blue; }

$( 'body' ).on('click', '.next', function( event ) {
    event.preventDefault();
    var next = $( this ).closest( 'article' ).next( 'article' );
    $( 'article' ).addClass( 'box-hidden' );
    $( next ).removeClass( 'box-hidden' );
});
$( 'body' ).on('click', '.prev', function( event ) {
    event.preventDefault();
    var prev = $( this ).closest( 'article' ).prev( 'article' );
    $( 'article' ).addClass( 'box-hidden' );
    $( prev ).removeClass( 'box-hidden' );
});

当您使用下一个或上一个按钮时，焦点会丢失，您必须从页面开始重新开始。这是不可能的。

我的解决方案是找到最近的可对焦(这很糟糕，因为我使用类due第一个可对焦可以输入另一个按钮)在打开部分并对焦它:

JSFiddle或添加到JQuery:

$( next ).find( '.focusable' )[0].focus();

在两个函数结束时，类似地将第二个函数中的$( next )替换为$( prev )。

所以它看起来像:

    //[...]
    $( next ).removeClass( 'box-hidden' );
    $( next ).find( '.focusable' )[0].focus();
});

但是我不确定它是正确的方式，它不是通过可聚焦的元素混淆用户导航吗?
也许我应该用另一种方法?

注意:按钮是JS附加的，所以非JS用户不要使用它们。

提前感谢您的建议!