隐藏用户点击的元素而不禁用该事件

Question

我正在处理一个元素的可访问性问题。我需要隐藏此元素，以便用户无法单击/点击它，但不会禁用该事件。我不想禁用它，因为如果被禁用，画外音将无法触发事件。我正在使用下面的CSS，但仍然有一个小的命中区，我无法摆脱。

position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;

到目前为止我尝试过：

• visibility:hidden;
• z-index: -1;
• onmousedown

它不能像我想的那样工作:(

EDIT ------------

所以我尝试使用css并在下面添加以简单地重新定位select元素并最小化用户点击/点击它的机会：

left: 0;
top: -36px;
z-index: 100;

所以仍有一个热门地区，但有人点击/点击它几乎是不可能的。画外音可以使用它，它不会改变用户的任何行为。

Answer 1

如果你正在使用bootstrap，你可以尝试使用类＃34; sr-only＆＃34;。

如果没有，那么，＆＃34;借款＆＃34;那个风格：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

我从this answer借了这个样本，因为我还没有拿到引导源，但它看起来很准确。

您可以从Bootstrap accessibility page

了解更多信息

Answer 2

您是否尝试过display:none。试一试。如果没有，请在此处发布您的代码，以便我们查看实际问题。

Answer 3

为什么不让元素透明化。这样用户＆＃39;无法点击或点按它，您仍然可以获得活动。