WCAG 2.2 ガイドライン「1.4.10 リフロー」Level AA について
はじめに
WCAG 2.2の「1.4.10 リフロー」は、コンテンツが画面サイズやズーム設定に応じてリフロー（再配置）され、情報や機能が失われずに表示されることを求めています。この基準は、横スクロールを必要とせず、垂直方向のスクロールのみで内容を操作できるように設計することが目的です。
この記事では、初心者向けに、HTML、CSS、JavaScriptを使ってリフローを適切に実装する方法を解説します。
1. リフローの要件
コンテンツは以下の条件を満たす必要があります：
- 画面幅が320px（モバイルの縦向き）以上でリフロー可能
- ズーム時にも情報や機能が損なわれない
- 横スクロールを必要とせず、垂直スクロールのみで操作可能
2. リフローを実現する技術
a. メディアクエリを使用してレスポンシブデザインを実装
メディアクエリを使用することで、デバイスの画面サイズに応じたレイアウトを提供できます。
CSSの例
/* デフォルトスタイル（デスクトップ） */
.container {
display: flex;
flex-direction: row;
gap: 20px;
}
/* モバイルスタイル（320px以上の画面幅） */
@media (max-width: 480px) {
.container {
flex-direction: column;
gap: 10px;
}
}
HTML
<div class="container">
<div>コンテンツ1</div>
<div>コンテンツ2</div>
</div>
b. CSSフレックスボックスでリフロー対応
Flexboxを使用して、要素を柔軟に配置し、画面幅やコンテンツ量に応じて自動的にリフローさせます。
CSSの例
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
flex: 1 1 300px; /* 最小幅300pxでリフロー */
}
HTML
<div class="flex-container">
<div class="flex-item">項目1</div>
<div class="flex-item">項目2</div>
<div class="flex-item">項目3</div>
</div>
c. グリッドレイアウトを使用
CSSグリッドレイアウトを使って、要素を整列させ、画面幅に応じてカラム数を調整できます。
CSSの例
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
HTML
<div class="grid-container">
<div>コンテンツ1</div>
<div>コンテンツ2</div>
<div>コンテンツ3</div>
</div>
d. 長いテキストやURLへの対応
長い文字列が画面幅を超えないように、CSSで単語の折り返しや改行を指定します。
CSSの例
.long-text {
word-wrap: break-word; /* 単語を折り返す */
overflow-wrap: break-word; /* 長い文字列を折り返す */
white-space: normal; /* テキストを折り返す */
}
HTML
<p class="long-text">
このテキストは非常に長い文字列やURLが含まれており、自動的に折り返されます。
</p>
e. 横スクロールを防ぐための最大幅の設定
画像やコンテナの最大幅を設定し、横スクロールが発生しないようにします。
CSSの例
img {
max-width: 100%;
height: auto; /* アスペクト比を保持 */
}
.container {
max-width: 100%; /* コンテンツをビューポート内に収める */
}
HTML
<div class="container">
<img src="example.jpg" alt="例の画像">
</div>
3. よくある失敗例とその改善策
a. コンテンツがズーム時に見えなくなる
失敗例
.container {
width: 400px;
}
- 固定幅でコンテンツがズーム時に収まりきらない。
改善策
.container {
max-width: 100%;
width: auto;
}
b. 横スクロールが発生する
失敗例
<div style="width: 1200px;">
横スクロールが必要なコンテンツ
</div>
改善策
max-widthやFlexboxを使用してリフロー対応。
4. 実装時の注意点
a. レスポンシブデザインのテスト
- モバイル、タブレット、デスクトップでレイアウトをテストします。
- Chrome DevToolsなどのツールを活用。
b. リフロー時の機能確認
- リフロー後もボタンやリンクが正常に機能することを確認します。
5. アクセシビリティのメリット
- モバイルデバイスへの対応：小さな画面でも内容が適切に表示されます。
- ユーザー体験の向上：横スクロールを排除し、快適な閲覧を提供します。
- 視覚障害者への配慮：スクリーンリーダーやズーム機能の使用時に内容が失われません。
まとめ
WCAG 2.2の「1.4.10 リフロー」は、画面サイズやズームに応じてコンテンツが再配置されることで、情報や機能が損なわれないことを求めています。
実装のポイント
- FlexboxやCSSグリッドを使用してリフローを実現する。
- 長い文字列や画像の折り返しを設定する。
- 横スクロールを防ぐために最大幅を設定する。
これらを守ることで、あらゆるデバイスや環境でアクセシビリティの高いコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。