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>元素的多个实例。

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

1 个答案: