Can I use aria-expanded
on a link element (anchor) with its focus or hover state? So when a user hovers or focuses using a keyboard on the link, the aria-expanded should turn to true, and when hover or focus is removed, it should turn to false.
From what I have read, I could not really find an explicit answer except this link, which says that it should only be used on click, not on focus.
You use aria-expanded
on an element that 'expands' another item such as a fly-out menu or accordion.
It isn't appropriate for showing if something is focused / hovered, it is designed for things that get 'activated' (so a button
is the normal use case, a link <a>
is sometimes acceptable if you are using it as a fallback for no JavaScript).
In the example you give it is unclear whether you are exposing a sub-menu on hover or focus and that is why you want to use aria-expanded
.
If you aren't then no don't use aria-expanded
.
If you are I would recommend changing the menu so that when you click it leaves the menu open (as you should do anyway for touch devices) at which point aria-expanded
is appropriate on click.
In the above example the screen reader would announce on focus the current state as collapsed
when you first encounter it, so the expected behaviour is to press space or enter and it change the status to aria-expanded="true"
and announce expanded
letting the user know they have revealed some additional information (which should be the next tab stop once activated).
You can still have the menu reveal itself to users who are using a mouse on hover.