web accessibility - play audio on button hover

Question

i have a few buttons on my site with audio playing on button hover. i have main sound on/off toggle button on my navbar. my question is if it's accessible to play an audio on mouse hover and not on button click? since the user doesn't expect to hear sound when hovering on an element.

i can't find anything on wcag site about play on hover. nothing but this https://www.w3.org/TR/WCAG21/#audio-control

Answer 1

What an interesting question!

Short answer

Don't play sounds on hover automatically without the user explicitly setting the sound to "on" on the site first.

This isn't just an accessibility issue this is a user experience issue, playing sounds without asking permission first is a terrible practice as your user may be reading your page in a library or on a train and will not expect sounds.

If you really want sounds on your site I would suggest a popup on site load that allows a user to enable sounds if they wish.

Longer Answer

Does playing a sound on hover break any rules in the WCAG?

There is no specific guidance as far as WCAG is concerned as to whether a sound can play on hover.

However there is a lot of general guidance that is very closely related that although doesn't specifically mention this scenario is close enough that we can infer whether or not this is a good idea.

I would recommend referencing guidance G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically, guidance G60: Playing a sound that turns off automatically within three seconds and guidance G171: Playing sounds only on user request

You will see there is a common theme, give users the choice as to whether they want sounds and if you do play sounds automatically make sure they don't last more than 3 seconds.

There is also one other thing to consider

The unspoken rule(s) of accessibility

These aren't hard and fast rules but in accessibility there are two things applicable to this question you should always strive to adhere to.

1. Follow Expected practices

Navigating the web I expect to see certain things. If I click a link I expect the page to change, if I click on a picture I expect either nothing to happen or that image to pop up in a lightbox or open in a new page.

Expected behaviour is a key part of accessibility for all sorts of people with disabilities, but especially those with anxiety disorders and those with cognitive impairments.

Having a sound play on hover could startle, scare or confuse certain people or be very distracting for others (e.g. someone with ADHD or Autism).

2. Try to offer the same experience to all users.

The other thing you are doing wrong is offering a different experience to different users.

If someone has mobility issues / accuracy issues (e.g. Parkinson's Disease or Cerebral Palsy) then they may use a keyboard instead of a mouse and will not hear the sounds that mouse users experience on hover.

For this reason if you implement sounds make sure they fire on both the focus state and hover state.

So with all of the above in mind what should you do?

The simplest answer is not to have sounds at all, but you may have a good reason you want sounds on hover / focus.

So the first thing you should do is give your visitors a choice when they first land. Do they want sounds on the site or not.

Instead of switching it on automatically people should explicitly tell you that they want sounds to be played on the site. If they dismiss the message assume they do not want sounds.

This will also help screen reader users etc. as not every screen reader user uses a keyboard (for example someone with severe Dyslexia may hover over items to have them read out loud, your sounds on hover would interfere with that).

The second thing you should do is make sure that no sound plays when over your switch to turn sounds off (in case someone switched them on by mistake), or at least make sure that sound is less than 3 seconds if you really must have a sound. For all other buttons / links etc.

I would probably say make sure sounds last no more than 3 seconds, although one scenario where this may be allowed is if hovering a link previews an audio file. If this is the case I would make sure that when someone decides to enable sounds it is clearly stated that some links may play audio for more than 3 seconds.

The final thing you should do is make sure that sounds are played on hover and on focus. You should give your keyboard users the option to enjoy the same experience as mouse users if they want.

Finally - reconsider using sound. It is likely just going to annoy your users anyway as hearing a sound every time I hover an interactive element is soon going to get frustrating if I have been on your site for more than a minute.

Obviously there will be valid use cases for sound on hover, but there are probably very few of them.