css-orientation-lock
Le CSS ne doit pas verrouiller la page dans une seule orientation
Vérifie qu’aucune règle @media (orientation: portrait|landscape) n’applique de transform: rotate(...) à la page, une technique connue pour contrer l’orientation de l’appareil, et pose la question pour toute règle de ce type qui masque le contenu principal de la page.
Applicabilité. Toute feuille de style accessible (même document, pas d’origine croisée) : blocs <style> en ligne et feuilles de style <link> de même origine déjà chargées dans document.styleSheets, feuilles adoptées par le document, et celles de chaque shadow root ouverte, dont les règles sont mises en correspondance avec les éléments de cette racine.
Attendu. Aucun bloc @media (orientation: portrait) ou @media (orientation: landscape) n’applique une rotation transform/-webkit-transform/rotate d’environ 90 degrés (modulo 180, c.-à-d. ~90 ou ~270). C’est la technique bien connue pour imposer visuellement une orientation quelle que soit l’orientation réelle de l’appareil, ce qui va à l’encontre de l’exigence de WCAG 1.3.4 : le contenu ne doit pas restreindre son affichage à une seule orientation, sauf si cette orientation est essentielle. Une telle rotation est jugée sur les éléments visibles que cible son sélecteur (ACT b33eff), la visibilité étant évaluée sans la rotation elle-même : elle échoue lorsque l’un d’eux contient le contenu de la page (tel que défini ci-dessous pour le contenu masqué), et tout autre élément ainsi tourné donne lieu à une question (cantTell) : une flèche qui pointe vers un panneau placé à côté d’elle dans une orientation et en dessous dans l’autre ne verrouille rien. Une règle qui ne fait tourner aucun élément visible, ou seulement un pseudo-élément, n’a rien à juger. Une seconde forme donne lieu à une question (cantTell) : un bloc media d’orientation qui masque le contenu de la page avec display: none ou visibility: hidden, la forme habituelle de l’échec WCAG F100 (contenu remplacé par un message « rotate your device » dans une orientation). L’élément masqué compte comme contenu de la page lorsqu’il s’agit de html ou body, du landmark main, d’un de ses ancêtres ou, sur une page sans landmark main, d’un élément contenant au moins la moitié du texte du body. Lorsque la page n’a ni <main> ni role="main", un élément personnalisé auquel ses ElementInternals donnent le rôle main (this.attachInternals().role) est le landmark main. Une personne décide si l’orientation est essentielle et si la page reste utilisable.
Ce que rapporte un constat.
mediaText(une rotation ou un contenu masqué) : la requête média qui contient la règle, comme(orientation: portrait). La rotation d’un élément qui ne contient pas le contenu de la page est signalée sur cet élément (ORIENTATION_MEDIA_ROTATES_ELEMENT).selectorText(une rotation ou un contenu masqué) : le sélecteur de la règle de style qui fait pivoter ou masque. Vide lorsqu’il n’a pas pu être lu.unreadableSheetCount(STYLESHEETS_NOT_READABLE) : le nombre de feuilles de style qui n’ont pas pu être lues, généralement parce qu’elles proviennent d’une autre origine.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<html><head><title>Page title</title><style>body { background: #fff; }</style></head><body>Hi</body></html>
Aucune media query d’orientation ne fait pivoter la page.
<html><head><title>Page title</title><style>@media (orientation: landscape) {body { transform: rotate(90deg); }}</style></head><body>Hi</body></html>
Une media query paysage impose une rotation de 90 degrés, ce qui verrouille la page en portrait quelle que soit l’orientation de l’appareil.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
ORIENTATION_MEDIA_HIDES_CONTENT
- Avec la barre d’outils de simulation d’appareils des outils de développement ou un appareil réel, affichez la page en portrait, puis en paysage.
- Dans l’orientation indiquée par le rapport, vérifiez ce qui est masqué et ce qui est affiché à la place.
- Vérifiez si le même contenu et les mêmes fonctions restent disponibles, par exemple grâce à une autre mise en page.
- Déterminez si une orientation est essentielle (comme pour une application de piano ou la photo d’un chèque bancaire).
Réussite. Le contenu reste disponible dans les deux orientations, ou une seule orientation est essentielle.
Échec. Le contenu est masqué et, par exemple, un message « tournez votre appareil » s’affiche : la page est inutilisable dans cette orientation, ce qui ne respecte pas le critère WCAG 1.3.4 (F100).
ORIENTATION_MEDIA_ROTATES_ELEMENT
- Repérez l’élément indiqué par le rapport et notez de quoi il s’agit (une icône, une bannière, un panneau, une partie du contenu).
- Avec la barre d’outils de simulation d’appareils des outils de développement ou un appareil réel, affichez la page en portrait, puis en paysage.
- Vérifiez si l’élément pivote sur le côté dans l’une des orientations et si cela rend le contenu difficile à lire ou à utiliser.
Réussite. L’élément pivoté est petit ou décoratif, et tout le contenu peut être lu et utilisé dans les deux orientations.
Échec. Le contenu pivote sur le côté dans une orientation et ne peut pas être lu ou utilisé normalement, ce qui ne respecte pas le critère WCAG 1.3.4 (ACT b33eff).
STYLESHEETS_NOT_READABLE
- Avec la barre d’outils de simulation d’appareils des outils de développement ou un appareil réel, affichez la page en portrait.
- Passez en paysage et rechargez la page, puis revenez en portrait.
- Dans chaque orientation, vérifiez que tout le contenu s’affiche à l’endroit, peut être lu et n’est pas remplacé par un message « tournez votre appareil ».
Réussite. La page affiche son contenu à l’endroit et fonctionne dans les deux orientations.
Échec. La page est bloquée dans une orientation (contenu masqué, pivoté sur le côté ou remplacé par un message), ce qui ne respecte pas le critère WCAG 1.3.4.