WCAG 2.2「1.3.4 表示の向き」Level AAの要件、実装、確認方法

WCAG ​2.2の達成基準「1.3.4 ​表示の向き」（Level ​AA）は、コンテンツの表示と操作を縦向きか横向きの一方だけに制限しないことを求めます。

端末の向きを変えにくい利用者でも使えるように、どちらの向きでも必要な情報に届き、同じ操作を完了できる設計にします。

縦向きと横向きでレイアウトが変わること自体は問題ではありません。

片方の向きで本文や操作を隠したり、端末の回転を利用条件にしたりすることが問題です。

達成基準が求めること

「1.3.4 ​表示の向き」の判断ポイント

確認対象	満たしたい状態
表示	縦向きと横向きのどちらでも、必要な情報を確認できる。
操作	どちらの向きでも、ボタンや入力欄を使って目的の操作を完了できる。
レイアウト	列数や配置は変えてよいが、向きを理由に情報や機能を失わせない。
例外	特定の向きが機能上必要不可欠な場合だけ、その向きに制限できる。

ここでいう「必要不可欠」は、「その向きの方が見やすい」「開発しやすい」という意味ではありません。

別の向きにすると情報や機能の本質が失われ、レイアウトの調整や別の操作方法でも補えない場合を指します。

向きを固定すると利用できない人がいる

端末を車椅子やスタンドに固定している利用者は、ページに合わせて端末を回転できないことがあります。

向きを変えにくい利用者にとって、回転を求める画面は好みの問題ではなく、情報や機能に到達できない障壁になります。

そのため、設計の基準は「推奨する向きで美しく見えるか」ではなく、「利用者が選んだ向きで読み、操作できるか」です。

画面幅に応じた配置や文字サイズの考え方は、モバイルアクセシビリティとレスポンシブ設計も参考になります。

向きを制限しない実装

同じ情報を保ったまま配置を変える

縦向きでは一列、横向きで十分な幅があるときは二列にするなど、向きに合わせてレイアウトを調整します。

.content-layout ​{
 ​ ​display: ​grid;
 ​ ​gap: ​1rem;
 ​ ​grid-template-columns: ​1fr;
}

@media ​(orientation: ​landscape) ​and ​(min-width: ​48rem) ​{
 ​ ​.content-layout ​{
 ​ ​ ​ ​grid-template-columns: ​minmax(0, ​2fr) ​minmax(16rem, ​1fr);
 ​ ​}
}

この例では列数だけを変え、本文や操作要素はどちらの向きでも残します。

CSSの ​orientation ​メディア特性を使うこと自体は、向きの制限ではありません。

片方の向きで主要コンテンツを非表示にすると、同じメディアクエリでも利用を制限する実装になります。

向きの検知を利用条件にしない

JavaScriptで向きを検知して表示を調整する場合も、検知結果を理由に本文や機能を無効にしないようにします。

「横向きにしてください」という案内だけを表示し、目的のコンテンツを隠す方法では、端末を回転できない利用者が先へ進めません。

横向きを推奨する案内を出す場合でも、縦向きのまま閲覧と操作を続けられる状態を保ちます。

画面全体を回転させない

次のようにページ全体をCSSで回転させる方法は、利用者が選んだ向きに対応したことにはなりません。

body ​{
 ​ ​transform: ​rotate(-90deg);
 ​ ​overflow: ​hidden;
}

コンテンツそのものを回転させるのではなく、利用可能な幅と高さに合わせて各要素を並べ直します。

例外を判断する手順

ゲームや楽譜表示など、横向きで設計されることが多いコンテンツでも、種類だけを理由に例外とは判断できません。

次の順序で、向きの制限が本当に必要かを確認します。

1. 別の向きにすると、情報の意味や中心となる機能が失われるか。
2. レスポンシブな配置変更で、情報と操作を維持できないか。
3. 別の操作方法や表示切替を用意しても、同じ目的を達成できないか。
4. 制限の理由が、単なる見やすさや制作上の都合になっていないか。

制限が避けられない場合は、その理由を明確にし、可能であれば利用者が表示を切り替えられる操作や同等の代替手段を用意します。

縦向きと横向きのテスト方法

コードだけを確認しても、実際に情報と操作が保たれているかは判断できません。

端末側の向き固定を解除したうえで、次の手順を確認します。

1. 縦向きでページを開き、見出し、本文、画像、入力欄、ボタンを確認する。
2. 主要な操作を行い、目的の手順を最後まで完了する。
3. 横向きに変え、同じ情報を読み、同じ操作を完了できるか確認する。
4. メニュー、ダイアログ、通知など、操作中に現れる要素も両方の向きで確認する。
5. 文字やボタンが画面外に切れていないか、不要な重なりで操作できなくなっていないか確認する。

見た目を完全に一致させる必要はありません。

判定の軸は、縦向きと横向きのどちらでも、必要な情報を得て操作を完了できるかです。

公開前の確認項目

• アプリやページが、縦向きか横向きの一方に固定されていない。
• 向きの変更を求める画面が、本文や操作を遮っていない。
• 両方の向きで、主要な情報と機能を利用できる。
• レイアウト変更後も、見出しの順序と操作の流れが分かりやすい。
• 特定の向きが必要な場合は、必要不可欠と判断した理由を説明できる。
• 可能な場合は、表示切替や同等の代替手段を用意している。

当社では、ウェブアクセシビリティを導入しやすくするUUU ​ウェブアクセシビリティを提供しています。

サイトのアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。