適合レベル
AA
※各レベルについては適合レベルとはをご覧ください
概要
画面を縦向き・横向きのどちらにしても、表示が崩れたり操作できなくなったりしないように実装する。
具体的な実装方法
1.3.4 AA
1. ⭕️良い例
CSSのメディアクエリ（orientation）を用いて、縦向きと横向きの両方のスタイルを定義します。これにより、デバイスの向きに応じてレイアウトが最適化され、利用者はどちらの向きでも快適にコンテンツを閲覧できます。
ポイント
レスポンシブデザインを基本とする
- コンテンツがどの向きでも適切に表示されるように、柔軟なグリッドレイアウトや可変サイズの画像を使用します。
向きに応じた最適なレイアウトを提供
- 横向きの場合はナビゲーションを上部に、縦向きの場合は左側に配置するなど、スペースを有効活用したデザインを検討します。
2. ❌悪い例
CSSやJavaScriptによる向きの固定
- 特定の向きを強制するスタイル（例:
transform: rotate(90deg)) やスクリプトを実装している。
向きの変更を促すメッセージの表示
- 「このサイトは横向きでご覧ください」のようなメッセージを表示し、片方の向きでの利用を強要する。
なぜ問題なのか
これらの実装は、デバイスを回転できない利用者や、特定の向きを好む利用者を排除することになり、アクセシビリティを著しく低下させます。
改善策
向きを固定するコードを削除し、メディアクエリを使用して両方の向きに対応したスタイルシートを提供します。
3. プラットフォーム別の実装
Webページでは、CSSのメディアクエリを使用して、デバイスの向きに応じたスタイルを適用します。
実装例
CSS
/* デフォルトのスタイル */
body {
font-size: 16px;
}
/* 縦向き (portrait) の場合のスタイル */
@media screen and (orientation: portrait) {
p {
font-size: 1.2em; /* 縦長画面では少し文字を大きくする */
}
}
/* 横向き (landscape) の場合のスタイル */
@media screen and (orientation: landscape) {
.container {
display: flex; /* 横長画面ではフレックスボックスを利用してレイアウトを調整 */
}
}andを使用して、向きと画面幅など複数の条件を組み合わせることも可能です。
CSS
/* 横向きで、かつ画面幅が767px以下の場合のスタイル */
@media (orientation: landscape) and (max-width: 767px) {
/* スタイルを記述 */
}4. 特殊なケースへの対応
コンテンツの性質上、特定の向きが必要不可欠な場合は例外となります。
例
- 銀行の小切手（横長のフォーマットが不可欠）
- ピアノの鍵盤を模したアプリケーション
- 投影スライドの作成ツール
このような場合でも、なぜその向きが必要なのかを利用者に伝えることが推奨されます。
確認観点
1.3.4 AA
1. 定量的な基準の担保
自動チェックツールでの合格率
- Lighthouse: Google ChromeのDevToolsに組み込まれているLighthouseは、アクセシビリティの項目を自動でチェックします。 表示の向きを直接的にチェックする機能はありませんが、レスポンシブデザインに関連する問題（ビューポートの設定など）を検出するのに役立ちます。
チェックリストの達成度
2. 定性的な基準の担保
レビュー
- コードレビューの際に、CSSに画面の回転を固定するような記述（例:
screen.orientation.lock()）が含まれていないか確認します。 - メディアクエリが正しく実装され、縦向き・横向き双方のスタイルが定義されているかを確認します。
専門家による監査
- アクセシビリティ専門家は、実際にスマートフォンやタブレットなどのデバイスを回転させ、レイアウトが崩れたり、情報が失われたりしないかをテストします。
- 固定されたディスプレイを持つ支援技術（例：車椅子にマウントされたデバイス）のシミュレーションを行い、問題がないかを確認します。