Leitfaden zur Unterstützung von Dynamic Type

iOS-Anwendungen müssen Inhalte skalieren, um sicherzustellen, dass keine Informationen oder Funktionen für Benutzer verloren gehen, die größere Schriftgrößen benötigen, um WCAG 1.4.4 „Textgröße ändern“ zu entsprechen. Informationen sollten allen zugänglich gemacht werden. In diesem Handbuch werden empfohlene Möglichkeiten zur Unterstützung von Dynamic Type beschrieben, um sicherzustellen, dass das Benutzererlebnis für alle geeignet ist.

Dynamic Type ist eine Barrierefreiheitsfunktion in iOS, mit der die Schriftgröße geräteweit entsprechend den Benutzereinstellungen skaliert werden kann. Die Einstellungen für Dynamic Type können Sie auf Ihrem Gerät unter den Accessibility Settings anpassen. Lesen Sie hier mehr von Apple zum Text Display.

Bereiten Sie Ihre Ansicht vor

Bevor Sie Dynamic Type implementieren, müssen die Ansichten Ihrer Anwendung bereit sein. Lesen Sie vor der Implementierung die folgenden Hinweise.

Stellen Sie sicher, dass Inhalte scrollen können

Ein beliebtes Paradigma im Plattformdesign sorgt dafür, dass Inhalte und Elemente in der Hauptansicht verfügbar bleiben, ohne dass ein Scrollen erforderlich ist. Obwohl es sich hervorragend für leicht verdauliche Inhalte und ein minimales UI eignet, ist es wichtig hervorzuheben, dass diese Designs in den Standardeinstellungen nicht scrollen sollten , dass sie nicht scrollen können , nicht.

Um Ihre Kunden bei der Verwendung unterstützender Technologien wie größerer Schriftgrößen richtig zu unterstützen, ist es wichtig, auf jedem Bildschirm mit Inhalt durchgängig eine UIScrollView oder ScrollView zu implementieren. Sobald der Inhalt auf größere Schriftgrößen skaliert wird, kann ein erheblicher Teil des Inhalts aus dem Bildschirm verdrängt werden. Wenn jemand, der Dynamic Type verwendet, Ihre App lädt und diese keine scrollbare Ansicht enthält, sind die Informationen nicht lesbar.

Stellen Sie sicher, dass Inhalte erweitert werden können

Wenn Sie mit Einschränkungen arbeiten, denken Sie daran, dass übergeordnete Ansichten auch erweitert werden müssen, um größere Schriftgrößen in Textelementen aufzunehmen. Nutzen Sie die contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo und lessThanOrEqualTo, um Ihre Ansichten nach Bedarf erweitern zu können. Begrenzen Sie die konstante Höhe und Breite für eine Ansicht, die Inhalt enthält.

Stellen Sie sicher, dass die Benutzerfreundlichkeit nicht beeinträchtigt wird

Unsachgemäße Einschränkungen können wichtige Ansichten und Steuerelemente neu anordnen, was sich negativ auf die Benutzerfreundlichkeit auswirkt. Testen Sie mit verschiedenen Schriftgrößen, um sicherzustellen, dass Inhaltsansichten wie erwartet angezeigt werden.

Sicherstellen, dass Textfelder Dynamic Type unterstützen

Jedes Bedienelement, das Text enthält, kann Dynamic Type unterstützen. Stellen Sie sicher, dass jedes Bedienelement erweitert werden kann, um verschiedene Schriftgrößen aufzunehmen, ohne den Inhalt vom Bildschirm zu drängen.

Festlegen der Anzahl der Zeilen

Bei jedem Text, bei dem die Gefahr eines Überlaufs besteht, sollte die Eigenschaft numberOfLines auf 0 gesetzt werden. Mit dieser Eigenschaft kann die Ansicht um die erforderliche Anzahl Zeilen erweitert werden können. Setzen Sie für ein UIButton die numberOfLines Eigenschaft auf 0 auf seinem titleLabel; dadurch kann das Steuerelement vertikal erweitert werden können.

