Abgeschnittener Text

Was wir suchen

Der sichtbare Inhalt von statischen Text-Elementen sollte nicht abgeschnitten werden, weder bei der Standardtextgröße noch bei größeren Dynamic Type-Größen.

Fehlerhaftes Beispiel ❌

Erfolgreiches Beispiel ✅

Auf einen Blick

• Diese Regel hat ernsthafte Auswirkungen auf die Benutzer
• Diese Regel erfordert iOS 17.0 oder höher und gilt für statische Textelemente, die sichtbar und von Entwicklern anpassbar sind
• Statischer Text darf seinen sichtbaren Inhalt weder im aktuellen Zustand noch bei einer Größenänderung abschneiden
• Lösen Sie das Problem, indem Sie das Umbrechen oder Wachsen des Textes ermöglichen:
  • Setze numberOfLines = 0 (UIKit), oder
  • Entferne .clipped() / .lineLimit() (SwiftUI)

Auswirkungen auf Benutzer

Benutzer mit Sehbehinderungen, kognitiven Beeinträchtigungen oder solche, die auf größere Textgrößen durch Dynamic Type angewiesen sind, können möglicherweise die abgeschnittenen Informationen nicht abrufen. WCAG 1.4.4 (Text vergrößern) erfordert, dass Textinhalte sichtbar und benutzbar bleiben, wenn der Benutzer den Text vergrößert. Diese Regel hilft, Inhalte zu erfassen, die bereits abgeschnitten sind, sowie Inhalte, die abgeschnitten würden, wenn der Benutzer seine Texteinstellung vergrößert.

Problem mit abgeschnittenem Text bestätigen

1. Finde Bedienungshilfen in iOS Einstellungen
2. Wähle Anzeige & Textgröße
3. Umschalten, um die höchste Zugänglichkeits-Textgröße im Größerer Text-Panel auszuwählen
4. Beobachten Sie die Veränderung auf dem Bildschirm:
   • Unzugänglich: Inhalt wird von dieser Ansicht abgeschnitten
   • Zugänglich: Inhalt wird umbrochen, wächst vertikal oder kann durch Scrollen erreicht werden

Probleme beheben

• Stellen Sie sicher, dass von Entwicklern anpassbare Textcontainer genügend Breite und Höhe haben, um den vollständigen Inhalt anzuzeigen, einschließlich der größten Dynamic Type-Größe, die Sie unterstützen möchten
• Verwenden Sie Auto-Layout-Einschränkungen, die es ermöglichen, dass Text umbricht oder vertikal wächst
• Setze die numberOfLines-Eigenschaft des Textes auf numberOfLines = 0
• Für scrollbaren Inhalt, vergewissern Sie sich, dass die Scrollansicht selbst korrekt dimensioniert ist, sodass längere Texte in den Ansichtsbereich scrollen können, anstatt abgeschnitten zu werden

UIKit

Um dieses Problem in UIKit zu lösen, benötigt man normalerweise sowohl eine Textkorrektur als auch eine Layoutkorrektur. Wenn man numberOfLines auf 0 setzt, kann das Label umgebrochen werden, aber eine feste Höhenbeschränkung auf dem Label oder seinem Container wird den umbrochenen Text immer noch abschneiden. Verwende auch greaterThanOrEqualToConstant-Höhenbeschränkungen, damit der Container tatsächlich wachsen kann.

• Setze numberOfLines = 0 auf UILabel, um mehrzeiliges Umbruch zu erlauben (Textkorrektur)

  label.numberOfLines = 0

• Ersetzen Sie feste Auto Layout-Höhenbeschränkungen durch >=, damit der Container wachsen kann, um den umgebrochenen Text aufzunehmen

  label.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight).isActive = true

SwiftUI

Das Layoutsystem von SwiftUI passt die Größe der Elemente automatisch an deren Inhalt an. Vermeide die Verwendung einer festen frame oder der clipped()-Eigenschaft. Die .fixedSize- und minHeight-Eigenschaften werden nur in Grenzfällen benötigt, wenn ein Elternelement immer noch seine eigenen Größenbeschränkungen auf den Text anwendet.

• Die Verwendung der .clipped()-Eigenschaft und/oder fester Rahmen sind die Hauptursachen für abgeschnittene Textverletzungen - das Entfernen dieser Beschränkungen ist in der Regel alles, was benötigt wird

  // before
  Text("Long content that needs to wrap")
      .truncationMode(.tail)
      .clipped()
      .frame(width: 50, height: 20)
  // after
  Text("Long content that needs to wrap")

• Entferne .lineLimit(1) oder setze auf nil, als unterstützende Lösung, um das Textumbruch zu ermöglichen

  Text("Your text here")
      .lineLimit(nil)

