En ScrollView

Qué Verificamos

El texto debe estar contenido dentro de áreas desplazables, para asegurar que todo el contenido sea visible, incluso cuando el texto se redimensiona.

Nota: Esta regla no redimensiona el texto ni verifica que pueda escalar. Verifica para asegurar que el texto seguirá siendo accesible para el usuario si escala o se alarga debido a la localización.

Ejemplo Fallido ❌

El elemento contenedor es un UIView.

El texto redimensionado se corta y cannot be reached by scrolling.

Ejemplo Aprobado ✅

El elemento contenedor es un UIScrollView.

El texto redimensionado se corta, pero can be accessed by using the scroll bars.

A Simple Vista

• Esta regla tiene un impacto serio para los usuarios
• Cuando los usuarios habilitan tamaños de texto más grandes, el contenido puede desbordarse o truncarse y volverse inaccesible si no pueden desplazarse
• Esta regla marca los elementos de texto que no están envueltos en UIScrollView, ScrollView, o contenedores desplazables similares
• Los encabezados, texto del cuerpo, botones con etiquetas de texto y elementos de formulario necesitan soporte de desplazamiento

Impacto para los Usuarios

Las personas que utilizan Dynamic Type para escalar tamaños de texto en iOS son las más afectadas por las violaciones de esta regla. Cuando Dynamic Type está activado, el texto puede desplazarse fuera de la pantalla - o truncarse - al aumentar el tamaño, lo que potencialmente hace que la información no esté disponible. Las vistas desplazables son una excelente manera de soportar varios tamaños de pantalla, asegurando que todo el contenido sea accesible.

Confirmar el Problema en ScrollView

1. Si el contenido de la página ocupa menos de una pantalla, haga que todo el texto sea más grande con Dynamic Type:
   • Si usa un simulador:
     1. Abra Inspector de Accesibilidad
     2. En la esquina superior izquierda del inspector, cambie el dispositivo de su Mac al simulador de iOS
     3. Seleccione el botón Configuración en la esquina superior derecha del inspector
     4. Bajo Tamaño de Fuente, mueva el control deslizante a una configuración más grande
   • Si usa un dispositivo iOS 13.0+:
     1. Abra Configuración
     2. Seleccione Accesibilidad
     3. Seleccione Pantalla y Tamaño de Texto
     4. Seleccione Texto Más Grande
     5. Mueva el control deslizante en la parte inferior de la página a una configuración más grande
2. Intente desplazarse al elemento de texto
   • Inaccesible: Parte del texto desaparece de la pantalla y no puede desplazarse para alcanzarlo
   • Accesible: Todo el contenido permanece accesible desplazándose, incluso en los tamaños de texto más grandes

Corregir Problemas

Para resolver problemas en ScrollView, agregue UIScrollView o ScrollView como un contenedor padre para los elementos de texto en su aplicación.

UIKit

Agrega un UIScrollView como el contenedor principal para todos los elementos interactivos y estáticos en tu pantalla.

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

Añadir texto dentro de un 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

Anida elementos de texto dentro de un elemento ScrollView. El elemento ScrollView debe estar dentro de un SafeAreaView para asegurar 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 so users can access all of your content! </Text>
     </View>
   </ScrollView>
</SafeAreaView>

Flutter

Envuelve el contenido de la pantalla en un SingleChildScrollView para que el texto siga siendo accesible cuando los usuarios aumenten su tamaño de fuente preferido.

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

Preguntas frecuentes

¿Hay alguna limitación conocida con esta regla?\

Sí.

• Esta regla puede reportar "Fallido" o "Necesita revisión" para elementos pegajosos/flotantes.
• Si el texto es parte de un elemento fijo en la pantalla - uno que permanece en el mismo lugar incluso cuando se desplaza la pantalla, como un UINavigationBar o un UITabBar - utiliza un elemento UILargeContentViewer en lugar de un ScrollView.
• Tenga en cuenta que nuestra regla no puede detectar si UILargeContentViewer está implementado para estos elementos y aún así marcará un fallo In ScrollView a pesar de que haya implementado una experiencia accesible.

¿Puedo ignorar esta regla?

Esta regla tiene un impacto serio para los usuarios y debe corregir todos los problemas encontrados por esta regla, con la excepción de las limitaciones conocidas enumeradas arriba. En casos como estos, puede optar por ignorar la regla. Obtenga más información sobre ignorando reglas.

Recursos

Páginas del Curso de Deque University

• Criterio de Éxito 1.4.4 - Redimensionar Texto

  Nota: El acceso completo a los recursos de Deque University requiere una suscripción.

Otros Recursos

• Pautas de Accesibilidad para el Contenido Web 2.2, Documentos de Comprensión
  • Comprender el Criterio de Éxito 1.4.4 - Redimensionar Texto
• Tutorial de UIScrollView