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 numberOfLines = 0 in (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. Vind Toegankelijkheid in iOS Instellingen
2. Selecteer Weergave & Tekstgrootte
3. Schakel naar de hoogste toegankelijkheidstekstgrootte 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 op 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 tekst- als een lay-outoplossing nodig. Door numberOfLines op 0 in te stellen kan het label omwikkeld worden, maar een vaste hoogtebeperking op het label of de container zal de omwikkelde tekst nog steeds afsnijden. Gebruik ook greaterThanOrEqualToConstant-hoogtebeperkingen, zodat de container daadwerkelijk kan groeien.

• Stel numberOfLines = 0 in op UILabel om meerregelige omwikkeling toe te staan (tekstoplossing)

  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 lay-outsysteem van SwiftUI past elementen automatisch aan hun inhoud aan. Vermijd het gebruik van een vaste frame of de clipped()-eigenschap. De .fixedSize- en minHeight-eigenschappen zijn alleen nodig in uitzonderlijke gevallen waarin een ouder element nog steeds zijn eigen groottebeperkingen aan de tekst oplegt.

• Het gebruik van de .clipped()-eigenschap en/of vaste framegroottes zijn de belangrijkste oorzaken van doorgedrukte tekstschendingen - het verwijderen van deze beperkingen is meestal alles dat nodig is

  // 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 tekstomwikkeling toe te staan

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

• Als een hoofdweergave de tekstgrootte beperkt, gebruik dan .fixedSize(horizontal: false, vertical: true) om verticale uitbreiding toe te staan

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

• Stel eventueel 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 van opstelling veranderen bij grotere maten, om afsnijden te voorkomen voordat het plaatsvindt

  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 voor korte inhoud, maar de container kan hoger worden wanneer 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 elk aantal regels kan worden omwikkeld, en combineer het met een expliciete lineHeight om verticale afstand te controleren.

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

Flutter

Om dit probleem in Flutter op te lossen, is meestal zowel een tekst- als een lay-outoplossing nodig. Text-widgets worden standaard omwikkeld, maar een hoofd met vaste hoogte of een niet-flexibele Row-kind kan de omwikkelde tekst nog steeds afsnijden. Laat containers toe om te dimensioneren met hun inhoud en respecteer de systeemschaal voor tekst zodat Dynamische Type de lettergrootte kan aanpassen.

• Laat Text om meerdere regels wikkelen door maxLines niet in te stellen en softWrap: true aan te houden, 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),
  )

• Omwikkel Text in Expanded of Flexible wanneer het zich binnen een Row bevindt, zodat het naar meerdere regels kan worden gewikkeld terwijl de lettergrootte schaalt

  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 om dit probleem in bijna alle gevallen op te lossen. Tekst die wordt afgesneden is gewoon niet leesbaar, en er is geen gelijkwaardige oplossing voor een gebruiker die vertrouwt op grote Dynamische Type-groottes.

In zeldzame gevallen kunt u overwegen om het resultaat te negeren als het afgeknotte element decoratief of overbodig is - bijvoorbeeld een kort label dat volledig wordt weergegeven door een ander nabijgelegen element of door een toegankelijkheidslabel van een afbeelding. Meer informatie over regels negeren.

Bronnen

Cursoverzichten van Deque University

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

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

Andere Bronnen

• WCAG 2.1 Begrijpelijke Documenten
  • Betreft Begrip SC 1.4.4 - Tekst Schalen