• Wenn eine übergeordnete Ansicht die Textgröße einschränkt, verwende .fixedSize(horizontal: false, vertical: true), um die vertikale Ausdehnung zu ermöglichen

  Text("Long content that needs to wrap")
      .fixedSize(horizontal: false, vertical: true)

• Optional, setze minHeight auf den Rahmen, damit er mit dem Inhalt wachsen kann

  Text("Content").frame(minHeight: minHeight)

• Verwende ViewThatFits (iOS 16+) für adaptive Layouts, die bei größeren Größen das Arrangement wechseln, um abschneiden zu verhindern, bevor es passiert

  ViewThatFits {
      HStack { Text("Label"); Text("Value") }   // compact — fits on one row
      VStack { Text("Label"); Text("Value") }   // falls back to stacked if needed
  }

React Native

Um dieses Problem in React Native zu verhindern, stellen Sie sicher, dass die Ansichten flexible Höhen haben. Sie können eine der folgenden Ansätze verwenden.

• Legen Sie keine Höhe fest – der Container wird sich der Größe seines Inhalts anpassen.

  <View style={{ padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Verwende die minHeight-Eigenschaft anstelle von height - dies setzt einen Mindestwert für kurzen Inhalt, aber der Container kann größer werden, wenn der Text mehr Platz benötigt.

  <View style={{ minHeight: 30, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Verwenden Sie ein flexibles Layout, damit der Container mit seinem Inhalt wächst und nie unter seine natürliche Größe zusammengedrückt wird.

  <View style={{ flexGrow: 1, flexShrink: 0, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Verwenden Sie Polsterung anstelle einer festen Höhe – die intrinsische Größe des Textes und die Menge an Polsterung bestimmen die Höhe des Containers.

  <View style={{ padding: 16 }}>
    <Text>{text}</Text>
  </View>

• Setze numberOfLines={0}, damit der Text auf beliebig viele Zeilen umgebrochen werden kann, und kombiniere es mit einer expliziten lineHeight, um den vertikalen Abstand zu kontrollieren.

  <View style={{ padding: 8 }}>
    <Text numberOfLines={0} style={{ lineHeight: 30 }}>{text}</Text>
  </View>

Flutter

Die Lösung dieses Problems in Flutter erfordert in der Regel sowohl eine Textkorrektur als auch eine Layoutkorrektur. Text-Widgets umwickeln standardmäßig, aber ein Elternelement mit fester Höhe oder ein nicht flexibler Row-Kind kann den umbrochenen Text immer noch abschneiden. Erlaube es den Containern, sich mit ihrem Inhalt zu dimensionieren, und achte darauf, dass das systemeigene Textskalierungsgerät den Schriftgrad skalieren kann.

• Erlaube es Text, über mehrere Zeilen umgebrochen zu werden, indem du maxLines ungesetzt lässt und softWrap: true beibehältst, was der Standard ist

  Text(
    longString,
    softWrap: true,
  )

• Verwenden Sie Polsterung bei Containern, die Text umgeben, damit sich der Rahmen mit seinem Inhalt ausdehnt

  Container(
    padding: const EdgeInsets.all(8),
    child: Text(longString),
  )

• Umschließe Text in Expanded oder Flexible, wenn es in einem Row lebt, damit es auf mehrere Zeilen umgebrochen werden kann, wenn die Schriftart skaliert

  Row(
    children: [
      const Icon(Icons.info),
      Expanded(child: Text(longString)),
    ],
  )

• Machen Sie den Bildschirm scrollbar, damit skalierten Text weiterhin erreichbar bleibt, wenn er über den Ansichtsbereich hinaus wächst

  SingleChildScrollView(       
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(longString),
    ),
  )

Kann ich diese Regel ignorieren?

Abgeschnittener Text hat eine schwerwiegende Auswirkung für Benutzer, und wir empfehlen dringend, dieses Problem in fast allen Fällen zu beheben. Text, der abgeschnitten ist, ist einfach unleserlich, und es gibt kein gleichwertiges Workaround für einen Benutzer, der auf große Dynamische Typgrößen angewiesen ist.

In seltenen Fällen kannst du in Erwägung ziehen, das Ergebnis zu ignorieren, wenn das abgeschnittene Element rein dekorativ oder redundant ist - zum Beispiel ein kurzes Label, das vollständig von einem anderen nahegelegenen Element oder durch das Zugänglichkeitslabel eines Bildes vermittelt wird. Erfahre mehr über Ignorieren von Regeln.

Ressourcen

Deque University Kursseiten

• 1.4.4a Größenänderung (200 %) (Siehe Native Mobile iOS)

Hinweis: Voller Zugang zu den Ressourcen von Deque University erfordert ein Abonnement.

Andere Ressourcen

• WCAG 2.1 Erläuterungsdokumente
  • Bezieht sich auf Verständnis SC 1.4.4 - Textgröße