Orientation

Conception pour l’orientation

Conformément au critère de succès 1.3.4 des WCAG 2.1 : Orientation, le contenu ne limite pas sa vue et son fonctionnement à une orientation d’affichage unique, comme un portrait ou un paysage, à moins qu’une orientation d’affichage particulière soit essentielle.

Permettre aux utilisateurs de visualiser votre contenu dans l’orientation (portrait ou paysage) qu’ils préfèrent. Il est possible de restreindre l’orientation, mais cela peut créer des problèmes. Par exemple, certains utilisateurs font installer leurs appareils mobiles dans une orientation fixe (p. ex. sur le bras d’un fauteuil roulant électrique).

Le critère de succès permet de restreindre ou de verrouiller l’orientation si elle est essentielle à l’application, comme une orientation paysage pour représenter des touches de piano ou prendre une photo d’un chèque.

 Mauvais exemple : Verrouillage de l’orientation de l’écran

Dans cet exemple, le contenu ne peut être affiché en mode paysage par une requête média CSS qui détectnnne l’orientation paysage et une règle de style de transformation qui fait tourner le contenu à 90 degrés (avec prise en charge des styles).

CSS

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { 
   html { 
      transform: rotate(-90deg); 
      transform-origin: left top; 
      width: 100vh; 
      overflow-x: hidden; 
      position: absolute; 
      top: 100%; 
      left: 0;
   }
}

Source: Orientation Lock

 Bon exemple : Orientation adaptée à l’écran

Dans cet exemple, la page affichant la Norme sur l’accessibilité des sites Web du gouvernement du Canada ne comporte aucun code touchant l’orientation de l’écran. La page tourne par défaut dans les appareils mobiles.

Orientation de l’écran en mode portrait, avec texte lisible. Orientation de l’écran en mode paysage, avec texte lisible.

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Échecs

Haut de la page