javascript - 辅助功能 - 失去焦点，我应该强制焦点下一个可聚焦吗？

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> 的多个实例绝对不推荐元素。