我正在创建大表单,并将在各部分之间提供按钮导航以实现可访问性。
这意味着您可以通过按钮导航来展开/折叠下一个或上一个部分。
但是,当您切换部分时,当前部分会通过 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 用户不要使用它们。
提前感谢您的建议!
最佳答案
我相信您已经发现了可用性问题,而不是可访问性问题。我将用这些部分的展开/折叠切换来替换下一个和上一个按钮。这将立即解决您的可访问性问题(因为这些按钮始终可见),并且这将是用户熟悉的 UI 模型,并解决(我认为是)非标准且令人困惑的交互模型。
这是针对此实现更新的 JSfiddle(您可能会找到比我使用的更好的图标)http://jsfiddle.net/zwLLrg9d/7/
我还对此进行了更改,以便正确使用分段内容。 <header>
的多个实例绝对不推荐元素。
关于javascript - 辅助功能 - 失去焦点,我应该强制焦点下一个可聚焦吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31632735/