Leitfaden zur Skalierung von Text auf mobilen Geräten

Mobile Anwendungen müssen die WCAG-Richtlinie 1.4.4 "Textgröße anpassen" erfüllen und Inhalte skalieren, um sicherzustellen, dass für Nutzer mit größeren Schriftgrößen keine Informationen oder Funktionen verloren gehen. Dieser Leitfaden behandelt empfohlene Vorgehensweisen zur Unterstützung der Textskalierung auf iOS- und Android-Plattformen.

Plattformspezifische Funktionen

iOS – Dynamic Type

Dynamic Type ist eine Barrierefreiheitsfunktion in iOS, mit der die Schriftgröße geräteweit entsprechend den Benutzereinstellungen skaliert werden kann. Diese Option finden Sie unter den Bedienungshilfen des Geräts. Weitere Informationen von Apple zur Textanzeige finden Sie hier.

Android – Skalierung von Text und Anzeige

Bei Android-Geräten ab Version 13 können Sie die bevorzugte Text- und Inhaltsgröße in den Bedienungshilfeneinstellungen ändern. Benutzer können sowohl die Schriftgröße als auch die Anzeigegröße unabhängig voneinander anpassen. Weitere Informationen zum Ändern dieser Einstellungen finden Sie im Google-Supportleitfaden für Text- und Anzeigeeinstellungen.

Vorbereitung Ihrer Ansichten

Stellen Sie sicher, dass Inhalte scrollen können

iOS: Wenn Text auf größere Schriftgrößen skaliert wird, kann wesentlicher Inhalt vom Bildschirm verschoben werden. Verwenden Sie ein UIScrollView oder ScrollView auf jedem Bildschirm mit Inhalt.

Android: Verwenden Sie ein ScrollView-Element als übergeordnetes Element für Layout-Elemente (Constraint, Linear, Relative). ScrollViews können erst scrollen, wenn die Höhe (bzw. Breite beim horizontalen Scrollen) des Bildschirms vollständig ausgefüllt ist.

Ausnahmen:

• Android: RecyclerViews müssen nicht in ein ScrollView eingebettet werden. Stellen Sie sicher, dass sich Elemente vertikal oder horizontal ausdehnen können.
• Android: Navigationselemente (untere Leisten, Tabs, Werkzeugleisten) sollten sich auf der gleichen Ebene wie das enthaltende ScrollView befinden, nicht darin.

Stellen Sie sicher, dass Inhalte erweitert werden können

iOS: Verwenden Sie contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo und lessThanOrEqualTo, um das Erweitern von Ansichten zu ermöglichen. Vermeiden Sie das Festlegen einer festen Höhe und Breite für Ansichten mit Inhalt.

Android: Die meisten Probleme mit der Textgrößenänderung lassen sich beheben, indem man die Höhe oder Breite einer Ansicht nicht einschränkt. Erlauben Sie TextView sich mit gesetzten Constraints zu erweitern. Verwenden Sie wrap_content für die Höhe und entweder match_parent oder 0dp für die Breite.

Layoutspezifische Hinweise

Android ConstraintLayout: Setzen Sie die Ansichtsbreite auf match_parent und die Ansichtshöhe auf wrap_content, oder verwenden Sie 0dp Breite, um den Platz zwischen den Constraints auszufüllen. Stellen Sie stets sicher, dass die Komponenten vertikal erweiterbar sind.

Android RelativeLayout: Definieren Sie Start- und Endrichtlinien für Geschwisterelemente, um sicherzustellen, dass die Komponenten auf dem Bildschirm bleiben.

Android LinearLayout: Kann sich an veränderliche Inhaltsgrößen anpassen, wenn es sich in einem ScrollView befindet und Sie keine match_parent-Höhe setzen. Verwenden Sie android:minHeight für spezifische Höhenanforderungen.

Anzahl der Zeilen festlegen

iOS: Setze die numberOfLines-Eigenschaft auf 0 für jeden Text mit Überlaufpotenzial. Für UIButton setze numberOfLines auf 0 an seinem titleLabel.

Android: Verwenden Sie für den gesamten Text SP (skalierungsunabhängige Pixel) und nicht DP (dichteunabhängige Pixel). Sie können den Accessibility-Linter von Android Studio nutzen, um SP-Nutzungsprobleme aufzuspüren.

Implementierung

iOS-Implementierung

SwiftUI Views (iOS 14+)

Verwendung der Standard-Schriftarten:

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

Verwendung benutzerdefinierter Schriftarten:

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

UIKit-Ansichten

Verwendung der 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 Dynamic Type:

// 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

Grundkonfiguration:

<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 Textmodifikation:

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 die Inhalte wie erwartet angezeigt werden.

Halten Sie Überschriften kurz und aussagekräftig, um die Zugänglichkeit zu verbessern.

• Stellen Sie sicher, dass die Benutzerfreundlichkeit nicht durch unzulässige Einschränkungen beeinträchtigt wird.
• Überprüfen Sie, ob alle Textsteuerelemente das Skalieren unterstützen, ohne dass Inhalte außerhalb des Bildschirms angezeigt werden.

Plattformspezifische Überlegungen

iOS: Beachten Sie die Typografie-Richtlinien von Apple und die Supporting Dynamic Type-Dokumentation. Verwenden Sie geeignete TextStyles (.body, .title1, .caption1 usw.). Viele Überlegungen werden bei SwiftUI standardmäßig abgedeckt, sollten aber überprüft werden.

Android:

• Verwenden Sie kurze Titel für Symbolleisten; vermeiden Sie das Toolbar-Widget für dynamische Titel.
• Stellen Sie eindeutige Symbolik mit aussagekräftigen Inhaltsbeschreibungen für die untere Navigationsleiste bereit.
• Verwenden Sie scrollbare Ansichten für Tabs-, ViewPager- und TabList-Komponenten.
• Begrenzen Sie die Höhe der Bedienelemente nicht.

Wichtige Punkte

1. Implementieren Sie immer scrollbare Container für Inhalte, die überlaufen könnten.
2. Verwenden Sie plattform-spezifische Skalierungseinheiten (SP für Android, TextStyles für iOS).
3. Testen Sie gründlich bei unterschiedlichen Schriftgrößen und Barrierefreiheitseinstellungen.
4. Erlauben Sie Ansichten, sich zu erweitern, anstatt sie auf feste Abmessungen zu beschränken.
5. Beachten Sie die Plattformrichtlinien für eine optimale Benutzererfahrung.