Überschneidende Ansichten

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Stellen Sie sicher, dass sich UI-Elemente auf dem Bildschirm nicht visuell überschneiden

Not for use with personal data

Erfahren Sie, wie wir künstliche Intelligenz für diese Regel verwenden!

Was wir überprüfen

Eine Ansicht ist jedes sichtbare UI-Element auf dem Bildschirm, wie ein Textlabel, Bild oder Button. Ansichten, die Informationen enthalten, sollten sich nicht mit einer anderen Ansicht überschneiden, weder teilweise noch vollständig. Überschneidende Ansichten können Inhalte unleserlich oder vollständig verborgen machen, insbesondere wenn Dynamic Type die Textgröße erhöht.

Diese Regel setzt eine Best Practice der Apple Human Interface Guidelines um. Sie können diese Regel über das Mobiles Dashboard deaktivieren oder indem Sie das Ignorieren der Regel in für iOS geschriebenen Tests.

Fehlgeschlagenes Beispiel ❌

An iOS phone screen showing documentation with enlarged text that overlaps an image. A red focus ring indicates that the top part of the text is difficult to read

Vergrößerter Text overlaps another element on screen

Der Text, der sich mit dem Bild überschneidet, wird teilweise oder vollständig unleserlich

Dies kann bei Standardtextgrößen auftreten oder nur dann erscheinen, wenn ein Benutzer die Dynamic Type-Größe in den Einstellungen erhöht

Erfolgreiches Beispiel ✅

An iOS phone screen showing documentation with enlarged text that is properly spaced, with no overlapping bounds

Alle Elemente auf dem Bildschirm sind spaced so their bounds do not intersect

Der Text ist sowohl bei Standard- als auch bei größeren Dynamic Type-Größen lesbar

Richtige Layout-Constraints sorgen dafür, dass die Elemente auch bei größer werdendem Text ausreichend Abstand halten

Auf einen Blick

Diese Regel hat einen geringen Einfluss auf die Benutzer
Ansichten (sichtbare UI-Elemente wie Textlabels und Bilder) sollten sich nicht gegenseitig überlappen
Dynamic Type kann die Textgröße zur Laufzeit erhöhen und dazu führen, dass sich zuvor getrennte Elemente überschneiden

Auswirkungen auf die Benutzer

Sichtbare Benutzer sind am meisten betroffen, insbesondere diejenigen, die größere Dynamic Type-Einstellungen verwenden. Wenn sich informative Ansichten überlappen, können Inhalte teilweise oder vollständig unleserlich werden. Benutzer, die auf größere Textgrößen angewiesen sind, sind eher von diesem Problem betroffen, selbst wenn das Layout bei Standardgrößen korrekt erscheint.

Problem der überschneidenden Ansichten bestätigen

Betrachten Sie die Grenzen jeder informativen Ansicht auf dem Bildschirm.
Eines der folgenden Dinge trifft zu:
- Unzugänglich: Die Grenzen einer Ansicht überschneiden sich mit einer anderen Ansicht.
- Barrierefrei: Keine informativen Ansichten haben sich überschneidende Grenzen.
Wenn der Bildschirm Textelemente enthält, erhöhen Sie die Dynamic Type-Größe in den Einstellungen und wiederholen Sie die Überprüfung, um sicherzustellen, dass sich die Ansichten auch bei größeren Größen nicht überlappen.

Probleme beheben

Überschneidende Ansichten werden meist durch fehlende oder unzureichende Layout-Constraints verursacht, die Dynamic Type nicht berücksichtigen. Die genaue Lösung variiert je nach Layout, aber das Ziel ist, sicherzustellen, dass informative Elemente immer ausreichend Platz zueinander haben.

UIKit

Sorgen Sie dafür, dass Constraints zwischen benachbarten informativen Elementen ausreichend Abstand bieten. Wenn zwischen zwei nah beieinander liegenden Elementen kein Constraint existiert, fügen Sie eines hinzu, damit sie nicht überlappen können, wenn Dynamic Type ihre Größe erhöht.

SwiftUI

Stellen Sie sicher, dass jede Ansicht Layout-Modifikatoren hat, die verhindern, dass ihre Grenzen mit benachbarten Ansichten überlappen. Verwenden Sie HStack und VStack als übergeordnete Container, damit das Layout-System den Abstand automatisch verwaltet. Vermeiden Sie es, ZStack als übergeordneten Container für Ansichten zu verwenden, die Text enthalten, da dies die Elemente übereinander legt.

React Native

Stellen Sie sicher, dass Ansichten, die Text oder andere skalierbare Inhalte enthalten, kein maxHeight gesetzt haben, was dazu führen kann, dass Inhalte abgeschnitten oder in angrenzende Elemente verschoben werden, wenn die Textgröße zunimmt. Beim Verwenden von Flex-Layout sollten Sie überlegen, einen Wert für die gap-Eigenschaft hinzuzufügen, um einen gleichbleibenden Abstand zwischen den Elementen zu gewährleisten.

Kann ich diese Regel ignorieren?

Überschneidende Ansichten haben einen Geringer Einfluss für Benutzer und setzen eine Best Practice von Apple um, anstatt eine strenge WCAG-Anforderung zu sein. Sie können diese Regel vollständig über das Mobiles Dashboard deaktivieren oder einzelne Befunde in Ihren iOS-Tests ignorieren. Erfahren Sie mehr über Regeln ignorieren.