Afgesneden tekst

Wat We Zoeken

Zichtbare inhoud van statische-tekst elementen mag niet worden afgesneden, of dit nu is bij de standaard tekengrootte of bij grotere Dynamische Type-groottes.

Faalvoorbeeld ❌

Geslaagd Voorbeeld ✅

In Eén Oogopslag

• Deze regel heeft een serieuze impact voor gebruikers
• Deze regel vereist iOS 17.0 of later en werkt op statische tekstelementen die zichtbaar en door de ontwikkelaar aanpasbaar zijn
• Statische tekst mag zijn zichtbare inhoud niet afsnijden in de huidige status of wanneer deze wordt vergroot
• Los dit op door tekst toe te staan zich aan te passen of te groeien:
  • Stel in numberOfLines = 0 (UIKit), of
  • Verwijder .clipped() / .lineLimit() (SwiftUI)

Impact voor Gebruikers

Gebruikers met slecht zicht, cognitieve beperkingen, of die op grotere tekstgroottes via Dynamische Type vertrouwen, kunnen mogelijk geen toegang krijgen tot informatie die is afgekapt. WCAG 1.4.4 (Tekst Verkleinen) vereist dat tekstinhoud zichtbaar en bruikbaar blijft wanneer de gebruiker tekst vergroot. Deze regel helpt reeds afgekapt inhoud te herkennen, evenals inhoud die wellicht wordt afgekapt wanneer de gebruiker zijn tekengrootte-instelling verhoogt.

Bevestig Afgesneden Tekstprobleem

1. Zoek Toegankelijkheid in iOS Instellingen
2. Selecteer Weergave & Tekstgrootte
3. Schakel om de hoogste toegankelijkheidstekengrootte te selecteren in het Grotere Tekst paneel
4. Observeer de verandering op het scherm:
   • Onaantoegankelijk: Inhoud wordt door deze weergave afgesneden
   • Toegankelijk: Inhoud past zich aan, groeit verticaal, of is toegankelijk door te scrollen

Los Problemen op

• Zorg ervoor dat door de ontwikkelaar aanpasbare tekstcontainers voldoende breedte en hoogte hebben om de volledige inhoud weer te geven, inclusief bij de grootste Dynamische Type-grootte die u wilt ondersteunen
• Gebruik Auto Layout-beperkingen die tekst laten omslaan of verticaal groeien
• Stel de numberOfLines eigenschap op tekst in om numberOfLines = 0
• Voor scrollbare inhoud, zorg ervoor dat de scrollweergave zelf correct is qua formaat zodat langere tekst in beeld kan scrollen in plaats van te worden afgekapt

UIKit

Om dit probleem in UIKit op te lossen, heb je meestal zowel een tekstcorrectie als een lay-outcorrectie nodig. Door in te stellen numberOfLines op 0 laat je het label omslaan, maar een vaste hoogtebeperking op het label of zijn container zal de omgeslagen tekst nog steeds afsnijden. Gebruik greaterThanOrEqualToConstant hoogtebeperkingen ook, zodat de container daadwerkelijk kan groeien.

• Stel in numberOfLines = 0 op UILabel om omslaan naar meerdere regels toe te staan (tekstcorrectie)

  label.numberOfLines = 0

• Vervang vaste hoogte Auto Layout-beperkingen door >= zodat de container kan groeien om de omwikkelde tekst te passen

  label.heightAnchor.constraint(greaterThanOrEqualToConstant: minHeight).isActive = true

SwiftUI

Het layout-systeem van SwiftUI past elementen automatisch aan op basis van hun inhoud. Vermijd het gebruik van een vaste frame of de clipped() eigenschap. De .fixedSize en minHeight eigenschappen zijn alleen nodig in uitzonderlijke gevallen waarin een bovenliggend element nog steeds zijn eigen groottebeperkingen oplegt aan de tekst.

• Het gebruik van de .clipped() eigenschap en/of vaste-formaat frames zijn de belangrijkste oorzaken van tekstafsnijdingsproblemen - het verwijderen van deze beperkingen is meestal al voldoende

  // before
  Text("Long content that needs to wrap")
      .truncationMode(.tail)
      .clipped()
      .frame(width: 50, height: 20)
  // after
  Text("Long content that needs to wrap")

• Verwijder .lineLimit(1) of stel in op nil, als aanvullende oplossing om tekst te laten afbreken

  Text("Your text here")
      .lineLimit(nil)

