0

I'm developing an App for disabled people to make any website accessible to them. One of the features is Keyboard Navigation using the TAB key.

Problem is that there are dropdowns that are depending on :hover states, and from investigating other Stackoverflow questions, simulating :hover state is just not possible. (Although Chrome has this feature built-in the developer tools so maybe it is?).

My solution is a JS solution. When a LI element has inner lists, I add a class to the root level and set display, visibility and opacity all to show. This works really really well, except for when websites coded the drop downs is such a way that the entire thing is depending on :hover for example:

li:hover > ul { display: block; position: absolute; width: 100%; } ...

if the've coded many attributes to the hover state, instead of just the display / visibility / opacity, the dropdown in my method will show, but without its real design. This is not the end of the world, but disabled people deserve to use websites as intended.

So, I'm looking for a solution to either really simulating a :hover state, or, to copy the entire styles of the hover state and bind them to my class.

Note that styles of inner and long selectors such as - li:hover ul li div p {} - should also be copied (obviously) so using $el.css() may not be that easy.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Danigoodw
  • 379
  • 3
  • 10
  • Use `$("li").trigger('hover')` – yaakov Mar 29 '18 at 22:15
  • No way to setup a new navigation that allows clicking to expand your dropdowns? This website does not sound very mobile friendly either. – David Lee Mar 29 '18 at 22:30
  • Simply put, it can't be done. Programmatic mouse events are not and cannot be trusted. The general idea is that the browser should do what the user wants to do with the webpage, not what the webpage wants to do with the user. See [this answer](https://stackoverflow.com/a/17226753/1891677). How Chrome triggers hover programmatically (in dev tools): they invested their tools with the same level of trust as the user. But it's outside of webpage scope, you can't access it from page and ask: *"tell Chrome the user hovered/clicked"*... – tao Mar 29 '18 at 22:57
  • If I was trying to achieve what you are trying to achieve I'd ask Google for help directly. Considering their level of implication in **a)** the most popular browser on the market and **b)** the most popular OS for mobile devices on the market, it's pretty clear they are capable of helping. Given the good intentions of your endeavor, you might get a lot more help than you expected. I'd say not trying would be the bigger loss here. – tao Mar 29 '18 at 23:06
  • Can you please explain why you don't mention the [`:focus` selector](https://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes) anywhere? This is roughly the keyboard equivalent of `:hover`. See also [menu](https://www.w3.org/TR/wai-aria-practices/#menu) in the WAI-ARIA Best Practices. – Tsundoku Mar 31 '18 at 09:58

0 Answers0