Leitfaden zur Unterstützung der Textskalierung

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

Android-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 den WCAG 1.4.4 Richtlinien zur Textgrößenänderung zu entsprechen. Informationen sollten allen zugänglich gemacht werden. In diesem Handbuch werden empfohlene Möglichkeiten zur Unterstützung der Textskalierung beschrieben, um sicherzustellen, dass das Benutzererlebnis für alle geeignet ist.

Für Android-Geräte ab Version 13 gibt es eine Eingabehilfeeinstellung zum Ändern der bevorzugten Text- und Inhaltsgröße. Weitere Informationen zum Ändern dieser Einstellungen finden Sie im Google-Supporthandbuch für Text- und Anzeigeeinstellungen

Bereiten Sie Ihre Ansicht vor

Bevor skalierbarer Text unterstützt wird, müssen die Views Ihrer Anwendung bereit sein. Lesen Sie vor der Implementierung die folgenden Hinweise.

ScrollView

Immer wenn Text auf dem Bildschirm angezeigt wird, sollte dieser den bevorzugten Text- und Anzeigeeinstellungen des Benutzers entsprechen. Bei einer größeren Schriftart kann es schnell passieren, dass der Text über den Bildschirm hinausläuft. Aus diesem Grund ist ein ScrollView-Element als Container für das Layout-Element (ConstraintLayout, LinearLayout, RelativeLayout) zwingend erforderlich, um den Text auch über die Bildschirmgrenzen hinaus verfügbar zu machen. Beachten Sie, dass ScrollView nicht scrollen, bis die Bildschirmhöhe (oder Breite beim horizontalen Scrollen) ausgefüllt ist.

Ausnahmen:

  • RecyclerViews müssen nicht in ein ScrollView eingebettet werden. Erlauben Sie stattdessen, dass sich die Elemente entweder vertikal oder horizontal in ihrer Höhe/Breite ausdehnen, um die Skalierung des Textes zu ermöglichen.

– Navigationselemente in unteren Leisten, Registerkarten, Symbolleisten usw. sollten auf der gleichen Ebene wie das enthaltene ScrollView liegen und nicht innerhalb ScrollView. Es wird empfohlen, immer nur eine statische Ansicht zu verwenden, um das Ansichtsfenster nicht zu sehr einzuschränken.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/custom_toolbar"/>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:background="@color/cauldron_main_bg">
            <TextView...>
            <TextView...>
            <androidx.constraintlayout.widget.Guideline...>
            <androidx.constraintlayout.widget.Guideline...>
            <androidx.constraintlayout.widget.Guideline...>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout

ConstraintLayouts eignen sich hervorragend für die Skalierbarkeit von Text aufgrund der flexiblen Fähigkeiten und Anleitungen, die Sie definieren können. Die meisten Probleme bei der Größenänderung von Text können gelöst werden, indem die Höhe oder Breite einer Ansicht nicht eingeschränkt wird. Indem einem TextView erlaubt wird, sich mit festgelegten Einschränkungen zu erweitern, erkennt die Ansicht, wie sie mit der Textansicht mitwächst. Auf diese Weise ist der Text für den Endbenutzer immer verfügbar und wird nicht abgeschnitten oder außerhalb des Bildschirms angezeigt.

Eine gängige Vorgehensweise besteht darin, die Breite der view so einzustellen, dass sie der des übergeordneten Elements entspricht, während die Höhe so eingestellt wird, dass sie den Inhalt umschließt. Dadurch bleibt die view in der definierten Breite, die Höhe kann jedoch an alle darin enthaltenen Inhalte angepasst werden, deren Größe oder Länge sich ändern kann (denken Sie daran, dass sich der Text je nach Status ändert). Eine andere Möglichkeit wäre, android:layout_width auf 0 dp zu setzen, wodurch die Komponente den Raum zwischen allen Start- und Endbeschränkungen ausfüllen kann. Überprüfen Sie in diesem Szenario immer, ob die Komponenten vertikal erweitert werden können, um dem wachsenden Text Platz zu bieten.

<Button
    andriod:id="@+id/logIn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="24dp"
    android:text="Login"
    app:layout_constraintEnd_toEndOf="@+id/right"
    app:layout_constraintStart_toEndOf="@+id/left"
    app:layout_constraintTop_toBottomOf="@+id/password" />

