Question

我的任务是创建一个可访问/响应式轮播，并在 Chrome 中遇到有关隐藏元素焦点的问题。

按照这个jsfiddle（http://jsfiddle.net/ft1oosep/）;如果您选中，直到隐藏元素获得焦点，您将看到链接被提升到视图中，而不更新元素的css属性。

对于旋转木马，这会导致问题，因为我需要跟踪旋转木马在任何给定时间的位置。我试图模糊焦点，但即使这样也为时已晚。是否有一个简单的解决方案来解决这个问题，或者我是否会开发一些复杂的焦点/标签管理？

提前致谢

（拜托，没有回复表明旋转木马是一个坏主意......它的任务我已经设定好了）

示例代码：

<style>
    body {
        background-color: #f2f2f2;
        font-family: 'Arial';
        font-size: 13px;
    }

    div {
        width: 200px;
        height: 200px;
        overflow: hidden;
        background-color: #ffffff;
    }

    a {
        width: 200px;
        height: 200px;
        text-align: center;
        background: #A6C6DD;
        display: block;
        color: #ffffff;
        text-decoration: none;
    }

    a:last-child {
        background: #746F9E;
    }
</style>
<p>Pressing tab forces hidden link into view.</p>
<div>
    <a href="#">Visible Link</a>
    <a href="#">Hidden Link</a>
</div>

Answer 1

在第一个链接变得模糊后添加带有js的节点会有什么帮助吗？因此，当旋转木马正在运行时，那里没有任何节点，直到标签为止。

Answer 2

就我而言，我添加了一个动态tabindex属性，这样当隐藏的可标签元素为tabindex="-1"时（阻止所有标签），当可见时它变为{{1} }（在普通浏览器选项卡顺序中可以选项卡）。

代码可能特定于实例，但通常，在渲染时将problmatic元素的tabindex="0"属性设置为tabindex，然后在使problmatic元素显示为set { {1}}在该元素可见时（并返回tabindex =“ - 1”`再次隐藏）。

辅助功能注意事项：除{-1（禁用标签）或0（正常标签流）以外的任何内容都应该用于tabindex="-1"值。

是否可以防止隐藏元素在焦点上跳入视图

2 个答案: