我正在处理元素的可访问性问题。我需要隐藏此元素,以便用户无法单击/点击它,但必须禁用该事件。我不想禁用它,因为如果禁用了画外音功能将无法触发该事件。我在css以下使用,但是仍然有一个无法消除的小区域。
position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;
到目前为止我尝试过的是:
visibility:hidden;
z-index: -1;
onmousedown
它不起作用,我想要:(
编辑 - - - - - -
因此,我尝试使用CSS并在下面添加内容,以简单地重新定位select元素,并最大程度地减少用户单击/点击它的机会:
left: 0;
top: -36px;
z-index: 100;
因此,仍然存在一个命中区,但是几乎不可能有人点击它。画外音可以与此同时存在,并且不会改变用户的任何行为。
最佳答案
如果您使用的是引导程序,则可以尝试使用“仅sr”类。
如果不是,那么从中“借用”样式不会有任何危害:
.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中找到更多信息