Guía para el Escalado de Texto en Móviles

Las aplicaciones móviles deben cumplir con WCAG 1.4.4 Redimensionar Texto y ajustar el contenido para asegurar que no haya pérdida de información o funcionalidad para los usuarios que requieran tamaños de fuente más grandes. Esta guía cubre las formas recomendadas para admitir el escalado de texto en las plataformas iOS y Android.

Características Específicas de la Plataforma

iOS - Dynamic Type

Dynamic Type es una función de accesibilidad dentro de iOS que permite que los tamaños de fuente se escalen en todo el dispositivo según la preferencia del usuario. Encuentre esta opción en Configuración de Accesibilidad en el dispositivo. Lea más de Apple sobre la Visualización de Texto aquí.

Android - Escalado de Texto y Pantalla

Para dispositivos Android 13 y superiores, puede cambiar el tamaño preferido del texto y el contenido en la configuración de accesibilidad. Los usuarios pueden ajustar tanto el tamaño de la fuente como el tamaño de la pantalla de manera independiente. Lea más sobre cómo cambiar estas configuraciones en la guía de soporte de Google para configuraciones de texto y pantalla.

Preparando Sus Vistas

Asegúrese de que el Contenido pueda Desplazarse

iOS: Cuando el texto se escala a tamaños de fuente más grandes, un contenido considerable podría desplazarse fuera de la pantalla. Implemente un UIScrollView o ScrollView en cualquier pantalla con contenido.

Android: Use un elemento ScrollView como el contenedor para los elementos de diseño (constraint, linear, relative). Los ScrollViews no se desplazarán hasta que se llene la altura de la pantalla (o el ancho, para desplazamiento horizontal).

Excepciones:

• Android: RecyclerViews no necesitan estar embebidos dentro de un ScrollView. Permita que los elementos se expandan vertical u horizontalmente.
• Android: Los elementos de navegación (barras inferiores, pestañas, barras de herramientas) deben estar al mismo nivel que el contenedor ScrollView, y no dentro de él.

Asegúrese de que el Contenido pueda Expandirse

iOS: Utilice contentHuggingPriority, contentCompressionResistancePriority, greaterThanOrEqualTo y lessThanOrEqualTo para permitir que las vistas se expandan. Limite la configuración de altura y anchura constante para las vistas que contienen contenido.

Android: La mayoría de los problemas de redimensionamiento de texto se pueden resolver no restringiendo la altura o el ancho de una vista. Permita que TextView se expanda con restricciones establecidas. Use wrap_content para la altura y ya sea match_parent o 0dp para el ancho.

Consideraciones Específicas del Diseño

Android ConstraintLayout: Establezca el ancho de la vista en match_parent y la altura en wrap_content, o use el ancho 0dp para llenar el espacio entre restricciones. Asegúrese siempre de que los componentes pueden expandirse verticalmente.

Android RelativeLayout: Defina guías de inicio y fin para los elementos adyacentes para asegurar que los componentes permanezcan en pantalla.

Android LinearLayout: Puede ajustarse a tamaños de contenido cambiantes si está en un ScrollView y no se establece una altura match_parent. Use android:minHeight para requisitos de altura específica.

Establecer el Número de Líneas

iOS: Establezca la propiedad numberOfLines en 0 para cualquier texto con potencial de desbordamiento. Para UIButton, establezca numberOfLines en 0 en su titleLabel.

Android: Use SP (pixeles independientes de escala) para todo el texto, no DP (pixeles independientes de densidad). Puede utilizar el linter de accesibilidad de Android Studio para detectar problemas de uso de SP.

Implementación

Implementación en iOS

SwiftUI Views (iOS 14+)

Usando Fuentes Predeterminadas:

.font(.system(.largeTitle, design: .rounded))

Usando Fuentes Personalizadas:

.font(.custom("FontName", size: 16, relativeTo: .body))

UIKit Views

Usando Fuentes Predeterminadas:

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Usando Fuentes Personalizadas con UIFontMetrics:

guard let font = UIFont(name: "CustomFont", size: UIFont.labelFontSize) else { return }
label.font = UIFontMetrics(forTextStyle: .caption1).scaledFont(for: font)
label.adjustsFontForContentSizeCategory = true

Manejo Manual de Dynamic Type:

// Via Notification Observer
NotificationCenter.default.addObserver(self,
                                       selector: #selector(changeTextSize),
                                       name: UIContentSizeCategory.didChangeNotification,
                                       object: nil)

// Via TraitCollection Override
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // Handle font size changes based on preferredContentSizeCategory
}

Implementación en Android

Configuración básica:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp" />

Ejemplo de ConstraintLayout:

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button Text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Modificación de texto programática:

SpannableStringBuilder str = new SpannableStringBuilder(tv.getText());
str.setSpan(new AbsoluteSizeSpan(70, true), 15, 18, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(str);

Pruebas y buenas prácticas

Directrices generales

• Pruebe con varios tamaños de fuente para asegurar que el contenido se muestra como se espera.
• Mantenga los encabezados cortos y descriptivos para una mejor accesibilidad.
• Asegúrese de que la usabilidad no se vea afectada por restricciones inapropiadas.
• Verifique que todos los controles de texto admitan el escalado sin desplazar el contenido fuera de la pantalla.

Consideraciones específicas de la plataforma

iOS:

• Siga las guías de tipografía de Apple y la documentación de soporte para Dynamic Type.
• Use TextStyles apropiados (.body, .title1, .caption1, etc.).
• Para SwiftUI, muchas consideraciones se proporcionan por defecto pero deben revisarse.

Android:

• Use títulos cortos para las barras de herramientas; evite el widget Toolbar para títulos dinámicos.
• Proporcione iconografía distinta con descripciones de contenido descriptivas para la navegación inferior.
• Utilice vistas desplazables para pestañas, ViewPager y componentes TabList.
• No limite la altura de los controles.

Puntos clave

1. Siempre implemente contenedores desplazables para contenido que pueda desbordarse.
2. Use unidades de escalado apropiadas para la plataforma (SP para Android, TextStyles para iOS).
3. Pruebe exhaustivamente en diferentes tamaños de fuente y configuraciones de accesibilidad.
4. Permita que las vistas se expandan en lugar de limitarlas a dimensiones fijas.
5. Siga las guías de la plataforma para una experiencia de usuario óptima.