Votre site fonctionne-t-il correctement à la fois en mode portrait et en mode paysage sur les appareils mobiles ?
Critère officiel 13.9 — Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?
Pourquoi c'est important
Certaines personnes en fauteuil roulant motorisé ont leur tablette fixée dans un support orienté en mode paysage qu'elles ne peuvent pas faire pivoter. Si un site force l'affichage portrait uniquement, ces utilisateurs voient une page illisible ou ne peuvent pas accéder à certaines fonctionnalités.
Exemples concrets
Ce qui est conforme
Le site fonctionne correctement en portrait comme en paysage. Les formulaires et les menus restent utilisables dans les deux orientations. Un usager dont le terminal est fixé en position paysage accède à toutes les démarches sans contrainte.
Ce qui pose problème
La page de consultation du cadastre interactif affiche le message « Veuillez tourner votre appareil en mode portrait ». Un usager dont la tablette est fixée en paysage ne peut pas accéder à cette fonctionnalité.
Comment agir
Test autonome : faites pivoter votre téléphone ou tablette entre portrait et paysage sur vos pages principales. Le contenu doit rester accessible dans les deux orientations. Si une fonctionnalité ne fonctionne qu'en portrait, demandez à votre prestataire de supprimer cette restriction.
Règles clés
- Ne pas bloquer l'orientation via JS sauf si essentiel.
- Ne pas masquer le contenu dans une orientation — adapter via media queries.
- Exception : application de piano (clavier horizontal en paysage) ou signature.
Erreurs fréquentes
- Application bloquant la rotation via screen.orientation.lock()
- CSS masquant le contenu avec un message 'Tournez votre appareil'
Exemples de code
contenu masqué en portrait
✗ Non conforme@media (orientation: portrait) {
.app-container { display: none; }
.rotation-message { display: flex; }
}L'application est masquée en portrait. Un utilisateur avec appareil fixé en portrait ne peut pas l'utiliser.
mise en page adaptée aux deux orientations
✓ Conforme.layout {
display: flex;
flex-direction: column;
}
@media (orientation: landscape) {
.layout { flex-direction: row; }
}Mise en page adaptée aux deux orientations — aucun contenu masqué.
Référence WCAG : 1.3.4