In ScrollView
Cosa Controlliamo
Il testo dovrebbe essere contenuto all'interno di aree scrollabili, per garantire che tutto il contenuto sia visibile, anche quando il testo viene ridimensionato.
Nota: Questa regola non ridimensiona il testo né verifica che possa essere scalato. Controlla per assicurarsi che il testo rimanga accessibile all'utente se venga scalato o si allunghi a causa della localizzazione.
Esempio di Errore ❌
L'elemento contenente è un UIView.
Il testo ridimensionato è tagliato e cannot be reached by scrolling.
Esempio Corretto ✅
L'elemento contenente è un UIScrollView.
Il testo ridimensionato è tagliato, ma can be accessed by using the scroll bars.
A Colpo d'Occhio
- Questa regola ha un impatto serio per gli utenti
- Quando gli utenti abilitano dimensioni di testo maggiori, il contenuto può traboccare o essere troncato e diventare inaccessibile se non sono in grado di scorrere
- Questa regola evidenzia gli elementi di testo che non sono racchiusi in
UIScrollView,ScrollView, o contenitori scrollabili simili - Intestazioni, testi, pulsanti con etichette di testo ed elementi del modulo richiedono tutti il supporto per lo scrolling
Impatto sugli Utenti
Le persone che utilizzano Dynamic Type per scalare le dimensioni del testo su iOS sono maggiormente impattate dalle violazioni di questa regola. Quando Dynamic Type è attivo, il testo può spostarsi fuori dallo schermo - o essere troncato - man mano che la dimensione aumenta, rendendo potenzialmente le informazioni non disponibili. Le viste scrollabili sono un ottimo modo per supportare diverse dimensioni dello schermo, garantendo che tutto il contenuto sia accessibile.
Conferma Problema In ScrollView
- Se il contenuto della pagina occupa meno di uno schermo, ingrandisci tutto il testo con Dynamic Type:
- Se usi un simulatore:
- Apri Accessibility Inspector
- Nell'angolo in alto a sinistra dell'Ispettore, cambia il dispositivo da Mac al simulatore iOS
- Seleziona il pulsante Impostazioni nell'angolo in alto a destra dell'Ispettore
- Sotto Dimensione Font, sposta il cursore su un'impostazione più grande
- Se usi un dispositivo iOS 13.0+:
- Apri Impostazioni
- Seleziona Accessibilità
- Seleziona Visualizzazione e Dimensione Testo
- Seleziona Testo Più Grande
- Sposta il cursore in fondo alla pagina su un'impostazione più grande
- Se usi un simulatore:
- Prova a scorrere fino all'elemento di testo
- Inaccessibile: Parte del testo scompare fuori dallo schermo e non puoi scorrere per raggiungerlo
- Accessibile: Tutto il contenuto rimane accessibile scorrendo, anche alle dimensioni di testo più grandi
Risoluzione dei Problemi
Per risolvere i problemi di In ScrollView, aggiungi UIScrollView o ScrollView come contenitore principale per gli elementi di testo nella tua applicazione.
UIKit
Aggiungi un UIScrollView come contenitore genitore per tutti gli elementi interattivi e statici sul tuo schermo.
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
Aggiungi testo all'interno di uno 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
Annida elementi di testo all'interno di un elemento ScrollView. L'elemento ScrollView dovrebbe trovarsi all'interno di un SafeAreaView per garantire che il contenuto rimanga entro i limiti della finestra durante lo scorrimento.
<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
Avvolgi il contenuto dello schermo in un SingleChildScrollView in modo che il testo rimanga accessibile quando gli utenti aumentano la dimensione del carattere preferito.
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!'),
],
),
),
),
),
)Domande frequenti
Ci sono delle limitazioni note con questa regola?\
Sì.
- Questa regola può segnalare "Errore" o "Necessita revisione" per elementi a scomparsa/fluttuanti.
- Se il testo è parte di un elemento fisso sullo schermo - uno che rimane nello stesso posto anche quando lo schermo viene scorsiato, come un
UINavigationBaroUITabBar- utilizza un elementoUILargeContentViewerinvece diScrollView. - Si prega di notare che la nostra regola non può rilevare se
UILargeContentViewerè implementato per questi elementi e segnalerà comunque un errore In ScrollView anche se hai realizzato un'esperienza accessibile.
Posso ignorare questa regola?
Questa regola ha un impatto serio sugli utenti e dovresti correggere tutti i problemi individuati da questa regola, ad eccezione delle limitazioni note elencate sopra. In casi come questi, potresti scegliere di ignorare la regola. Scopri di più su ignorando le regole.
Risorse
Pagine del corso Deque University
-
Criterio di Successo 1.4.4 - Ridimensionare il Testo
Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.
Altre Risorse
- Linee guida per l'accessibilità dei contenuti web 2.2, Documenti di comprensione
- Tutorial su UIScrollView