可访问性-失去焦点，我是否应该将焦点下一个焦点对准？

问题描述

我正在创建大型表单，并将在各部分之间提供按钮导航以实现辅助功能。

这意味着您可以通过按钮导航来展开/折叠下一个或上一个部分。

但是，当您切换节时， display CSS属性会隐藏当前节（并显示下一个节），因此仅使用的按钮将不再显示焦点。

看一下下面的或代码，以了解问题。

HTML：

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

CSS：

.box-hidden main {
    display: none;
}

/* Only cosmetic below */

article { background: #ddd; margin: 10px 0; }
header { background: #ccc; }

button:focus { outline: 2px solid blue; }

jQuery的：

$( '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' );
});

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

我的解决方案是在打开的部分中找到最接近的可聚焦对象（它很烂，因为我使用的类由于第一个可聚焦对象可以先输入另一个按钮）并对其进行聚焦：

或添加到JQuery：

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

在这两个函数的末尾，类似地在第二个函数中将$( next )替换$( next ) $( prev ) 。

因此它看起来像：

    //[...]
    $( next ).removeClass( 'box-hidden' );

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

但是我不确定这是正确的方法 ，是不是使用户无法通过可聚焦的元素来进行导航？
也许我应该另辟？径？

注意：按钮是由JS附加的，因此非JS用户只是不使用它们。

在此先感谢您的建议！