Ohne ein Steuerelement, das sich für wachsenden Text erweitert, wird der Text ganz oder teilweise durch Auslassungspunkte ersetzt.

Halten Sie die Überschriften kurz und bündig

Überschriften sind für die VoiceOver-Navigation äußerst nützlich. Sie sollten beschreibend genug sein, um Kontext zu liefern, aber kurz genug, um bei der Textskalierung in einer Zeile zu bleiben.

Befolgen Sie die Apple-Richtlinien

Apple hat mehrere Richtlinien erstellt, um Entwicklern bei der Unterstützung von Dynamic Type zu helfen.

• Typografie-Richtlinien
• Schriftarten automatisch skalieren

Unterstützung von Dynamic Type

SwiftUI Views

In iOS 14 oder höher können Sie Dynamic Type auf zwei Arten unterstützen.

Benutzerdefinierte Schriftarten verwenden

Wenn Sie eine benutzerdefinierte Schriftart verwenden, setzen Sie die Eigenschaft .font auf .custom(_:size:relativeTo:), um sicherzustellen, dass die Schriftart relativ zum Schriftstil des Textelements skaliert wird.

Verwenden von Standardschriftarten

Bei Verwendung einer Standardschriftart wird der Text automatisch entsprechend seiner Größe skaliert. Wenn jedoch kein Schriftstil festgelegt ist, werden Textelemente nicht entsprechend ihrem Stil skaliert. Beispielsweise wird Text, der als Titel dient, anders skaliert als Text, der als Fließtext dient – wenn der Text größer wird, wird der Titeltext immer größer sein als der Fließtext.

Um ein optimales Ergebnis zu erzielen, geben Sie den Schriftstil unbedingt so an, dass er dem erwarteten Verhalten des Elements entspricht. Durch die Verwendung eines Modifikators wie: [a39] können Sie davon ausgehen, dass der Text der größte Text auf der Seite ist und als richtiger Titel dient. .font(.system(.largeTitle, design: .rounded))

UIKit-Ansichten

Beim Erstellen von UIKit-Ansichten gibt es derzeit vier Möglichkeiten, Dynamic Type zu unterstützen. Jede der folgenden Methoden führt zu einem ähnlichen Verhalten für den Endbenutzer.

Verwenden von Standardschriftarten

Die Verwendung der Standardschriftart von iOS ist die einfachste Möglichkeit, Dynamic Type zu unterstützen. Es ist die einzige, die in Storyboards und Code unterstützt wird.

Dieser Artikel von Apple behandelt das Einrichten von Dynamic Type in einem Storyboard.

Um Standardschriftarten programmgesteuert zu verwenden, befolgen Sie die unten aufgeführten Schritte.

Festlegen der Label Font auf einen bestimmten Textstil

