Is "<li>" different from "<a>" on hover in terms of accessiblity?

Issue

In optimizing accessibility for a website, I noticed the <li> is the hover state, not the <a>.

Is this a cause for concern?

I'm assuming it is better on the <a> as this is the target. However, W3 doesn't mention this at all.

W3 — Fly-out Menus tutorial suggests it is the <ul> that holds the hover state, and I think it would make sense from a design perspective (padding etc).

Solution

Just make sure that the list's hover state is "just" a visual cue, rather than actual content, and you should be fine either way.

Also, make sure that the hyperlink itself is well-formed - in particular check that it is keyboard operable - i.e. it should gain/lose focus with TAB, and support activation ("clicking") with ENTER. Make sure it has a meaningful accessible name (usually the link text, but often implemented as an image alt). These are much more important for accessibility than the hover effect.

If it's the list or the list item that get focus, and/or respond to clicking or keyboard input, then that's against the ARIA and HTML-AAM specs. (Lists and list items should be non-operable). By all means put a hover effect on what wraps the hyperlink if you need to, but the actual clicking/activation belongs on the hyperlink itself.

Answered By - brennanyoung