[megaduck]

<BEGIN PSA> Please, please, please, do not use hover controls. They are useless for touch users as well as screen readers, and the discoverability is poor.

Modals are also really really hard to make accessible, and are often confusing. If you MUST use modals, please use a well-vetted library instead of rolling your own.

There's a lot of things that look really cool but make life difficult for people that aren't you. We appreciate your consideration when you build your UX. <END OF PSA>

[tasogare]

Visual Studio Online use the hover pattern for some buttons. I hate it because it’s make hard to remember what the options are and hard to click on them. Design over function are sadly the norm nowadays.

[omgtehlion]

I would add: even if you design only for desktops and discoverability is not an issue, PLEASE do not use slow animations for hover controls to appear.

[TeMPOraL]

At least in case of tablets with pens/styluses (like the Surface line or Dell Latitudes), the device can recognize when you're hovering over something with a pen. It meshes nicely with the mouse-oriented design. I wish there was a way for touchscreens to detect hovering fingers, then on-hover controls could be useful on phones and penless tablets.

[yoran]

Is there a reliable way to detect touch screens and screen readers?

This way, you can enable hover controls only if the user is not on a touch screen or a screen reader.

[joekrill]

It's not really a clear distinction, though. I have a laptop that has a touchscreen, but also a regular touchpad and sometimes I use an actual mouse with it. Sometimes I touch the screen if it's easier even if I have a mouse connected. I also sometimes remote into it. Then there's my tablet: I can use a bluetooth mouse with that if I want. Or an external touchpad.

[yoran]

I imagine I'd err on the safe side. If the screen has touch functionality (includes laptops with touchscreen), then don't do actions on hover. Is there a way to reliably detect the existence of touch functionality through the browser?

[Grumbledour]

At least for screen readers, they can work really well as long as you avoid display or visibility properties to hide them. Just position absolute and left: -999em will hide them visually but still let the screen reader 'see' them.

Of course, this will still not really help with touch devices.