Handleiding voor tekstvergroting op mobiele apparaten

Mobiele applicaties moeten voldoen aan WCAG 1.4.4 Resize Text en inhoud schalen om ervoor te zorgen dat er geen verlies van informatie of functionaliteit is voor gebruikers die grotere lettergroottes nodig hebben. Deze handleiding behandelt aanbevolen manieren om tekstvergroting te ondersteunen op zowel iOS- als Android-platforms.

Platformspecificieke functies

iOS - Dynamische tekst

Dynamische tekst is een toegankelijkheidsfunctie binnen iOS waarmee lettergroottes overal op het apparaat kunnen worden geschaald op basis van de voorkeur van de gebruiker. Deze optie is te vinden onder Toegankelijkheidsinstellingen op het apparaat. Lees hier meer van Apple over tekstweergave.

Android - Tekst- en weergaveschaling

Voor Android-apparaten met versie 13 en hoger kun je de gewenste tekst- en inhoudsgrootte wijzigen in de toegankelijkheidsinstellingen. Gebruikers kunnen zowel de lettergrootte als de weergavegrootte onafhankelijk aanpassen. Lees meer over het wijzigen van deze instellingen in Google's ondersteuningsgids voor tekst- en weergave-instellingen.

Je weergaven voorbereiden

Zorg ervoor dat inhoud kan scrollen

iOS: Wanneer tekst wordt geschaald naar grotere lettergroottes, kan aanzienlijke content van het scherm verschoven worden. Implementeer een UIScrollView of ScrollView op elk scherm met content.

Android: Gebruik een ScrollView-element als container voor layoutelementen (constraint, lineair, relatief). ScrollViews zullen niet scrollen totdat de hoogte van het scherm (of breedte, voor horizontaal scrollen) is gevuld.

Uitzonderingen:

• Android: RecyclerViews hoeven niet binnen een ScrollView te worden ingebed. Laat items verticaal of horizontaal uitzetten.
• Android: Navigatie-elementen (onderbalken, tabbladen, werkbalken) moeten op hetzelfde niveau zijn als de omhullende ScrollView, niet erin.

Zorg ervoor dat inhoud kan uitbreiden

iOS: Maak gebruik van contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo en lessThanOrEqualTo om weergaven te laten vergroten. Beperk het instellen van constante hoogte en breedte voor weergaven die content bevatten.

Android: De meeste problemen met tekstresizing kunnen worden opgelost door de hoogte of breedte van een weergave niet te beperken. Laat TextView uitbreiden met ingestelde beperkingen. Gebruik wrap_content voor hoogte en match_parent of 0dp voor breedte.

Layout-specifieke overwegingen

Android ConstraintLayout: Stel de breedte van de weergave in op match_parent en de hoogte op wrap_content, of gebruik 0dp breedte om ruimte tussen beperkingen op te vullen. Zorg er altijd voor dat componenten verticaal kunnen uitbreiden.

Android RelativeLayout: Definieer begin- en eindrichtlijnen voor broederlijke elementen om ervoor te zorgen dat componenten op het scherm blijven.

Android LinearLayout: Kan zich aanpassen aan veranderende contentmaten als het in een ScrollView is en de match_parent-hoogte niet is ingesteld. Gebruik android:minHeight voor specifieke hoogtevereisten.

Aantal regels instellen

iOS: Stel de numberOfLines-eigenschap in op 0 voor elke tekst met overflow-potentieel. Voor UIButton, stel numberOfLines in op 0 op zijn titleLabel.

Android: Gebruik SP (schaal-onafhankelijke pixels) voor alle tekst, niet DP (dichtheid-onafhankelijke pixels). Je kunt de toegankelijkheidslinter van Android Studio gebruiken om problemen met SP-gebruik op te sporen.

Implementatie

iOS Implementatie

SwiftUI Views (iOS 14+)

Gebruik van standaardlettertypen:

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

Gebruik van aangepaste lettertypen:

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

UIKit Views

Gebruik van standaardlettertypen:

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

Gebruik van aangepaste lettertypen met UIFontMetrics:

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

Handmatige dynamische typeverwerking:

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

Basisinstelling:

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

ConstraintLayout Voorbeeld:

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

Programmerbare Tekstwijziging:

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

Testen en Beste Praktijken

Algemene Richtlijnen

• Test tegen verschillende lettergroottes om te zorgen dat inhoud correct wordt weergegeven.
• Houd koppen kort en beschrijvend voor betere toegankelijkheid.
• Zorg ervoor dat bruikbaarheid niet wordt beïnvloed door onjuiste beperkingen.
• Controleer of alle tekstbedieningen schaalvergroting ondersteunen zonder inhoud van het scherm te duwen.

Platforms-specifieke Overwegingen

iOS:

• Volg Apple's Typografie-richtlijnen en documentatie over het ondersteunen van dynamische typen.
• Gebruik geschikte TextStyles (.body, .title1, .caption1, enz.).
• Voor SwiftUI worden veel overwegingen standaard verzorgd maar moeten worden gecontroleerd.

Android:

• Gebruik korte titels voor toolbars; vermijd de Toolbar-widget voor dynamische titels.
• Bied duidelijke iconografie met beschrijvende contentbeschrijvingen voor navigatie onderaan.
• Maak gebruik van scrollbare weergaven voor tabbladen, ViewPager, en TabList-componenten.
• Beperk de hoogte van bedieningselementen niet.

Belangrijkste punten

1. Implementeer altijd scrollbare containers voor content die kan overstromen.
2. Gebruik platformgeschikte schaalunits (SP voor Android, TextStyles voor iOS).
3. Test grondig over verschillende lettergroottes en toegankelijkheidsinstellingen.
4. Laat weergaven uitbreiden in plaats van ze te beperken tot vaste afmetingen.
5. Volg platformrichtlijnen voor een optimale gebruikerservaring.