Can each non-time-based medium be operated with the keyboard and any pointing device?
A user navigating by keyboard arrives at a 3D virtual tour or interactive SVG animation: if the control buttons respond to neither Tab nor Enter, this content is completely inaccessible to them. A complete exclusion.
This criterion applies to non-temporal media: interactive vector animations, 3D virtual tours, WebGL or Three.js scenes, proprietary technology content. Each control function must satisfy two conditions. It must be accessible: the user can target it with the keyboard (Tab or arrow keys). It must also be activatable: Enter or Space must trigger the expected action. These two conditions are the subject of separate tests: 4.12.1 for accessibility, 4.12.2 for activation.
If the component cannot be made accessible (third-party technology without keyboard API), an equivalent alternative on the same page is sufficient. This alternative must perform exactly the same action and itself be fully controllable by keyboard. A partial alternative does not validate the criterion.
Flash has disappeared, but these media have not all disappeared with it. 3D product configurators, interactive SVG animations and immersive virtual tours remain within the scope of your audits.
2 tests to verify keyboard control of non-temporal media
Keyboard accessibility of non-temporal media controls
- Identify all non-temporal media on the page (interactive SVG, 3D tours, vector animations, WebGL scenes) that have control functionalities (buttons, clickable areas, navigation commands).
- For each control of each media, attempt to reach it by navigating with the keyboard only (Tab, Shift+Tab or arrow keys depending on the component).
- Verify that the control is focusable, either directly in the component or via an alternative present elsewhere on the page.
- If at least one control is not reachable either directly or via an equivalent keyboard alternative, the test fails.
Keyboard activatability of non-temporal media controls
- Identify the same non-temporal media as for test 4.12.1.
- For each control you successfully targeted with the keyboard, press Enter, then test with Space: the expected action must be triggered.
- If a control is focusable but does not activate with the keyboard, it fails this test, even if it passed 4.12.1.
- An alternative present on the page performing the same action and activatable by keyboard is also accepted.
- All controls of all non-temporal media must pass to validate the test.
Examples
❌ Non-compliant : SVG animation with mouse-only control
<svg width="400" height="300" viewBox="0 0 400 300">
<rect id="play-btn" x="10" y="10" width="120" height="36"
fill="#0066cc"
onclick="startAnimation()"
style="cursor: pointer;">
</rect>
<text x="70" y="33" text-anchor="middle"
fill="white" pointer-events="none">Start</text>
<circle id="dot" cx="200" cy="150" r="20" fill="#ff6600"/>
</svg>The rectangle acts as a button but is not focusable (no tabindex) and has no keyboard handler. A user navigating with Tab can never reach this control: failure on test 4.12.1. And even if focus reached it, Enter and Space would do nothing: failure on test 4.12.2. The onclick attribute alone is insufficient on a non-interactive SVG element.
✅ Compliant : SVG animation with complete keyboard control
<svg width="400" height="300" viewBox="0 0 400 300"
role="img" aria-label="Demonstration animation">
<rect id="play-btn" x="10" y="10" width="120" height="36"
fill="#0066cc"
tabindex="0"
role="button"
aria-label="Start the animation"
onclick="startAnimation()"
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();startAnimation();}">
</rect>
<text x="70" y="33" text-anchor="middle"
fill="white" pointer-events="none">Start</text>
<circle id="dot" cx="200" cy="150" r="20" fill="#ff6600"/>
</svg>The control is focusable via tabindex="0" (test 4.12.1 satisfied), identified as a button via role="button" and aria-label, and activatable by Enter or Space via onkeydown (test 4.12.2 satisfied). The keyboard user has exactly the same capabilities as a mouse user.
Tips and pitfalls
⚠️ Accessible does not mean activatable
This is the most frequent error in audits on this criterion: the developer adds tabindex="0" so that Tab reaches the control (test 4.12.1), but forgets the onkeydown handler so that Enter or Space triggers it (test 4.12.2). The two conditions are distinct and must be checked separately.
⚠️ The alternative must be functionally equivalent
Offering a "See text version" link under a virtual tour is not enough if the tour contains interactive actions absent from this text version. The alternative must allow performing exactly the same action, not just accessing the same content in passive reading mode.
💡 Test without a mouse, not just by pressing Tab
Unplug or disable the mouse and navigate through the entire component with the keyboard. Some keyboard traps only reveal themselves under real conditions: focus enters the component and cannot leave it (violation of WCAG 2.1.2, referenced by this criterion). A keyboard trap is a blocking non-conformity.
⚠️ 3D configurators and modern virtual tours
Flash is dead, but WebGL product configurators, Three.js scenes and 360° virtual tours (Matterport or Kuula iframes) fall under this criterion. If the component is a third-party iframe whose internal content is not auditable, the non-interference principle applies: it must not block keyboard navigation on the rest of the page.
⚠️ Non-interactive SVG are not concerned
This criterion only targets non-temporal media with control functionalities. A static SVG, autonomous CSS animation or vector image without user interaction is not in its scope. As soon as an element responds to a click or interaction, the criterion applies.
Frequently asked questions
What is the concrete difference between test 4.12.1 and test 4.12.2?
4.12.1 verifies that you can reach the control by keyboard (place focus on it via Tab or arrow keys). 4.12.2 verifies that once focus is placed, the action is triggered with Enter or Space. An SVG button with tabindex="0" but without an onkeydown handler passes 4.12.1 and fails 4.12.2. The two tests can therefore have different results on the same component.
What technologies are covered by RGAA criterion 4.12 beyond Flash?
Yes. Non-temporal media are not limited to Flash. Any non-standard interactive component is within this scope: SVG animations with controls, 3D WebGL configurators, 360° virtual tours, Canvas animations with buttons. If an interactive visual element does not rely on native HTML elements (button, a, input), this criterion applies.
How to audit RGAA criterion 4.12 on keyboard control in practice?
Navigate through the page with Tab and identify interactive non-temporal media. For each control identified: (1) verify that it receives focus (visible indicator), (2) press Enter then Space and observe if the action occurs. In the absence of accessible controls, look for an equivalent alternative on the page. If neither exists, the criterion is non-compliant.
In what cases does a third-party iframe fail RGAA criterion 4.12?
Yes, if the iframe traps keyboard focus and prevents escaping from it (violation of WCAG 2.1.2). If the internal content of the iframe is inaccessible but does not block navigation on the rest of the page, the non-interference principle applies: the component is flagged as non-compliant without blocking the overall audit. Add a skip link to allow users to bypass it.
What conditions must tabindex="0" meet to satisfy RGAA criterion 4.12?
No, unless the container itself manages all internal controls via complete keyboard navigation (arrows, activation, etc.). In most cases, each interactive control inside the SVG must have its own tabindex="0" and its own onkeydown handler. Verify that each individual action is accessible and activatable within the component, not just entering the component via Tab.