Question

我有一个组件，在悬停时会显示一个按钮和一个可以单击的链接。这不是菜单......只是页面中间的一个方框。

对于辅助功能，我希望用户能够标记到容器中（现在发生，并在.HiddenUntilHover类中显示内容）并继续选项卡到显示的按钮和链接悬停/聚焦状态。

现在你可以专注于容器并看到悬停状态;但是，当你选中它时它只是转到下一个元素，并且不允许你选择按钮或链接到悬停状态。

伪代码示例：

/* My component .jsx */
<div tabIndex="0" className="MainContainer">
 <div className="SomeOtherClass">
   <div className="HiddenUntilHover">
     /* I would like to be able to tab to these clickable things! */
     <button>Click me!</button>
     <a href="...">I am also clickable</a>
   </div>
 </div>
</div>

我的SCSS：

.HiddenUntilHover {
  display: none;
}

MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
    display: block
}

Answer 1

当该框处于焦点时，进一步选中该按钮将使该框模糊，这将隐藏它及其内容，因此焦点将移动到下一个可访问的元素。我认为这是你正在经历的行为。

您可以考虑在框成为焦点时使用aria-activedescendant或tabindex属性。这需要一点点javascript。

严格来说，您不需要依赖悬停状态来使该控件可访问。你可能有一个非隐藏（display:none）框的DOM子项的屏幕外（或剪辑）按钮/链接。如果您采用这种方法，请阅读aria-owns属性。

只要它被标记为按钮或链接（或具有tabindex="0"设置），并且不是真的＆＃39;隐藏，它应该可以标记到它。

Answer 2

尝试增加类MainContainer的属性例如。

.MainContainer {
  width: 100%;
  height: 100px;
}
.MainContainer .HiddenUntilHover {
  display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
  display: block;
}

Answer 3

悬停时出现的元素本质上是无法访问的。您遇到代码问题的一个方面，难以使键盘可访问。但是考虑一下没有真正悬停概念的触摸屏：有没有办法在手机或平板电脑上触摸你的按钮？

对于一个更务实的答案，如果你需要继续悬停，一个比已经发布的两个解决方案更少的hacky解决方案可能如下：使用focusin和focusout事件。有关焦点/模糊的说明和差异，请参阅示例this question，以及浏览器兼容性this w3school doc。您将不得不以不同方式构建HTML，例如：

<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->

除了使用一点js：

$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));

使用相应的.keep-visible类，它将使元素显示：block（我不是CSS专家，我让你编写代码）。

总体功能如下：当#outer中的某个元素占据焦点时，focusin元素由于冒泡而被触发。在这种情况下，你将你的类.keep-visible放在一起，使元素保持可见。当焦点离开#outer中的最后一个元素时，会触发focusout事件。此时，您将删除.keep-visible类，这会使元素消失。

根据上面的链接，onfocusin / out不是标准的，但是包括IE在内的所有主流浏览器都支持。 Firefox是最后一个在52.0中实现它的人，所以它是一种事实上的标准;我们可以合理地预期它不会很快消失。

悬停状态下的选项卡可访问性

3 个答案: