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:
  • Setzen Sie numberOfLines = 0 (UIKit), oder
  • Entfernen Sie .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. Gehen Sie zu Bedienungshilfen in den iOS Einstellungen
2. Wählen Sie Anzeige & Textgröße
3. Schalten Sie die höchste Barrierefreiheitstextgröße im Größerer Text -Panel ein
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
• Setzen Sie die numberOfLines -Eigenschaft beim Text 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 typischerweise sowohl eine Textkorrektur als auch eine Layoutkorrektur zusammen. Einstellen von numberOfLines auf 0 lässt das Label umbrechen, aber eine feste Höhenbeschränkung am Label oder seinem Container wird den umbrochenen Text trotzdem abschneiden. Verwenden Sie auch greaterThanOrEqualToConstant -Höhenbeschränkungen, damit der Container tatsächlich wachsen kann.

• Setzen Sie numberOfLines = 0 auf UILabel , um mehrzeiliges Umbrechen zu ermöglichen (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 Layout-System von SwiftUI passt die Größe von Elementen automatisch an den Inhalt an. Vermeiden Sie die Verwendung einer festen frame oder der clipped() -Eigenschaft. Die .fixedSize und minHeight -Eigenschaften sind nur in Ausnahmefällen erforderlich, in denen ein übergeordnetes Element weiterhin seine eigenen Größenbeschränkungen für den Text auferlegt.

• Die Verwendung der .clipped() -Eigenschaft und/oder fester Rahmen sind die Hauptursachen für Verstöße aufgrund abgeschnittenen Textes – das Entfernen dieser Einschrä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")

• Entfernen Sie .lineLimit(1) oder setzen Sie auf nil, als unterstützende Maßnahme, um den Textumbruch zu ermöglichen

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

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

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

• Optional können Sie minHeight auf dem Rahmen setzen, damit er mit dem Inhalt wachsen kann

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

• Verwenden Sie ViewThatFits (iOS 16+) für adaptive Layouts, die bei größeren Größen das Arrangement wechseln, um ein Abschneiden zu verhindern, bevor es auftritt

  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>

• Verwenden Sie die minHeight -Eigenschaft anstelle von height – dies legt eine Untergrenze für kurzen Inhalt fest, aber der Container kann sich nach oben ausdehnen, 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>

• Setzen Sie numberOfLines={0} , damit der Text auf beliebig viele Zeilen umgebrochen werden kann, und kombinieren Sie ihn mit einem expliziten lineHeight , um den vertikalen Abstand zu steuern.

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

Flutter

Die Lösung dieses Problems in Flutter erfordert typischerweise sowohl einen Text- als auch einen Layout-Fix. Text -Widgets umbrechen standardmäßig, aber ein übergeordneter Container mit fester Höhe oder ein nicht flexibles Row Kind kann den umgebrochenen Text dennoch abschneiden. Lassen Sie Container mit ihren Inhalten mitwachsen und respektieren Sie den Systemtext-Scaler, damit die dynamische Schriftgröße den Text skalieren kann.

• Erlauben Sie Text , sich über mehrere Zeilen zu erstrecken, indem Sie maxLines nicht setzen und softWrap: truebeibehalten, 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ßen Sie Text in Expanded oder Flexible , wenn es sich in einem Rowbefindet, damit es sich an mehreren Zeilen umschlagen kann, wenn die Schriftgröße ansteigt

  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, dieses Problem in fast allen Fällen zu beheben. Text, der abgeschnitten ist, ist einfach unlesbar, und es gibt keine gleichwertige Lösung für einen Benutzer, der auf große dynamische Schriftgrößen angewiesen ist.

In seltenen Fällen können Sie in Betracht ziehen, das Ergebnis zu ignorieren, wenn das abgeschnittene Element dekorativ oder redundant ist - zum Beispiel ein kurzes Label, das vollständig von einem anderen nahe gelegenen Element oder durch das Zugänglichkeitslabel eines Bildes vermittelt wird. Erfahren Sie mehr über das Ignorieren von Regeln.

Ressourcen

Deque University Kursseiten

• 1.4.4a Vergrößern (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 Erläuterung SC 1.4.4 - Text vergrößern