Leitfaden für mobile Textskalierung

Mobile Anwendungen müssen der WCAG 1.4.4 „Text skalieren“ entsprechen und Inhalte skalieren, um sicherzustellen, dass keine Informationen oder Funktionen für Benutzer verloren gehen, die größere Schriftgrößen benötigen. Dieser Leitfaden behandelt empfohlene Möglichkeiten zur Unterstützung der Textskalierung auf iOS- und Android-Plattformen.

Plattformspezifische Funktionen

iOS - Dynamischer Text

Dynamischer Text ist eine Barrierefreiheitsfunktion innerhalb von iOS, die es ermöglicht, Schriftgrößen geräteweit basierend auf den Vorlieben des Benutzers zu skalieren. Diese Option finden Sie unter den Bedienungshilfen auf dem Gerät. Lesen Sie hier mehr von Apple über Textanzeige.

Android - Text- und Anzeige-Skalierung

Für Android-Geräte ab Version 13 können Sie die bevorzugte Text- und Inhaltsgröße in den Bedienungshilfen-Einstellungen ändern. Benutzer können sowohl die Schriftgröße als auch die Anzeigegröße unabhängig anpassen. Lesen Sie mehr über die Änderung dieser Einstellungen in Googles Support-Leitfaden für Text- und Anzeigeeinstellungen.

Vorbereitung Ihrer Ansichten

Stellen Sie sicher, dass Inhalte scrollen können

iOS: Wenn der Text auf größere Schriftgrößen skaliert wird, könnte wesentlicher Inhalt vom Bildschirm gedrängt werden. Implementieren Sie ein UIScrollView oder ScrollView auf jedem Bildschirm mit Inhalt.

Android: Verwenden Sie ein ScrollView-Element als Container für Layout-Elemente (Konstraint, Linear, Relativ). ScrollViews scrollen nicht, bis die Höhe des Bildschirms (oder die Breite für horizontalen Scroll) gefüllt ist.

Ausnahmen:

• Android: RecyclerViews müssen nicht in einem ScrollView eingebettet sein. Erlauben Sie, dass sich Elemente vertikal oder horizontal erweitern.
• Android: Navigationselemente (untere Leisten, Tabs, Werkzeugleisten) sollten auf derselben Ebene wie das enthaltene ScrollView sein, nicht innerhalb davon.

Sicherstellen, dass Inhalte expandieren können

iOS: Verwenden Sie contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo und lessThanOrEqualTo, um Ansichten zu erweitern. Begrenzen Sie die feste Höhe und Breite von Ansichten mit Inhalt.

Android: Die meisten Probleme mit der Textvergrößerung können gelöst werden, indem die Höhe oder Breite einer Ansicht nicht eingeschränkt wird. Erlauben Sie TextView, sich mit gesetzten Einschränkungen zu erweitern. Verwenden Sie wrap_content für die Höhe und entweder match_parent oder 0dp für die Breite.

Layout-spezifische Überlegungen

Android ConstraintLayout: Setzen Sie die Ansichtsbreite auf match_parent und die Höhe auf wrap_content, oder verwenden Sie 0dp-Breite, um den Raum zwischen Einschränkungen zu füllen. Stellen Sie immer sicher, dass sich Komponenten vertikal erweitern können.

Android RelativeLayout: Definieren Sie Start- und End-Richtlinien für benachbarte Elemente, um sicherzustellen, dass Komponenten auf dem Bildschirm bleiben.

Android LinearLayout: Kann sich an veränderte Inhaltsgrößen anpassen, wenn in einem ScrollView und die match_parent-Höhe nicht festgelegt ist. Verwenden Sie android:minHeight für spezifische Höhenanforderungen.

Anzahl der Zeilen festlegen

iOS: Setzen Sie die numberOfLines-Eigenschaft auf 0 für jeden Text mit der Möglichkeit zum Überlaufen. Für UIButton setzen Sie numberOfLines auf 0 auf dessen titleLabel.

Android: Verwenden Sie SP (skalierungsunabhängige Pixel) für alle Texte, nicht DP (dichteunabhängige Pixel). Sie können Android Studios Barrierefreiheits-Linter verwenden, um Probleme bei der SP-Nutzung zu erkennen.

Implementierung

iOS-Implementierung

SwiftUI-Ansichten (iOS 14+)

Verwendung von Standard-Schriftarten:

.font(.system(.largeTitle, design: .rounded))

Verwendung benutzerdefinierter Schriftarten:

.font(.custom("FontName", size: 16, relativeTo: .body))

UIKit-Ansichten

Verwendung von Standard-Schriftarten:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Verwendung benutzerdefinierter Schriftarten mit UIFontMetrics:

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

Manuelle Handhabung von dynamischem Text:

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Android-Implementierung

Grundlegende Einrichtung:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

ConstraintLayout-Beispiel:

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Programmatische Textänderung:

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Tests und Best Practices

Allgemeine Richtlinien

• Testen Sie verschiedene Schriftgrößen, um sicherzustellen, dass der Inhalt wie erwartet angezeigt wird.
• Halten Sie Überschriften kurz und aussagekräftig, um die Zugänglichkeit zu verbessern.
• Stellen Sie sicher, dass die Nutzerfreundlichkeit nicht durch falsche Einschränkungen beeinträchtigt wird.
• Überprüfen Sie, ob alle Textelemente das Skalieren unterstützen, ohne den Inhalt vom Bildschirm zu verdrängen.

Plattformspezifische Überlegungen

iOS:

• Befolgen Sie Apples Typografierichtlinien und die Dokumentation zu dynamischen Schriftgrößen.
• Verwenden Sie geeignete TextStyles (.body, .title1, .caption1, usw.).
• Für SwiftUI werden viele Überlegungen standardmäßig bereitgestellt, sollten jedoch überprüft werden.

Android:

• Verwenden Sie kurze Titel für Werkzeugleisten; vermeiden Sie das Toolbar-Widget für dynamische Titel.
• Stellen Sie eine eindeutige Ikonographie mit beschreibenden Inhaltsbeschreibungen für die untere Navigation bereit.
• Nutzen Sie scrollbare Ansichten für Tabs, ViewPager und TabList-Komponenten.
• Begrenzen Sie die Höhe der Bedienelemente nicht.

Wichtige Erkenntnisse

1. Implementieren Sie immer scrollbare Container für Inhalte, die eventuell überlaufen könnten.
2. Verwenden Sie plattformgerechte Skalierungseinheiten (SP für Android, TextStyles für iOS).
3. Gründlich testen über verschiedene Schriftgrößen und Barrierefreiheitseinstellungen hinweg.
4. Ermöglichen Sie es Ansichten, sich auszudehnen anstatt sie auf feste Abmessungen zu beschränken.
5. Befolgen Sie die Plattformrichtlinien für ein optimales Benutzererlebnis.