La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?
Un utilisateur naviguant au clavier arrive sur une visite virtuelle 3D ou une animation SVG interactive : si les boutons de contrôle ne répondent ni à Tab ni à Entrée, ce contenu lui est totalement inaccessible. Une exclusion pure et simple.
Ce critère s’applique aux médias non temporels : animations vectorielles interactives, visites virtuelles 3D, scènes WebGL ou Three.js, contenus en technologies propriétaires. Chaque fonctionnalité de contrôle doit satisfaire deux conditions. Elle doit être accessible : l’utilisateur peut la cibler au clavier (Tab ou touches directionnelles). Elle doit aussi être activable : Entrée ou Espace doivent déclencher l’action attendue. Ces deux conditions font l’objet de tests distincts : 4.12.1 pour l’accessibilité, 4.12.2 pour l’activation.
Si le composant ne peut pas être rendu accessible (technologie tierce sans API clavier), une alternative équivalente sur la même page suffit. Cette alternative doit réaliser exactement la même action et être elle-même pleinement contrôlable au clavier. Une alternative partielle ne valide pas le critère.
Flash a disparu, mais ces médias n’ont pas tous disparu avec lui. Les configurateurs 3D de produits, les animations SVG interactives et les visites virtuelles immersives restent dans le périmètre de vos audits.
2 tests pour vérifier le contrôle clavier du média non temporel
Accessibilité clavier des contrôles d'un média non temporel
- Identifiez tous les médias non temporels de la page (SVG interactifs, visites 3D, animations vectorielles, scènes WebGL) qui possèdent des fonctionnalités de contrôle (boutons, zones cliquables, commandes de navigation).
- Pour chaque contrôle de chaque média, tentez de l’atteindre en naviguant uniquement au clavier (Tab, Maj+Tab ou touches directionnelles selon le composant).
- Vérifiez que le contrôle est focusable, soit directement dans le composant, soit via une alternative présente ailleurs dans la page.
- Si au moins un contrôle n’est atteignable ni directement ni via une alternative clavier équivalente, le test échoue.
Activabilité clavier des contrôles d'un média non temporel
- Identifiez les mêmes médias non temporels que pour le test 4.12.1.
- Pour chaque contrôle que vous avez réussi à cibler au clavier, appuyez sur Entrée, puis testez avec Espace : l’action attendue doit se déclencher.
- Si un contrôle est focusable mais ne s’active pas au clavier, il échoue à ce test, même s’il passait 4.12.1.
- Une alternative présente dans la page réalisant la même action et activable au clavier est également acceptée.
- Tous les contrôles de tous les médias non temporels doivent passer pour valider le test.
Exemples
❌ Non conforme : Animation SVG avec contrôle uniquement souris
<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">Lancer</text>
<circle id="dot" cx="200" cy="150" r="20" fill="#ff6600"/>
</svg>Le rectangle agit comme bouton mais n’est pas focusable (pas de tabindex) et n’a aucun gestionnaire clavier. Un utilisateur naviguant au Tab ne peut jamais atteindre ce contrôle : échec au test 4.12.1. Et même si le focus y arrivait, Entrée et Espace ne feraient rien : échec au test 4.12.2. L’attribut onclick seul ne suffit pas sur un élément SVG non interactif.
✅ Conforme : Animation SVG avec contrôle clavier complet
<svg width="400" height="300" viewBox="0 0 400 300"
role="img" aria-label="Animation de démonstration">
<rect id="play-btn" x="10" y="10" width="120" height="36"
fill="#0066cc"
tabindex="0"
role="button"
aria-label="Lancer l'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">Lancer</text>
<circle id="dot" cx="200" cy="150" r="20" fill="#ff6600"/>
</svg>Le contrôle est focusable via tabindex="0" (test 4.12.1 satisfait), identifié comme bouton via role="button" et aria-label, et activable par Entrée ou Espace via onkeydown (test 4.12.2 satisfait). L’utilisateur clavier dispose exactement des mêmes capacités qu’un utilisateur souris.
Astuces et pièges
⚠️ Accessible ne veut pas dire activable
C’est l’erreur la plus fréquente en audit sur ce critère : le développeur ajoute tabindex="0" pour que Tab atteigne le contrôle (test 4.12.1), mais oublie le gestionnaire onkeydown pour que Entrée ou Espace le déclenchent (test 4.12.2). Les deux conditions sont distinctes et doivent être vérifiées séparément.
⚠️ L’alternative doit être fonctionnellement équivalente
Proposer un lien « Voir la version texte » sous une visite virtuelle ne suffit pas si la visite contient des actions interactives absentes de cette version texte. L’alternative doit permettre de réaliser exactement la même action, pas seulement d’accéder au même contenu en lecture passive.
💡 Testez sans souris, pas seulement en appuyant sur Tab
Débranchez ou désactivez la souris et parcourez le composant entier au clavier. Certains pièges au clavier ne se révèlent qu’en conditions réelles : le focus entre dans le composant et ne peut plus en sortir (violation de WCAG 2.1.2, référencé par ce critère). Un piège au clavier est une non-conformité bloquante.
⚠️ Configurateurs 3D et visites virtuelles modernes
Flash est mort, mais les configurateurs de produits WebGL, les scènes Three.js et les visites virtuelles 360° (iframes Matterport ou Kuula) tombent sous ce critère. Si le composant est une iframe tierce dont le contenu interne n’est pas auditable, le principe de non-interférence s’applique : il ne doit pas bloquer la navigation clavier sur le reste de la page.
⚠️ Les SVG sans interaction ne sont pas concernés
Ce critère ne vise que les médias non temporels dotés de fonctionnalités de contrôle. Un SVG statique, une animation CSS autonome ou une image vectorielle sans interaction utilisateur n’entrent pas dans son périmètre. Dès qu’un élément réagit à un clic ou une interaction, le critère s’applique.
Questions fréquentes
Quelle est la différence concrète entre le test 4.12.1 et le test 4.12.2 ?
4.12.1 vérifie qu’on peut atteindre le contrôle au clavier (y placer le focus via Tab ou touches directionnelles). 4.12.2 vérifie qu’une fois le focus posé, l’action se déclenche bien avec Entrée ou Espace. Un bouton SVG avec tabindex="0" mais sans gestionnaire onkeydown passe 4.12.1 et échoue 4.12.2. Les deux tests peuvent donc avoir des résultats différents sur un même composant.
Quelles technologies sont concernées par le critère RGAA 4.12 au-delà de Flash ?
Oui. Les médias non temporels ne se limitent pas à Flash. Tout composant interactif non standard entre dans ce périmètre : animations SVG avec contrôles, configurateurs 3D WebGL, visites virtuelles 360°, animations Canvas avec boutons. Si un élément visuel interactif ne repose pas sur des éléments HTML natifs (button, a, input), ce critère s’applique.
Comment auditer le critère RGAA 4.12 sur le contrôle clavier en pratique ?
Naviguez à la Tab à travers la page et repérez les médias non temporels interactifs. Pour chaque contrôle identifié : (1) vérifiez qu’il reçoit le focus (indicateur visible), (2) appuyez sur Entrée puis sur Espace et observez si l’action se produit. En l’absence de contrôles accessibles, cherchez une alternative équivalente dans la page. Si ni l’un ni l’autre n’existe, le critère est non conforme.
Dans quels cas une iframe tierce fait-elle échouer le critère RGAA 4.12 ?
Oui, si l’iframe piège le focus clavier et empêche d’en sortir (violation de WCAG 2.1.2). Si le contenu interne de l’iframe est inaccessible mais ne bloque pas la navigation sur le reste de la page, le principe de non-interférence s’applique : le composant est signalé non conforme sans bloquer l’audit global. Ajoutez un lien d’évitement pour permettre aux utilisateurs de le contourner.
Quelles conditions tabindex="0" doit-il remplir pour satisfaire le critère RGAA 4.12 ?
Non, sauf si le conteneur gère lui-même tous les contrôles internes via une navigation clavier complète (flèches, activation, etc.). Dans la majorité des cas, chaque contrôle interactif à l’intérieur du SVG doit avoir son propre tabindex="0" et son propre gestionnaire onkeydown. Vérifiez que chaque action individuelle est accessible et activable au sein du composant, pas seulement l’entrée dans le composant via Tab.