• Als een bovenliggende weergave de tekstgrootte beperkt, gebruik dan .fixedSize(horizontal: false, vertical: true) om het verticaal te laten uitzetten

  Text("Long content that needs to wrap")
      .fixedSize(horizontal: false, vertical: true)

• Stel optioneel minHeight in op het frame zodat het kan groeien met de inhoud

  Text("Content").frame(minHeight: minHeight)

• Gebruik ViewThatFits (iOS 16+) voor adaptieve layouts die de indeling wijzigen bij grotere maten, om afsnijding te voorkomen voordat deze optreedt

  ViewThatFits {
      HStack { Text("Label"); Text("Value") }   // compact — fits on one row
      VStack { Text("Label"); Text("Value") }   // falls back to stacked if needed
  }

React Native

Om dit probleem in React Native te voorkomen, zorg ervoor dat weergaven flexibele hoogtes hebben. U kunt een van de volgende benaderingen gebruiken.

• Stel helemaal geen hoogte in - de container zal zichzelf aanpassen aan de inhoud.

  <View style={{ padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Gebruik de minHeight eigenschap in plaats van height - dit stelt een ondergrens in voor korte inhoud, maar de container kan hoger groeien als de tekst meer ruimte nodig heeft.

  <View style={{ minHeight: 30, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Gebruik een flex layout, zodat de container met zijn inhoud groeit en nooit onder zijn natuurlijke grootte wordt gedrukt.

  <View style={{ flexGrow: 1, flexShrink: 0, padding: 8 }}>
    <Text>{text}</Text>
  </View>

• Gebruik opvulling in plaats van een vaste hoogte - de intrinsieke grootte van de tekst en de hoeveelheid opvulling zullen de hoogte van de container bepalen.

  <View style={{ padding: 16 }}>
    <Text>{text}</Text>
  </View>

• Stel numberOfLines={0} in zodat de tekst naar een willekeurig aantal regels kan worden afgebroken, en combineer dit met een expliciete lineHeight om verticale tussenruimte te regelen.

  <View style={{ padding: 8 }}>
    <Text numberOfLines={0} style={{ lineHeight: 30 }}>{text}</Text>
  </View>

Flutter

Het oplossen van dit probleem in Flutter vereist doorgaans zowel een tekstoplossing als een lay-outoplossing samen. Text widgets worden standaard omwikkeld, maar een ouder met vaste hoogte of een niet-flexibele Row kind kan de omwikkelde tekst nog steeds afsnijden. Laat containers met hun inhoud meegroeien en respecteer de systeemschaal van de tekst zodat Dynamische Type de lettergrootte kan schalen.

• Sta toe dat Text over meerdere regels wordt omgebroken door maxLines niet in te stellen en softWrap: truete behouden, wat de standaard is

  Text(
    longString,
    softWrap: true,
  )

• Gebruik opvulling op containers die tekst omhullen zodat de doos met zijn inhoud groeit

  Container(
    padding: const EdgeInsets.all(8),
    child: Text(longString),
  )

• Omhul Text in Expanded of Flexible wanneer het zich binnen een Rowbevindt, zodat het zich naar meerdere regels kan uitbreiden wanneer de lettergrootte toeneemt

  Row(
    children: [
      const Icon(Icons.info),
      Expanded(child: Text(longString)),
    ],
  )

• Maak het scherm scrollbaar zodat geschaalde tekst bereikbaar blijft wanneer deze buiten de viewport groeit

  SingleChildScrollView(       
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(longString),
    ),
  )

Kan ik deze regel negeren?

Afgesneden tekst heeft een ernstige impact voor gebruikers en we raden aan dit probleem in bijna alle gevallen op te lossen. Tekst die is afgesneden is simpelweg onleesbaar en er is geen gelijkwaardige oplossing voor een gebruiker die afhankelijk is van grote Dynamische Type-groottes.

In zeldzame gevallen kunt u overwegen het resultaat te negeren als het afgesneden element decoratief of overbodig is - bijvoorbeeld een kort label dat volledig wordt overgebracht door een ander nabijgelegen element of door een toegankelijkheidslabel van een afbeelding. Leer meer over regels negeren.

Bronnen

Cursoverzichten van Deque University

• 1.4.4a Resizen (200%) (Zie Native Mobile iOS)

Opmerking: Volledige toegang tot Deque University-bronnen vereist een abonnement.

Andere Bronnen

• WCAG 2.1 Begrijpelijke Documenten
  • Gerelateerd aan Inzicht in SC 1.4.4 - Tekst Resizen