Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ?

Un utilisateur en fauteuil roulant fixe son téléphone sur un support : il ne peut pas secouer l’appareil. Si votre application déclenche une action uniquement via le gyroscope ou l’accéléromètre, cet utilisateur est bloqué sans recours. Les personnes ayant des tremblements sont dans la situation inverse : chaque mouvement involontaire risque de déclencher une action non souhaitée. Bouger son téléphone n’est pas universel.

Ce critère impose deux garanties cumulatives. Première garantie : toute fonctionnalité déclenchée par le mouvement de l’appareil (secouage, inclinaison) ou par un geste en direction de l’appareil (approcher la main devant le capteur de proximité) doit avoir une alternative via un composant d’interface classique : bouton, lien, champ ou tout autre élément HTML actionnable. Deuxième garantie : l’utilisateur doit pouvoir désactiver lui-même la détection de mouvement, et cette désactivation doit effectivement empêcher tout déclenchement accidentel.

Deux exceptions dispensent de l’obligation. Quand le mouvement est essentiel à la fonctionnalité elle-même (un niveau à bulle numérique, une boussole, une application de réalité augmentée basée sur l’orientation), aucune alternative n’est requise. Quand le mouvement est activé via une interface déjà compatible avec l’accessibilité, le critère ne s’applique pas non plus. En dehors de ces deux cas : alternative obligatoire, désactivation obligatoire.

3 tests pour confirmer qu'une alternative au mouvement de l'appareil est proposée

Exemples

<script>
window.addEventListener('devicemotion', function(event) {
  var acc = event.accelerationIncludingGravity;
  if (Math.abs(acc.x) > 20 || Math.abs(acc.y) > 20) {
    undoLastAction();
  }
});
 
function undoLastAction() {
  // Seul moyen d'annuler la dernière saisie
  history.pop();
  renderState();
}
</script>

<div class="toolbar">
  <button type="button" id="btn-undo" onclick="undoLastAction()">
    Annuler la dernière action
  </button>
 
  <label class="motion-setting">
    <input
      type="checkbox"
      id="disable-motion"
      onchange="toggleMotion(this.checked)"
    >
    Désactiver la détection de mouvement
  </label>
</div>
 
<script>
var motionDisabled = false;
 
function toggleMotion(disabled) {
  motionDisabled = disabled;
  localStorage.setItem('motionDisabled', disabled);
}
 
window.addEventListener('devicemotion', function(event) {
  if (motionDisabled) return;
  var acc = event.accelerationIncludingGravity;
  if (Math.abs(acc.x) > 20 || Math.abs(acc.y) > 20) {
    undoLastAction();
  }
});
 
function undoLastAction() {
  history.pop();
  renderState();
}
 
// Restaurer le préférence utilisateur
if (localStorage.getItem('motionDisabled') === 'true') {
  motionDisabled = true;
  document.getElementById('disable-motion').checked = true;
}
</script>

Astuces et pièges

Questions fréquentes

Références