Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ?
Un utilisateur en fauteuil roulant fixe son smartphone en mode paysage sur son fauteuil : il ne peut pas faire pivoter l’appareil. Si votre page lui affiche un message « Veuillez tourner votre appareil » ou masque son contenu principal dans cette orientation, il n’a plus accès à rien. C’est exactement ce que le critère 13.9 cherche à empêcher.
La règle : tout contenu accessible dans une orientation doit l’être dans l’autre. La présentation peut changer (menu hamburger, colonnes empilées, navigation déplacée dans le footer), tant que l’information reste atteignable. Le moyen d’accès peut différer. L’information, non.
Ce qui fait échouer l’audit dans la quasi-totalité des cas : une règle CSS @media (orientation: portrait) { display: none; } qui supprime un bloc sans proposer d’alternative, ou un message de blocage qui se substitue au contenu. Un design adaptatif correctement implémenté passe généralement ce critère sans ajout spécifique.
Un test pour s'assurer que l'affichage s'adapte à l'orientation de l'écran
Accès au contenu en portrait et en paysage
- Ouvrez la page en mode portrait (ex : fenêtre 375×667, ou sur un smartphone tenu verticalement).
- Notez tous les contenus disponibles : textes, formulaires, menus, tableaux, liens.
- Basculez en mode paysage (ex : fenêtre 667×375, ou rotation de l’appareil).
- Vérifiez que la consultation reste possible : aucun contenu n’est supprimé par un masquage CSS, aucun message ne bloque l’accès.
- Vérifiez que tous les contenus identifiés à l’étape 2 sont toujours atteignables, même si leur présentation ou leur chemin d’accès diffère.
- Si ces deux conditions sont remplies, le test est validé.
Exemples
❌ Non conforme : Blocage du contenu en mode portrait
<style>
@media (orientation: portrait) {
.main-content { display: none; }
.rotate-message { display: block; }
}
</style>
<main class="main-content">
<h1>Tableau de bord</h1>
<p>Vos statistiques du mois en cours.</p>
</main>
<div class="rotate-message" style="display: none;">
<p>Veuillez tourner votre appareil en mode paysage pour accéder à cette page.</p>
</div>En mode portrait, le contenu principal disparaît et laisse place à un message de blocage. Un utilisateur qui ne peut pas faire pivoter son appareil n’a aucun moyen d’accéder au tableau de bord. Non conforme au critère 13.9.
✅ Conforme : Nom d’établissement masqué visuellement mais accessible aux technologies d’assistance
<style>
@media (max-width: 767px) {
.site-name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
</style>
<header>
<h1>
<a href="/">
<img src="logo.svg" alt="Université Paris-Saclay">
<span class="site-name">Université Paris-Saclay</span>
</a>
</h1>
</header>Le nom complet de l’établissement est masqué visuellement sur mobile, mais reste dans le DOM et accessible aux lecteurs d’écran. En portrait comme en paysage, l’information reste atteignable. Conforme : le moyen d’accès diffère, le contenu demeure.
Astuces et pièges
⚠️ Confondre orientation et taille d’écran lors de l’audit
Le critère 13.9 porte sur l’orientation (portrait vs paysage), pas sur la résolution. Masquer un élément via @media (max-width: 767px) relève du responsive design et n’est pas couvert par ce critère. Les WCAG 1.3.4 le confirment : « Changes in content or functionality due to the size of display are not covered by this criterion. » Certains auditeurs testent en dessous de 767px de largeur et concluent à une non-conformité au 13.9 : c’est une erreur d’interprétation du critère.
⚠️ Cas particuliers : quand l’orientation est essentielle à l’usage
Certaines interfaces nécessitent une orientation spécifique pour fonctionner : jeux vidéo, piano interactif, dépôt de chèques bancaires. Dans ces cas, le critère est non applicable. Attention : si votre interface est le seul moyen d’accéder au service, une alternative doit être proposée, et la contrainte doit être justifiée dans la déclaration d’accessibilité.
💡 Tester l’orientation sans appareil mobile
Dans les DevTools de Chrome ou Firefox, activez la vue responsive (Ctrl+Shift+M), sélectionnez un profil mobile (ex : iPhone 12), puis utilisez l’icône de rotation pour alterner portrait et paysage. Testez aux dimensions 375×667 et 667×375 pour couvrir les cas courants. Aucun smartphone nécessaire.
⚠️ Contenu accessible via un chemin alternatif : conforme ou non ?
Si une sidebar desktop devient une page dédiée sur mobile (lien dans le menu), la page reste conforme au 13.9. De même, des raccourcis masqués en mobile sont acceptables si les contenus vers lesquels ils pointent restent accessibles par d’autres chemins. Le critère autorise explicitement que le moyen d’accès diffère, il n’exige pas que le chemin soit identique.
Questions fréquentes
Quand un élément masqué en mode paysage entraîne-t-il une non-conformité RGAA ?
Non, si le contenu reste accessible par un autre chemin. Le RGAA indique que « le moyen d’y accéder peut différer » selon l’orientation. Un logo masqué en paysage parce que l’information est disponible autrement sur la page n’est pas une non-conformité. Un tableau de données masqué sans aucune alternative l’est.
Comment tester le critère RGAA 13.9 sans appareil mobile physique ?
Les DevTools des navigateurs permettent de simuler l’orientation. Dans Chrome ou Edge : activez la vue Appareil (Ctrl+Shift+M), sélectionnez un profil mobile (iPhone, Pixel...) et cliquez sur le bouton de rotation. Testez à plusieurs résolutions pour couvrir mobile et tablette. Le RGAA ne spécifie pas de résolution minimale pour ce test.
Dans quels cas screen.orientation.lock() respecte-t-il le critère RGAA 13.9 ?
Non, si l’orientation est fonctionnellement essentielle au service (jeu, saisie de chèque, interface de piano). Dans tous les autres cas, verrouiller l’orientation crée une non-conformité directe. Supprimez le verrou et adaptez la mise en page avec du CSS pour les deux orientations.
Quelle est la différence entre les critères RGAA 13.9 et 10.11 ?
Le critère 10.11 concerne le reflow : le contenu doit rester lisible sans défilement horizontal jusqu’à 320 px de large. Le critère 13.9 concerne l’orientation : le contenu doit être accessible en portrait et en paysage. Les deux peuvent être concernés sur mobile, mais ils testent des problèmes distincts.
Que signifie exactement « contenu identique » dans les deux orientations selon le RGAA ?
Non. La formulation du RGAA précise immédiatement que « la présentation et le moyen d’y accéder peut différer ». « Le même » signifie que l’information est disponible, pas que la mise en page est identique. La norme européenne EN 301 549 le confirme : les changements dus à la taille d’affichage ne relèvent pas de ce critère.