In ScrollView

Was wir überprüfen

Text sollte sich in scrollbaren Bereichen befinden, um sicherzustellen, dass alle Inhalte sichtbar sind – auch wenn der Text vergrößert wird.

Hinweis: Diese Regel ändert nicht die Textgröße und überprüft nicht, ob sie skaliert werden kann. Sie stellt lediglich sicher, dass der Text für den Benutzer erreichbar bleibt, wenn er skaliert oder aufgrund von Lokalisierung länger wird.

Fehlerhaftes Beispiel ❌

Das enthaltene Element ist ein UIView.

Vergrößerter Text wird abgeschnitten und cannot be reached by scrolling.

Gültiges Beispiel ✅

Das enthaltene Element ist ein UIScrollView.

Vergrößerter Text wird abgeschnitten, aber can be accessed by using the scroll bars.

Auf einen Blick

• Diese Regel hat erhebliche Auswirkungen auf Benutzer
• Wenn Benutzer größere Textgrößen aktivieren, können Inhalte überlaufen oder abgeschnitten werden und unzugänglich sein, wenn nicht gescrollt werden kann
• Diese Regel markiert Textelemente, die nicht in UIScrollView, ScrollView oder ähnlichen scrollbaren Containern umschlossen sind
• Überschriften, Fließtext, Schaltflächen mit Textbeschriftungen und Formularelemente benötigen alle Scroll-Unterstützung

Auswirkungen auf die Benutzer

Personen, die Dynamic Type verwenden, um auf iOS die Textgrößen zu skalieren, sind am stärksten von Verletzungen dieser Regel betroffen. Wenn Dynamic Type aktiviert ist, kann der Text aus dem Bildschirm laufen oder abgeschnitten werden, wenn die Größe erhöht wird, was dazu führen kann, dass Informationen nicht verfügbar sind. Scrollbare Ansichten sind eine großartige Möglichkeit, verschiedene Bildschirmgrößen zu unterstützen und sicherzustellen, dass alle Inhalte zugänglich sind.

In ScrollView Problem bestätigen

1. Wenn der Inhalt auf der Seite weniger als einen Bildschirm ausfüllt, machen Sie mit Dynamic Type alle Texte größer:
   • Wenn ein Simulator verwendet wird:
     1. Öffnen Sie Barrierefreiheitsinspektor
     2. Ändern Sie in der oberen linken Ecke des Inspektors das Gerät von Ihrem Mac auf den iOS-Simulator
     3. Wählen Sie die Einstellungen-Schaltfläche in der oberen rechten Ecke des Inspektors
     4. Unter Schriftgröße, verschieben Sie den Schieberegler auf eine größere Einstellung
   • Wenn ein iOS 13.0+ Gerät verwendet wird:
     1. Öffnen Sie die Einstellungen
     2. Wählen Sie Bedienungshilfen
     3. Wählen Sie Anzeige & Textgröße
     4. Wählen Sie Größerer Text
     5. Verschieben Sie den Schieberegler am unteren Rand der Seite auf eine größere Einstellung
2. Versuchen Sie, zum Textelement zu scrollen
   • Unzugänglich: Ein Teil des Textes verschwindet vom Bildschirm und Sie können nicht scrollen, um ihn zu erreichen
   • Zugänglich: Alle Inhalte bleiben durch Scrollen zugänglich, selbst bei den größten Textgrößen

Probleme beheben

Um In ScrollView Probleme zu lösen, fügen Sie UIScrollView oder ScrollView als übergeordneten Container für Textelemente in Ihrer Anwendung hinzu.

UIKit

Fügen Sie ein UIScrollView als übergeordneten Container für alle interaktiven und statischen Elemente auf Ihrem Bildschirm hinzu.

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

Fügen Sie Text innerhalb eines ScrollView hinzu:

     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

Verschachteln Sie Textelemente innerhalb eines ScrollView-Elements. Das ScrollView-Element sollte innerhalb eines SafeAreaView sein, um sicherzustellen, dass der Inhalt beim Scrollen innerhalb der Fenstergrenzen bleibt.

<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

Wickeln Sie den Bildschirminhalt in ein SingleChildScrollView, damit der Text zugänglich bleibt, wenn Benutzer ihre bevorzugte Schriftgröße vergrößern.

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!'),
          ],                                                                  
        ),
      ),                                                                      
    ),                                                                      
  ),
)

Häufig gestellte Fragen

Gibt es bekannte Einschränkungen bei dieser Regel?\

Ja.

• Diese Regel kann entweder „Fehler“ oder „Muss überprüft werden“ für sticky/floating Elemente melden.
• Wenn Text Teil eines festen Elements auf dem Bildschirm ist – eines, das auch beim Scrollen an derselben Stelle bleibt, wie ein UINavigationBar oder UITabBar – verwenden Sie ein UILargeContentViewer-Element anstelle eines ScrollView.
• Bitte beachten Sie, dass unsere Regel nicht erkennen kann, ob UILargeContentViewer für diese Elemente implementiert ist, und dennoch einen In ScrollView-Fehler anzeigen wird, obwohl Sie eine barrierefreie Erfahrung implementiert haben.

Kann ich diese Regel ignorieren?

Diese Regel hat erhebliche Auswirkungen auf die Benutzer, und Sie sollten alle von dieser Regel gefundenen Probleme beheben, mit Ausnahme der oben genannten bekannten Einschränkungen. In solchen Fällen können Sie die Regel ignorieren. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• Erfolgskriterium 1.4.4 - Text vergrößern

  Hinweis: Der volle Zugang zu den Ressourcen der Deque University erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines 2.2, Verständnis-Dokumentation
  • Verständnis des Erfolgskriteriums 1.4.4 - Text vergrößern
• UIScrollView Tutorial