0

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:

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

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.

habibg
  • 185
  • 3
  • 15
  • pointer-events? – epascarello Mar 16 '17 at 17:19
  • Add some code so we can see the problem – Chiller Mar 16 '17 at 17:19
  • or aria labels? – epascarello Mar 16 '17 at 17:20
  • can you move it offscreen with left: -999em or does it need to be in view? – Darren Crabb Mar 16 '17 at 17:29
  • pointer-events also disable click for voiceover – habibg Mar 16 '17 at 19:03
  • also moving it offscreen will not because it goes out of viewport so again voiceover doesn't want to access it :( – habibg Mar 16 '17 at 19:05
  • Your problem makes no sense, you want to have a thing called 'voiceover' be able to click on it but not the user but from what I'm hearing voiceover seems to act like a user, so it sounds pointless to even do that. – Andria Mar 16 '17 at 19:44
  • 1
    You might want to explain the scenario more here - it's unclear why you'd want to make an element invisible but still visible to only VoiceOver users - is this some VoiceOver-only feature? – BrendanMcK Mar 17 '17 at 04:04
  • @BrendanMcK I don't think it's very realistic. This was a weird situation where the event triggered on the location so even if focus was on the select element the event was triggered on the pseudo element because it sit on top of the select element. I updated my question on include one way to get around this issue. – habibg Mar 24 '17 at 20:15

3 Answers3

1

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

Community
  • 1
  • 1
Craig Brett
  • 2,295
  • 1
  • 22
  • 27
  • That's interesting but I'm not using bootstrap. :( – habibg Mar 24 '17 at 20:28
  • You can use CSS without bootstrap, in spite of what some UI guys might tell you. You could take that class there and put it in your own css and use that on your elements and it should work well enough. – Craig Brett Mar 25 '17 at 13:49
0

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

Loveneet Saini
  • 106
  • 3
  • 16
0

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.

Kishu Agarwal
  • 378
  • 3
  • 8
  • Somehow the event gets triggered on the location so if users can't click/tap it then voiceover will not be able either. – habibg Mar 24 '17 at 20:14