html - 嵌套元素的 WCAG 可访问性问题

Question

我在 ( <div>) 中有几个框的网格。每个框内都有一个包含一对/多个链接的列表(简单的 ul li 列表，包含 <a> 元素)。这个链接列表是隐藏的，它只在悬停时显示。

它工作得很好，但我有可访问性问题，即我无法使用“tab”键进入任何列表元素(框 <div> 工作正常，它获得焦点，所以列表显示)，它只是跳到下一个框元素。我试过添加 tabindex在每个盒子和里面的每个列表元素上，但这似乎不是解决方案。

是否有任何 CSS/HTML 解决方案？我当然可以编写简单的 JS，它将检查焦点在哪里以及焦点是否具有带焦点选项的父级，但我想尽可能避免它。

Answer 1

• 你是如何隐藏链接列表的？使用 display: none 或使用 visibility: hidden。 (并且您仅将此应用于列表元素还是也应用于 div？根据您的描述，我猜它仅适用于列表元素。)使用 display: none 隐藏的内容不是键盘无障碍。
• 为了使列表在悬停时显示，您使用的是 JavaScript 事件处理程序还是 CSS？如果您使用的是 JavaScript，您可能需要添加一个响应键盘事件的事件监听器(例如 onfocus，但如上所述，使用 display: none 隐藏的内容不会' t 接收焦点)。在 CSS 中，我总是建议在使用 :hover 时添加 :focus 伪类(除非你想为这些东西使用不同的样式)。
• 您可能需要编写一些 JavaScript 来在父级 div 获得焦点时切换列表的可见性。 (如果你在 div 元素上有 tabindex，正如你所说，它们应该已经能够获得焦点。)