Tegenstrijdige Weergaven

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Wat We Controleren

Een weergave is elk zichtbaar UI-element op het scherm, zoals een tekstlabel, afbeelding of knop. Weergaven die informatie bevatten, mogen niet gedeeltelijk of volledig met een andere weergave overlappen. Overlappende weergaven kunnen inhoud onleesbaar of volledig onzichtbaar maken, vooral wanneer Dynamic Type de tekstgrootte vergroot.

Deze regel handhaaft een best practice zoals vastgelegd door Apple's Human Interface Guidelines. U kunt deze regel uitschakelen via de Mobiel Dashboard of door de regel te negeren in tests geschreven voor iOS.

Foutief Voorbeeld ❌

Correct Voorbeeld ✅

In Eén Oogopslag

• Deze regel heeft een geringe impact voor gebruikers
• Weergaven (zichtbare UI-elementen zoals tekstlabels en afbeeldingen) mogen elkaar niet overlappen
• Dynamic Type kan de tekstgrootte tijdens runtime vergroten, waardoor voorheen gescheiden elementen op elkaar stuiten

Impact op Gebruikers

Gezichtsbedrog gebruikers worden het meest getroffen, vooral degenen die grotere Dynamic Type-instellingen gebruiken. Wanneer informatieve weergaven overlappen, kan inhoud gedeeltelijk of volledig onleesbaar worden. Gebruikers die afhankelijk zijn van grotere tekstgroottes, zullen dit probleem waarschijnlijk vaker ervaren, zelfs als de lay-out correct lijkt bij standaardgroottes.

Bevestig Probleem van Overlappende Weergaven

1. Kijk naar de grenzen van elke informatieve weergave op het scherm.
2. Een van de volgende dingen zal van toepassing zijn:
   • Ontoegankelijk: De grenzen van een weergave overlappen met die van een andere weergave.
   • Toegankelijk: Geen van de informatieve weergaven heeft overlappende grenzen.
3. Als het scherm tekstelementen bevat, vergroot de Dynamic Type-grootte in de instellingen en herhaal de controle om te bevestigen dat weergaven niet beginnen te overlappen bij grotere groottes.

Los Problemen op

Overlappende weergaven worden meestal veroorzaakt door ontbrekende of onvoldoende lay-outbeperkingen die geen rekening houden met Dynamic Type. De exacte oplossing varieert per lay-out, maar het doel is om ervoor te zorgen dat informatieve elementen altijd voldoende ruimte tussen elkaar hebben.

UIKit

Zorg ervoor dat beperkingen tussen aangrenzende informatieve elementen voldoende ruimte bieden. Als er geen beperking bestaat tussen twee elementen die dicht bij elkaar zitten, voeg er dan een toe zodat ze niet kunnen overlappen wanneer Dynamic Type hun grootte vergroot.

SwiftUI

Zorg ervoor dat elke weergave lay-outmodificatoren heeft die voorkomen dat de grenzen overlappen met aangrenzende weergaven. Gebruik HStack en VStack als hoofdcontainers om het lay-outsysteem de afstand automatisch te laten beheren. Vermijd ZStack als ouder voor weergaven die tekst bevatten, omdat het elementen bovenop elkaar plaatst.

React Native

Zorg ervoor dat weergaven die tekst of andere schaalbare inhoud bevatten geen maxHeight ingesteld hebben, wat kan leiden tot afknippen van inhoud of dat elementen in aangrenzende gebieden geduwd worden als de tekstgrootte toeneemt. Overweeg bij gebruik van flex lay-out een waarde voor de gap-eigenschap toe te voegen om een consistente ruimte tussen elementen te behouden.

Kan Ik Deze Regel Negeren?

Overlappende Weergaven heeft een Geringe impact voor gebruikers en handhaaft een best practice van Apple in plaats van een strikte WCAG-vereiste. U kunt deze regel volledig uitschakelen via de Mobiel Dashboard, of individuele bevindingen in uw iOS-tests negeren. Lees meer over negeren van regels.

Bronnen

• Apple Human Interface Guidelines
  • Typografie