In ScrollView

Waar We Op Letten

Tekst moet worden geplaatst in scrollbare gebieden, zodat alle inhoud zichtbaar is - zelfs wanneer tekst wordt vergroot.

Let op: Deze regel vergroot de tekst niet en controleert niet of het schaalt. Het controleert of tekst nog steeds bereikbaar is voor de gebruiker als deze schaalt of langer wordt door lokalisatie.

Niet-toegelaten Voorbeeld ❌

Bevattingselement is een UIView.

Vergrote tekst wordt afgebroken en cannot be reached by scrolling.

Toegelaten Voorbeeld ✅

Bevattingselement is een UIScrollView.

Vergrote tekst wordt afgebroken, maar can be accessed by using the scroll bars.

In Een Oogopslag

• Deze regel heeft een grote impact op gebruikers
• Wanneer gebruikers grotere tekstformaten inschakelen, kan inhoud overlopen of worden afgebroken en ontoegankelijk worden als ze niet kunnen scrollen
• Deze regel markeert tekstelementen die niet zijn ingesloten in UIScrollView, ScrollView of soortgelijke scrollbare containers
• Koppen, hoofdtekst, knoppen met tekstlabels en formelementen hebben allemaal scrollondersteuning nodig

Impact op Gebruikers

Mensen die Dynamic Type gebruiken om tekstformaten op iOS te schalen, worden het meest getroffen door schendingen van deze regel. Wanneer Dynamic Type is ingeschakeld, kan tekst van het scherm af bewegen - of worden afgebroken - als de grootte wordt vergroot, waardoor de informatie mogelijk ontoegankelijk wordt. Scrollbare weergaven zijn een geweldige manier om verschillende schermformaten te ondersteunen, zodat alle inhoud toegankelijk is.

Bevestig In ScrollView Probleem

1. Als de inhoud op de pagina minder dan één scherm beslaat, maak dan alle tekst groter met Dynamic Type:
   • Als u een simulator gebruikt:
     1. Open Toegankelijkheidsinspecteur
     2. Verander linksboven in de inspecteur het apparaat van je Mac naar de iOS-simulator
     3. Selecteer de Instellingen knop in de rechterbovenhoek van de inspecteur
     4. Ga naar Lettergrootte en verplaats de schuifregelaar naar een grotere instelling
   • Als u een iOS 13.0+ apparaat gebruikt:
     1. Open de Instellingen
     2. Selecteer Toegankelijkheid
     3. Selecteer Weergave & Tekstgrootte
     4. Selecteer Grotere Tekst
     5. Verschuif de schuifregelaar onderaan de pagina naar een grotere instelling
2. Probeer naar het tekstelement te scrollen
   • Niet toegankelijk: Een deel van de tekst verdwijnt buiten het scherm en je kunt niet scrollen om het te bereiken
   • Toegankelijk: Alle inhoud blijft toegankelijk door middel van scrollen, zelfs bij de grootste tekstgroottes

Problemen Oplossen

Om In ScrollView problemen op te lossen, voeg UIScrollView of ScrollView toe als een oudercontainer voor tekstelementen in je applicatie.

UIKit

Voeg een UIScrollView toe als de oudercontainer voor alle interactieve en statische elementen op je scherm.

class MyViewController: UIViewController {
    override func viewDidLoad() {
      super.viewDidLoad()
      
      let scrollView = UIScrollView()
      let contentView = UIView()
      
      view.addSubview(scrollView) /* Add the scroll view to the main view first */
      scrollView.addSubview(contentView)  /* Add any content to the scroll view */ 
      
      /* Add your text and buttons to contentView instead of view */
      let label = UILabel()
      label.text = "This content can overflow when resized, so put it inside of a scrollView!"
      label.numberOfLines = 0
      contentView.addSubview(label)
      
      /* Set up basic constraints */
      scrollView.setConstraintsFillParentView()
      contentView.setConstraintsFillParentView()
  }
}

SwiftUI

Tekst toevoegen binnen een ScrollView:

     var body: some View {
        ScrollView {
            VStack  {
                HStack {
                    Text("This text can grow, and users can scroll so they can still see all of it!")
                        .padding()
                }
            }
        }
    }

React Native

Plaats tekstelementen binnen een ScrollView element. Het ScrollView element moet binnen een SafeAreaView zitten om ervoor te zorgen dat de inhoud binnen de grenzen van het venster blijft tijdens het scrollen.

<SafeAreaView style={{ flex: 1 }}>
   <ScrollView>
     <View>
       <Text> Make sure each screen has a ScrollView so users can access all of your content! </Text>
     </View>
   </ScrollView>
</SafeAreaView>

Flutter

Omhul inhoud van het scherm in een SingleChildScrollView zodat tekst toegankelijk blijft wanneer gebruikers hun voorkeurslettergrootte vergroten.

Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Padding(                                                         
        padding: EdgeInsets.all(12.0),
        child: Column(                                                        
          children: [                                                       
            Text('This text can grow when users increase their font size, and they can scroll to see all of it!'),
          ],                                                                  
        ),
      ),                                                                      
    ),                                                                      
  ),
)

Kan Ik Deze Regel Negeren?

Deze regel heeft een serieuze impact voor gebruikers en je zou alle problemen die door deze regel worden gevonden moeten oplossen, met uitzondering van de volgende bekende beperkingen. Als tekst deel uitmaakt van een vast element op het scherm, een element dat op dezelfde plaats blijft, zelfs wanneer het scherm wordt gescrold, zoals een UINavigationBar of UITabBar, gebruik dan een UILargeContentViewer-element in plaats van een ScrollView. Let op dat onze regel niet kan detecteren of UILargeContentViewer is geïmplementeerd voor deze elementen en zal nog steeds een In ScrollView-foutmelding geven, zelfs als je een toegankelijk ervaring hebt geïmplementeerd. In een dergelijk geval kun je ervoor kiezen de regel te negeren. Leer meer over regels negeren.

Hulpmiddelen

Deque University cursuspagina's

• Succescriterium 1.4.4 - Tekst vergroten

  Let op: Volledige toegang tot Deque University-middelen vereist een abonnement.

Andere hulpmiddelen

• Richtlijnen voor Toegankelijke Webinhoud 2.2, Uitlegdocumenten
  • Uitleg van Succescriterium 1.4.4 - Tekst vergroten
• UIScrollView-tutorial