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 vergroot tot grotere lettergroottes, kan aanzienlijke inhoud van het scherm worden geduwd. Implementeer een UIScrollView of ScrollView op elk scherm met inhoud.

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

Uitzonderingen:

• Android: RecyclerViews hoeven niet te worden ingebed binnen een ScrollView. Laat items verticaal of horizontaal uitbreiden.
• Android: Navigatie-elementen (onderste balken, tabbladen, werkbalken) moeten op hetzelfde niveau zijn als de inhoudende ScrollView, niet binnenin.

Zorg ervoor dat inhoud kan uitbreiden

iOS: Gebruik contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo, en lessThanOrEqualTo om weergaven te laten uitbreiden. Beperk het instellen van vaste hoogte en breedte voor weergaven die inhoud bevatten.

Android: De meeste problemen met het herschalen van tekst kunnen worden opgelost door de hoogte of breedte van een weergave niet te limiteren. Laat TextView uitbreiden met ingestelde beperkingen. Gebruik wrap_content voor hoogte en ofwel 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 aangrenzende elementen om ervoor te zorgen dat componenten op het scherm blijven.

Android LinearLayout: Kan zich aanpassen aan veranderende inhoudsmaten als in een ScrollView en stel de match_parent hoogte niet in. Gebruik android:minHeight voor specifieke hoogte-eisen.

Aantal regels instellen

iOS: Stel de numberOfLines eigenschap in op 0 voor alle tekst met mogelijk overflow. Voor UIButton, stel numberOfLines in op 0 op de titleLabel.

Android: Gebruik SP (schaal-onafhankelijke pixels) voor alle tekst, niet DP (dichtheidsonafhankelijke 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 inhoud die kan overlopen.
2. Gebruik platformgeschikte schaalunits (SP voor Android, TextStyles voor iOS).
3. Test grondig op verschillende lettergroottes en toegankelijkheidsinstellingen.
4. Laat weergaven uitbreiden in plaats van deze tot vaste afmetingen te beperken.
5. Volg platformrichtlijnen voor een optimale gebruikerservaring.