WCAG 2.2 ガイドライン「1.3.4 画面の向き」Level AA について

はじめに

WCAG 2.2の「1.3.4 画面の向き」は、コンテンツの操作や閲覧が**特定の画面の向き（縦向きまたは横向き）**に制限されないことを求めています。例外として、画面の向きが機能上不可欠である場合（例: 横向きが必須のゲームやグラフィック編集ツール）は、この基準の対象外です。

この記事では、HTML、CSS、JavaScriptを使った具体的な実装方法を初心者向けに詳しく解説します。

1. 画面の向きに関する制限とは？

多くのウェブサイトやアプリは、特定の向き（縦向きや横向き）で設計されています。しかし、向きを固定することで次のような問題が発生します：

• デバイスの向きを変えることが困難なユーザーが利用できなくなる。
• 車椅子や固定された端末での操作が難しくなる。
• ユーザーが自分の好みに応じた操作を選択できなくなる。

例外：

• 横向きが不可欠なコンテンツ（例: ビデオゲーム、楽譜表示アプリ）。

2. ガイドラインの要件と実装方法

a. 向きを固定しない

CSSやJavaScriptで画面の向きを固定する設定を避けることが基本です。

不適切な例

<style>
  body {
    transform: rotate(-90deg);
    overflow: hidden;
  }
</style>

この例では、横向きに固定され、ユーザーが縦向きで利用できなくなります。

改善例

画面の向きを制限せず、どちらの向きでも操作可能にします。

<p>このコンテンツは縦向きでも横向きでも利用できます。</p>

b. 特定の向きが必要な場合の対応

特定の向きが必要な場合でも、適切な代替手段や説明を提供します。

必須例（ゲームの場合）

<p>このゲームは横向きでのみ動作します。デバイスを横向きにしてください。</p>

ユーザーに選択肢を提供

JavaScriptを使用して向きを検知し、ユーザーに向きを変更するか、代替手段を提供します。

JavaScriptの例

<script>
  window.addEventListener("orientationchange", () => {
    const orientation = screen.orientation.type;
    const message = document.getElementById("orientationMessage");
    if (orientation.includes("portrait")) {
      message.textContent = "横向きでコンテンツを利用することを推奨します。";
    } else {
      message.textContent = "";
    }
  });
</script>

<div id="orientationMessage"></div>
<p>このコンテンツは横向きで最適に動作しますが、縦向きでも利用可能です。</p>

c. CSSでレスポンシブデザインを適用

CSSを使って、縦向きと横向きの両方に対応したレイアウトを作成します。

CSSの例

@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
  p {
    font-size: 16px;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
  p {
    font-size: 20px;
  }
}

このコードでは、デバイスの向きに応じて背景色やフォントサイズを変化させます。

3. よくある失敗例とその対策

a. 横向きまたは縦向きに固定

失敗例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=landscape">

この設定は、横向きに固定されているため、ユーザーの操作自由度を制限します。

改善策 向きを固定せず、両方の向きで動作するようにします。

<meta name="viewport" content="width=device-width, initial-scale=1">

b. 向きを強制するメッセージ

失敗例

<p>縦向きではこのコンテンツを利用できません。横向きにしてください。</p>

改善策 向きを変える方法を提案するか、代替のコンテンツを提供します。

<p>横向きが推奨されますが、縦向きでも利用可能です。</p>

4. アクセシビリティへのメリット

このガイドラインを守ることで、次のようなユーザーに配慮できます：

• デバイスの向きを変更しにくいユーザー：固定されたデバイスを使用している場合でも、コンテンツにアクセス可能。
• 個人の好みに応じた操作を希望するユーザー：縦向きと横向きを自由に切り替えられることで使いやすさが向上。
• 多様な環境で利用するユーザー：レイアウトの柔軟性により、異なるデバイスでの使用が快適に。

まとめ

WCAG 2.2の「1.3.4 画面の向き」は、コンテンツが特定の向きに固定されないようにすることを求めています。

• CSSやJavaScriptを適切に活用して、縦向きと横向きの両方に対応したレスポンシブデザインを作成しましょう。
• 特定の向きが必要な場合は、代替手段や説明を提供してユーザーの混乱を防ぎます。

このガイドラインを実践することで、あらゆるデバイスや状況に対応したアクセシブルなウェブコンテンツを提供できます！

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。