In many situations, too, a single control would not be made directly accessible. The element that contains all the controls would be the accessible element, as in the following example:

<div role="group" tabindex="0">
    <img role="button" … />
    <img role="button" … />
</div>

Access to the individual controls inside the grouping div would be script-enabled. This would allow the reader to quickly skip past the control set if they aren’t interested in what it does (otherwise they would have to tab through every control inside it).

A last note for this section concerns event handlers. Events are what are used to trigger script actions (onclick, onblur, etc.). How you wire up your events can impact on the ability of the reader to access your controls, and can lead to keyboard traps (i.e., the inability to leave the control), so you need to pay attention to how you add them.

We could add an onclick event to our image button to start playback as follows:

<img src="controls/start.png"
        id="audio-start"
        alt="Start"
        role="button"
        tabindex="0"
        onclick="startPlayback('audio01')"/>

But, if we’d accidentally forgotten the tabindex attribute, a reader navigating by keyboard would not have been able to find or access this control. Even though onclick is considered a device-independent event, if the reader cannot reach the element they cannot use the Enter key to activate it, effectively hiding the functionality from them.

You should always ensure that actions can be triggered in a device-independent manner, even if that means repeating your script call in more than one event type. Don’t rely on any of your readers using a mouse, for example.

But again, it pays to engage people who can test your content in real-world scenarios to help discover these issues than to hope you’ve thought of everything.