En ScrollView
El texto debe estar dentro de una vista desplazable para garantizar que todos los elementos sean visibles en todos los tamaños de pantalla.
Impacto
Las personas que utilizan Dynamic Type en iOS son las más afectadas. Cuando Dynamic Type está activado, el tamaño del texto se puede aumentar y puede moverse fuera de la pantalla. Si el texto no está dentro de una vista de desplazamiento, la información no estará disponible para el usuario final. Las vistas de desplazamiento son una excelente manera de admitir distintos tamaños de pantalla, lo que garantiza que todo el contenido sea accesible.
Confirmación
- Si el contenido de la página ocupa menos de una pantalla, agrande todo el texto con Dynamic Type:
- Si utiliza un simulador:
- Abra el Inspector de Accesibilidad
- En la esquina superior izquierda del inspector, cambie el dispositivo de tu Mac al simulador de iOS
- Seleccione el botón "Configuración" en la esquina superior derecha del inspector.
- En "Tamaño de fuente", mueva el control deslizante a un ajuste mayor
- Si utiliza un dispositivo iOS 13.0+:
- Abra la configuración
- Seleccione “Accesibilidad”
- Seleccione "Pantalla y tamaño del texto"
- Seleccione "Texto más grande"
- Mueva el control deslizante en la parte inferior de la página a un ajuste mayor
- Si utiliza un simulador:
- Intente desplazarse hasta el elemento de texto
- Inaccesible: no se pudo desplazar hasta el elemento de texto.
- Accesible: Pudiste desplazarte hasta el elemento de texto.
Cómo solucionarlo
Un problema encontrado por esta regla es causado por no usar un UIScrollView o ScrollView en tu aplicación para elementos de texto.
Nota: Si el texto es parte de un elemento fijado, como UINavigationBar, UITabBar, etc., se debe utilizar UILargeContentViewer en su lugar.
UIKit
Agregue un UIScrollView como vista principal de los elementos de tu pantalla. Este tutorial de Ray Wenderlich ofrece una excelente guía.
SwiftUI
Agregar texto dentro de un ScrollView:
var body: some View {
ScrollView {
VStack {
HStack {
Text("This text is in a scroll view")
.padding()
}
}
}
}
React Native
Los elementos de texto deben estar en un elemento ScrollView
. El elemento ScrollView
debe estar dentro de a SafeAreaView
para garantizar que el contenido permanezca dentro de los límites de la ventana mientras se desplaza.
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View>
<Text> Make sure each screen has a ScrollView! </Text>
</View>
</ScrollView>
</SafeAreaView>