RelativeLayout

RelativeLayouts sind etwas weniger flexibel als ConstraintLayout. Achten Sie darauf, die Start- und Endrichtlinien für Geschwisterelemente zu definieren, damit die Komponenten auf dem Bildschirm angezeigt werden und lesbar sind.

LinearLayout

LinearLayout können sich an veränderte Inhaltsgrößen anpassen, sofern sie sich in einem ScrollView befinden und weder für sich selbst noch für ein untergeordnetes Element eine match_parent Höhe festlegen LinearLayout. Wenn eine bestimmte Höhe benötigt wird, verwenden Sie das Attribut android:minHeight als Standardgröße.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:minHeight="30dp">

Änderung des Inhalts

In den folgenden Abschnitten werden einige der verfügbaren Android-Einstellungen hervorgehoben, mit denen Sie die Inhaltsgröße auf verschiedene Weise ändern können. Stellen Sie sicher, dass Ihre Ansichten auf wachsenden Inhalt reagieren, damit der Inhalt auf dem Bildschirm verfügbar bleibt und keine Auslassungspunkte oder Kürzungen aufweist.

Skalieren von Text

Zwei Screenshots, die den Android-Bildschirm mit den Schriftarteinstellungen zeigen. Der erste Screenshot zeigt die Standardtextgröße. Der zweite Screenshot zeigt die größte Textgröße.

Eine größere Schriftgröße kann für viele Benutzer mit Sehbehinderungen nützlich sein. Sie sollten beim Einstellen der Schriftgröße in Ihrer Anwendung immer die Präferenzen des Benutzers berücksichtigen.

Displaygröße

Die Anzeigegröße ändert die Gesamtgröße der Elemente auf dem Bildschirm, was Benutzern mit eingeschränkter Motorik und/oder Sehbehinderungen zugute kommt.

Zwei Screenshots, die Unterschiede in der Anzeigegröße einer Beispielanwendung mit kleinem und größerem Text zeigen. Der Hauptinhalt ist auf dem zweiten Screenshot mit dem größeren Text weniger sichtbar.

Textgröße

Wenn es um die Größenbestimmung von Widgets geht, finden Sie in Android zwei Maßeinheiten: DP oder DIP für dichteunabhängige Punkte und SP oder SIP für skalierungsunabhängige Punkte. Jeder Text sollte SP verwenden, um die Konsistenz zwischen Geräten zu wahren und die Schriftskalierung zu unterstützen. Nutzen Sie den Accessibility-Linter von Android Studio, um eine Warnung anzuzeigen, wenn SP nicht für TextViews verwendet wurde.

Möglicherweise stoßen Sie auf Szenarien, in denen eine teilweise Textänderung erforderlich ist, beispielsweise bei einem Inline-Link. Für TextViews können Sie SpannableStringBuilder verwenden, um den Text direkt zu ändern oder die Textgröße mit AbsoluteSpanSize anzupassen. Vermeiden Sie fest codierte Größen, um die Skalierung zu unterstützen.

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(size: 70, dip: true), start:15, end:18, Spannded.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Überlegungen zu Widgets

Einige Tipps zur Verwendung nativer Android-Komponenten und Gewährleistung einer guten Zugänglichkeit.

  • Toolbar: Wenn Sie eine Symbolleiste verwenden, empfehlen wir einen kurzen Titel, um Kontext bereitzustellen. Wenn Sie einen dynamischen Titel verwenden, empfehlen wir, das Toolbar Widget nicht zu verwenden.
  • BottomNavBar: Eine eindeutige Ikonographie mit beschreibenden Inhaltsbeschreibungen trägt dazu bei, den dringend benötigten Kontext für die Navigation bereitzustellen, ohne dass die Gefahr einer Überlappung der Beschriftungen besteht.
  • Tabs, ViewPager, TabList und mehr: Verwenden Sie bei Bedarf eine scrollbare Ansicht, damit ein Benutzer mit der Anwendung im vollständigen Kontext der ihm zur Verfügung stehenden Informationen interagieren kann. Begrenzen Sie nicht die Höhe eines Steuerelements.