CODEWITHSUNDEEP
javascripthtmlcssaccessibility
habibg
habibg

Reputation: 185

Hide element from user click without disabling the event

I'm working on a accessibility issue with an element. I need to hide this element so users can't click/tap it but without disabling the event. I don't want to disable it because voiceover will not be able to trigger the event if it's disabled. I'm using below css but there is still a small hitzone that I can't get rid of.

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

What I have tried so far:

It doesn't work as I would like :(

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

So I tried to play around with the css and added below to simply relocate the select element and minimize the chance users will click/tap on it:

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

So there is still a hitzone but it's nearly impossibly for someone to click/tap it. Voiceover can live with this and it doesn't change any behavior for users.

Upvotes: 0

Views: 108

Answers (3)

Craig Brett
Craig Brett

Reputation: 2340

If you're using bootstrap, you could try using the class "sr-only".

If not, well, there's no harm in "borrowing" the style from that:

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

I borrowed this sample from this answer since I haven't got the bootstrap source to hand but it looks accurate to me.

You can find out more from the Bootstrap accessibility page

Upvotes: 1

Kishu Agarwal
Kishu Agarwal

Reputation: 388

Why don't you just make the element transparent. That way users' won't be able to click or tap on it, and you will still get the events.

Upvotes: 0

Loveneet Saini
Loveneet Saini

Reputation: 116

Have you tried display:none . Give it a shot. If not, please post your code here, so we can see the actual problem.

Upvotes: 0

Related Questions