Guía para el escalado de texto móvil

Las aplicaciones móviles deben cumplir con el criterio WCAG 1.4.4 Cambiar el tamaño del texto y ajustar el contenido para garantizar que no se pierda información ni funcionalidad para los usuarios que requieren tamaños de fuente más grandes. Esta guía cubre las formas recomendadas de soportar el escalado de texto en las plataformas iOS y Android.

Características específicas de la plataforma

iOS - Tipo dinámico

Dynamic Type es una función de accesibilidad dentro de iOS que permite escalar el tamaño de las fuentes en todo el dispositivo según las preferencias del usuario. Busque esta opción en los ajustes de accesibilidad del dispositivo. Consulte más información de Apple sobre la visualización de texto aquí..

Android - Escalado de texto y pantalla

En dispositivos Android 13 o posteriores, usted puede cambiar el tamaño de texto y de contenido en los ajustes de accesibilidad. Los usuarios pueden ajustar el tamaño de la fuente y el de la pantalla de forma independiente. Obtén más información sobre cómo cambiar estas configuraciones en la guía de ayuda de Google sobre configuración de texto y pantalla.

Preparación de las vistas

Asegúrese de que el contenido se pueda desplazar

iOS: Cuando el texto se escala a tamaños de fuente más grandes, gran parte del contenido puede quedar fuera de la pantalla. Implemente un UIScrollView o un ScrollView en cualquier pantalla con contenido.

Android: Utilice un elemento ScrollView como contenedor de elementos de diseño (constraint, linear, relative). Los ScrollViews no se desplazarán hasta que la altura de la pantalla (o el ancho, en el caso de desplazamiento horizontal) esté ocupada.

Excepciones:

• Android: RecyclerViews no necesitan estar embebidos dentro de un ScrollView. Permitir 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 ScrollView contenedor, no dentro de él.

Asegura 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 ancho constantes para las vistas que contienen contenido.

Android: La mayoría de los problemas de cambio de tamaño de texto pueden resolverse al no restringir la altura o el ancho de una vista. Permita que TextView se expanda con restricciones aplicadas. Utilice wrap_content para la altura y 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 utilice "width" de 0dp para llenar el espacio entre las restricciones. Asegúrese de que los componentes puedan expandirse verticalmente.

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

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

Establecer número de líneas

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

Android: Utilice SP (píxeles independientes de la escala) para todo el texto, no DP (píxeles independientes de la densidad). Puede utilizar el linter de accesibilidad de Android Studio para detectar problemas de uso de SP.

Implementación

Implementación de iOS

SwiftUI Views (iOS 14+)

Uso de fuentes predeterminadas:

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

Uso de fuentes personalizadas:

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

Vistas de UIKit

Uso de fuentes predeterminadas:

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

Uso de 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

Gestión 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 de 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 mejores prácticas

Directrices generales

• Pruebe con varios tamaños de fuente para garantizar que el contenido se muestre como se espera.

Mantenga los encabezados breves y descriptivos para una mejor accesibilidad. Asegúrese de que la usabilidad no se vea afectada por restricciones inadecuadas. Verifique que todos los controles de texto soporten el escalado sin desplazar el contenido fuera de la pantalla.

Consideraciones específicas de la plataforma

iOS:

• Siga las pautas tipográficas de Apple y la documentación sobre Dynamic Type.
• Utilice estilos de texto apropiados (.body, .title1, .caption1, etc.).
• Para SwiftUI, se proporcionan muchas consideraciones de forma predeterminada, pero deben revisarse.

Android:

• Utilice títulos breves para las barras de herramientas; evite el uso del Toolbar widget para títulos dinámicos.
• Proporcione iconografía distintiva con descripciones de contenido 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. Implemente siempre contenedores desplazables para contenido que pueda desbordarse.
2. Utilice unidades de escala recomendadas en la plataforma (SP para Android, TextStyles para iOS).
3. Realice pruebas exhaustivas en diferentes tamaños de fuente y configuraciones de accesibilidad.
4. Permita que las vistas se expandan en lugar de restringirlas a dimensiones fijas.
5. Siga las pautas de la plataforma para una experiencia de usuario óptima.