Apple bietet TextStyles, eine Möglichkeit, Text in Ihrer Anwendung zu kategorisieren, sodass jeder Stil sichtbare Unterschiede aufweist. Beispielsweise wird der Textstil „Titel 1“ größer sein als der Textstil „Titel 2“, und beide Textstile werden größer sein als der Textstil „body“. Die Verwendung einer benutzerdefinierten Schriftart wird später unter [Verwenden von Schriftmetriken mit automatischer Schriftskalierung] behandelt(#font-metrics-with-auto-font-scaling).

Um die Schriftart eines Etiketts auf einen bestimmten Textstil einzustellen, verwenden Sie die preferredFont(forTextStyle: ...) Funktion:

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

Da jeder Textstil mit unterschiedlichen Schriftgrößen und -stilen verknüpft ist, wird er unterschiedlich skaliert. Weitere Informationen zu den einzelnen Textstilen finden Sie in der Dokumentation von Apple.

Setzen adjustsFontForContentSizeCategory

Obwohl die Schriftart skalierbar ist, bedeutet das nicht, dass dies automatisch von vornherein der Fall ist. Verwenden Sie adjustsFontForContentSizeCategory für alle Textelemente, um das Ändern von dynamischen Typeinstellungen zu unterstützen:

label.adjustsFontForContentSizeCategory = true

Benutzerdefinierte Schriftarten verwenden

Nachfolgend finden Sie drei Möglichkeiten zur Unterstützung von Dynamic Type mit benutzerdefinierten Schriftarten.

Schriftmetriken mit automatischer Schriftskalierung

Wenn die benutzerdefinierte Schriftart die Skalierung unterstützt, UIFontMetrics überlassen Sie die gesamte Arbeit dem Betriebssystem!

label.font = UIFont(name: <fontNameHere>, size: UILabel.defaultFontSize)

Mit UIFontMetrics können Sie eine benutzerdefinierte Schriftart mit einem bestimmten Textstil anhängen. Apples Designrichtlinien, wird erwähnt, dass unterschiedliche Punktgrößen für jeden Textstil verwendet werden. Anstatt die Punktgröße für jede dynamische Typeinstellung manuell festzulegen (siehe später), verwenden Sie die bereitgestellten TextStyle-Schriftgrößen und verknüpfen Sie die benutzerdefinierte Schriftart mit dem zugehörigen TextStyle. Beispielsweise kann mit dem TextStyle „caption 1“ eine Schriftart für alle Beschriftungen innerhalb der Anwendung festgelegt werden:

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

Auf Benachrichtigungen zur dynamischen Schriftgröße reagieren und TraitCollectionDidChange überschreiben sind hilfreich, wenn eine benutzerdefinierte Schriftart nicht gut skaliert wird oder die Punktgrößen für jeden Textstil nicht für die verwendete Schriftart geeignet sind.

Reagieren auf Benachrichtigungen zur dynamischen Typgröße

Die ursprünglichen Benachrichtigungsbeobachter werden weiterhin unterstützt (einschließlich Objective-C-Code). Erstellen Sie einen Listener für die Benachrichtigung:

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

Dann definieren Sie den Selektor. Nachfolgend finden Sie ein Beispiel:

func changeTextSize() {

    let newFontSize: CGFloat

    switch self.traitCollection.preferredContentSizeCategory {
            
        case .extraSmall: newFontSize = 14
        case .small: newFontSize = 15
        case .medium: newFontSize = 16
        case .large: newFontSize = 17
        case .extraLarge: newFontSize = 19
        case .extraExtraLarge: newFontSize = 21
        case .extraExtraExtraLarge: newFontSize = 23
            
        case .accessibilityMedium: newFontSize = 28
        case .accessibilityLarge: newFontSize = 33
        case .accessibilityExtraLarge: newFontSize = 40
        case .accessibilityExtraExtraLarge: newFontSize = 47
        case .accessibilityExtraExtraExtraLarge: newFontSize = 53
        default: break
    }

    guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
        self.font = UIFont.preferredFont(forTextStyle: .body)
        return
    }
        
    self.font = font.withSize(newFontSize)
}

Überschreiben TraitCollectionDidChange

Das Überschreiben TraitCollectionDidChange ähnelt dem Antworten auf die Benachrichtigung zur dynamischen Typgröße, jedoch ohne den Benachrichtigungs-Listener.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

    let newFontSize: CGFloat
        
    switch self.traitCollection.preferredContentSizeCategory {
            
        case .extraSmall: newFontSize = 14
        case .small: newFontSize = 15
        case .medium: newFontSize = 16
        case .large: newFontSize = 17
        case .extraLarge: newFontSize = 19
        case .extraExtraLarge: newFontSize = 21
        case .extraExtraExtraLarge: newFontSize = 23
                
        case .accessibilityMedium: newFontSize = 28
        case .accessibilityLarge: newFontSize = 33
        case .accessibilityExtraLarge: newFontSize = 40
        case .accessibilityExtraExtraLarge: newFontSize = 47
        case .accessibilityExtraExtraExtraLarge: newFontSize = 53
        default: break
    }
        
    guard let font = UIFont(name: "Arial", size: UIFont.labelFontSize) else {
        self.font = UIFont.preferredFont(forTextStyle: .body)
        return
    }

    self.font = font.withSize(newFontSize)
}