1.3.4 表示の向き

要件

コンテンツは、特定の表示の向き（縦向きまたは横向き）で表示されるようにしなければならないと制限されてはならない。
ただし、表示の向きが本質的に重要な場合（例：ピアノアプリ、バーチャルキーボードなど）は除く。

背景と意図

スマートフォンやタブレットの利用者の中には：

• 端末を回転できないユーザー（モーター障害、固定スタンド使用）
• スクリーンロックを利用しているユーザー
• 車椅子固定などによって姿勢変更が困難なユーザー

が存在します。

そのため、表示の向きに制限をかけず、縦向き・横向きのどちらでも閲覧・操作可能な設計にすることが重要です。

具体例

達成していない例（向きが固定）

@media screen and (orientation: landscape) {
  body::before {
    content: "このページは横向きでのみ表示されます。";
    display: block;
  }
}

このように表示向きを制限すると、スクリーンロックユーザーや支援技術利用者が閲覧できないことがある。

達成している例（両方に対応）

• レスポンシブデザインで、縦向き・横向きどちらでもレイアウトが自動調整されるようにする。
• CSS Grid や Flexbox を使い、表示幅に応じてコンテンツが再配置される構造にする。
• Webアプリなどで、機能が縦・横どちらでも使えるようにUIを工夫する。

表示向きの制限が許容される「例外」

表示の向きが機能の一部である、“本質的に制限されるケース” は除外されます。

ピアノ演奏アプリ

横向きで鍵盤の幅が必要

ARアプリで現実世界との整合性が必要

特定の方向と一致させる必要がある

一部のスポーツ中継アプリ（横表示が前提）

視野・画面比率の関係

利点

障害のあるユーザー

操作環境に制限のある人でも表示できる

高齢者や寝たきりの人

持ち方に制限があっても支障なく閲覧可能

学習環境や展示端末

端末を固定した状態でもアクセシビリティを確保

UX向上

端末設定に左右されず、快適な閲覧体験が可能に

実装上の注意点

CSSでの固定

orientation: landscape を使って警告を出さない

JavaScriptでの検出

window.orientation や screen.orientation で方向を検出するだけで制限はかけない

本質的制限の場合

その理由を明確にし、代替手段を案内するのが望ましい

一覧に戻る