衝突するビュー
画面上のUI要素が互いに視覚的に重ならないようにする
確認すること
ビューとは、画面上の目に見えるUI要素のことで、テキストラベル、画像、ボタンなどが含まれます。情報を含むビューは、他のビューと部分的にも完全にも重なってはいけません。重なったビューは、特にダイナミックタイプでテキストサイズが大きくなった際に、内容が読めなくなったり完全に隠れたりすることがあります。
このルールはAppleのヒューマンインターフェイスガイドラインによって設定されたベストプラクティスを強制します。このルールはモバイルダッシュボードからオフにすることができ、またiOS向けに書かれたテストでルールを無視することによってによっても無効化できます。
不適切な例 ❌
テキストの拡大 overlaps another element on screen
画像に重なるテキストが部分的または完全に読めなくなります
これは、デフォルトのテキストサイズで発生することもあれば、ユーザーが設定でダイナミックタイプサイズを大きくした後に現れることもあります
適切な例 ✅
画面上のすべての要素は spaced so their bounds do not intersect
テキストはデフォルトサイズでも大きいダイナミックタイプサイズでも読みやすいです
適切なレイアウト制約により、テキストが拡大されても要素間の適切な間隔が保たれます
概要
- このルールはユーザーにとって小さな影響を持ちます
- ビュー（テキストラベルや画像などの目に見えるUI要素）は互いに重ならないようにすべきです
- ダイナミックタイプは実行時にテキストサイズを増やすことができ、これにより以前は分かれていた要素が衝突する可能性があります
ユーザーへの影響
視覚に障害のないユーザーが最も影響を受けやすく、特に大きなダイナミックタイプ設定を使用するユーザーに影響します。情報ビューが重なると、コンテンツが部分的または完全に読めなくなる可能性があります。大きなテキストサイズに依存しているユーザーは、この問題に遭遇する可能性が高く、デフォルトサイズできちんと見えるレイアウトであっても影響を受けます。
ビューの重なりの確認
- 画面上の各情報ビューの境界を確認してください。
- 次のいずれかが適用されます。
- アクセス不可: ビューの境界が他のビューと交差しています。
- アクセス可能: 情報を含むビューが重なっていません。
- 画面にテキスト要素が含まれている場合は、設定でダイナミックタイプサイズを増やし、ビューが大きなサイズで重なり始めないことを確認するために再度チェックを行います。
問題の修正
ビューの衝突は、ダイナミックタイプを考慮していない欠落または不十分なレイアウト制約によって引き起こされることが最も一般的です。正確な修正はレイアウトにより異なりますが、情報要素が常に十分なスペースを持つようにすることが目標です。
UIKit
隣接する情報要素の間の制約が十分なスペースを提供していることを確認します。2つの要素の間に制約が存在しない場合、それらが互いに近接している場合、ダイナミックタイプによってサイズが増えたときに重ならないように制約を追加します。
SwiftUI
各ビューが隣接するビューと重なることを防ぐレイアウト修正子を持っていることを確認してください。HStackとVStackを親コンテナとして使用し、レイアウトシステムが自動的にスペースを管理するようにします。テキストを含むビューの親としてZStackを使うのは避けてください。これは要素を互いに重ねることになります。
React Native
テキストまたは他のスケーラブルなコンテンツを含むビューに、コンテンツが切り取られたり、サイズが増加するにつれて隣接要素に押し込まれたりする可能性があるmaxHeightが設定されていないことを確認します。フレックスレイアウトを使用する場合は、要素間のスペースを一貫して保つためにgapプロパティの値を追加することを検討します。
このルールを無視できますか？
ユーザーに小さな影響「ビューの衝突」が発生し、これはAppleのベストプラクティスを強制するもので、厳しいWCAG要件ではありません。モバイルダッシュボードからこのルール全体をオフにしたり、iOSテストで個々の発見を無視することができます。ルールを無視するについて詳しく学びましょう。
リソース
- Apple ヒューマンインターフェイスガイドライン