Audio control

This criterion is primarily for the benefit of people using screen readers, but I think it benefits all of us in a way. The criterion states:

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Personally, I find it really annoying when I load a web page and some audio starts playing without me wanting it to. It's even worse when I'm in a quiet environment and I can't quickly stop it. I can only imagine what it is like when someone is listening to a screen reader for content and the screen reader gets obliterated by some unwanted sound on the page.

Audio on user request

One of the ways that WCAG suggests to meet this criterion, is by playing sounds only on user request. I think this is by far the best solution.

Using standard HTML, it is easy to give the user full choice about whether they play audio and at what volume level. Let's look at an example:

This audio track is an eight second news intro soundtrack. There is no speech, just lively music.

Here is the code that I used to create this:

<audio controls>
   <source src="Audio/news-loop.wav" type="audio/wav">
</audio controls>

The controls attribute adds the audio controls, such as: play, pause, volume and playback speed.

Audio turns off automatically within three seconds

Another acceptable way to meet this criteria is to keep the audio under three seconds. I was going to explain how that works but in doing so, I discovered that autoplay now doesn't work in Chromium browsers, so there doesn't seem much point... which is good, I think.

Provide controls near top of page

Finally, if you absolutely insist on playing audio automatically, you must provide a clear way, near the top of the page, for users to stop it, if they want to. Again, I won't go into this because most people now use Chromium browsers, which makes this a bit pointless. It's easier to just go back to the first example and say give users full control. Why wouldn't you?