如何在lightbox_me触发时设置DIV上的焦点？

Question

我有一个只有一个可聚焦元素按钮(关闭按钮)的div，当lightbox打开时，焦点应该在div上。当我按tab键时，焦点应该转到“关闭”按钮。

根据断言技术(盲人用户)，关闭按钮应该在DOM的底部，这是当lightbox触发时DIV应该成为焦点的原因之一。

我已经设置了

<div id="div-id"  role="dialog"  tabindex="-1" aria-labelledby="operations-help">

在jQuery集合中：

$('#div-id').lightbox_me({
     destroyOnClose: true,
     onLoad: function() {
         $('#div-id').focus();
     }
 });

但是焦点只设置在关闭按钮上，有什么方法可以在DIV上设置焦点吗？

谢谢

Answer 1

div不能获取焦点afaik。如果div有一个按钮，您可以调用

$('#div-id button').focus();

或者，如果我误解了，div是按钮，可以将div更改为按钮，或者提交输入应该允许聚焦。

Answer 2

使用

window.location.hash = '#div-id';

这将滚动到该元素，实质上是聚焦它。

所以最后，

$('#div-id').lightbox_me({
     destroyOnClose: true,
     onLoad: function() {
         window.location.hash = '#div-id';
     }
 });

我想这应该行得通。

Answer 3

div不是可聚焦的元素。

一种可能的解决方案是在div的某个角落设置一个尺寸为1px * 1px的按钮/链接，并将焦点放在该按钮/链接上。

然后可以在该按钮上设置aria-labelledby，而不是整个div :)

如果有效的话，一定要让我知道。如果使用链接，请确保将href设置为#。

您也可以添加一个按钮并将其隐藏。不使用display: none，但使用z-index，因此它仍然是可选的。