Orientation d'écran imposée : RGAA 13.9, correction CSS

C'est quoi

Certains sites forcent une orientation spécifique via :

La propriété CSS @media screen and (orientation: portrait) avec un message bloquant ou un masquage du contenu principal.
L'API JavaScript screen.orientation.lock() qui verrouille l'orientation de façon programmatique (disponible uniquement en mode plein écran, non supportée sur iOS Safari).
Un bandeau "Tourne ton téléphone" qui recouvre tout le contenu et ne peut pas être fermé.

Le problème : certaines personnes ont leur appareil fixé en permanence dans une orientation (fauteuil roulant motorisé, support de lit) et ne peuvent pas le retourner. Leur imposer une orientation spécifique leur rend la page inutilisable.

Exceptions : les applications dont l'orientation est intrinsèque au produit (émulateur de petite machine, application de dessin format paysage strict).

Qui est touché

Les personnes dont l'appareil est fixé dans un support (fauteuil roulant, support de lit, bras articulé) et qui ne peuvent pas changer l'orientation.
Les personnes malvoyantes qui utilisent l'orientation paysage pour avoir un texte plus grand sur toute la largeur de l'écran.

Impact business

Pour une personne dont l'appareil est fixé dans un support, une page qui bloque en portrait et affiche "Tourne ton téléphone" est simplement inaccessible. Il n'existe aucun contournement possible.

L'impact est total et binaire : l'utilisateur ne peut pas accéder au contenu, quelle que soit sa motivation ou ses compétences.

Sources des chiffres

Comment le détecter

Manuel : tourne ton appareil mobile dans les deux sens et vérifie que le contenu reste accessible dans les deux orientations.
DevTools : dans Chrome DevTools, active la vue mobile et bascule entre portrait et paysage via le bouton de rotation. Si un bandeau bloquant apparaît ou si le contenu disparaît, le critère échoue.
Revue de code : cherche screen.orientation.lock( et les media queries orientation: portrait ou orientation: landscape associées à un masquage de contenu (display: none, visibility: hidden).

Comment corriger

Avant - CSS

/* Masque le contenu en paysage et affiche un message bloquant */
@media screen and (orientation: landscape) {
  body { display: none; }
  .rotate-message { display: flex; }
}

Après - CSS

/* Adapte la mise en page sans jamais bloquer l'orientation */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

Supprime tout display: none sur body ou sur le contenu principal conditionné à l'orientation.

Supprime les appels à screen.orientation.lock() ou remplace-les par screen.orientation.unlock(). Note : cette API n'agit qu'en mode plein écran et n'est pas supportée sur iOS Safari ; le blocage vient le plus souvent du CSS.

Supprime aussi l'élément .rotate-message du HTML une fois le blocage CSS retiré - il n'a plus de raison d'exister.

Remplace le blocage par une adaptation de mise en page : en paysage, tu peux masquer les éléments secondaires (sidebar, navigation) et réorganiser le contenu pour qu'il reste utilisable, sans jamais couper l'accès.

Sur WordPress, certains thèmes et constructeurs (Elementor, Divi) ont une option de visibilité des sections selon l'orientation. Vérifie que cette option ne masque pas du contenu essentiel.

Questions fréquentes

Peut-on afficher une mise en page différente selon l'orientation ?

Oui, totalement. Le critère n'interdit pas d'adapter la mise en page selon l'orientation. Il interdit de rendre le contenu inaccessible dans une orientation. Adapter = acceptable, bloquer = non.

Une application de partitions musicales peut-elle forcer l'orientation paysage ?

Oui, si l'orientation paysage est essentielle à la nature du produit (partition large, interface de cockpit de jeu). C'est une exception stricte : elle ne justifie pas le blocage sur un site vitrine ou un formulaire standard.

Si mon site est très difficile à utiliser en paysage, dois-je quand même le corriger ?

Oui. La mauvaise ergonomie en paysage doit être corrigée par une adaptation de la mise en page, pas par un blocage. Un site vitrine n'a aucune raison valable d'être inaccessible dans une orientation.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Orientation d'écran imposée