1.3.4 表示の向きを固定しない

適合レベル

※各レベルについては適合レベルとはをご覧ください

概要

ウェブページを閲覧する際、スマートフォンやタブレットなどは縦向きで閲覧することが多いが、車椅子にスマートフォンを横向きで固定する人もいる。縦向き固定などで画面を作成すると、横向きで使う人が閲覧困難になるため、縦向き横向きどちらでも画面を正しく表示できるようにする。ただし、ピアノのアプリなど表示の向きを固定することが必要不可欠な場合は例外とする。

実装方法

悪い実装例

コンテンツの幅や高さを絶対値で指定している。幅や高さを固定してしまうと、傾けた時にはみ出して見えなくなる場合がある。

.modal {
  width: 500px;
  height: 500px;
}

<div class="modal">
  コンテンツの中身
</div>

良い実装例

コンテンツの幅や高さを相対値で指定している。相対値であれば、傾けた時に画面の向きに合わせて適切に表示される。

.modal {
  width: 80%;
  height: 80%;
}

<div class="modal">
  コンテンツの中身
</div>

テスト・チェック方法

デザイン時、縦向き横向き両方でデザインする
実装時、縦向き横向きで表示しても崩れないように相対値を用いる
テスト時、デバイスの向きを変えても表示が崩れないこと

参考文献

達成基準 1.3.4: 表示の向きを理解する