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

Question

我正在创建大表单，并会在部分之间提供按钮导航以实现可访问性。

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

但是，当您切换部分时，display CSS 属性会隐藏当前部分（并显示下一个部分），因此刚刚使用的按钮不再是焦点，因为它不可见。

查看 this JSFiddle 或下面的代码以了解问题。

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

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

---

我的解决方案是在打开的部分找到最接近的可聚焦（这很糟糕，因为我使用类，因为第一个可聚焦的可以输入另一个按钮）并聚焦它：

JSFiddle或添加到JQuery：

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

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

所以它看起来像：

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

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

但我不确定它是否正确，这不会让用户通过可聚焦元素导航感到困惑吗？
也许我应该换一种方式？

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

提前感谢您的建议！

Answer 1

我相信您发现了可用性问题，而不是可访问性问题。我会用这些部分的展开/折叠切换替换下一个和上一个按钮。这将立即解决您的可访问性问题（因为这些按钮将始终可见）并且它将是用户熟悉的 UI 模型并解决（我认为是）非标准且令人困惑的交互模型。

这是您为此实现更新的 JSfiddle（您可能会找到比我使用的更好的图标）http://jsfiddle.net/zwLLrg9d/7/

我也对此进行了更改，以便正确使用分段内容。绝对不推荐<header> 元素的多个实例。