Soporta Dynamic Type

axe.configuration.optInToSupportsDynamicType = true

Qué Verificamos

Los elementos de texto deben tener las propiedades necesarias para soportar Dynamic Type y redimensionarse según la preferencia de tamaño de fuente del dispositivo del usuario.

Esta regla impone una Mejor Práctica de Deque. Puede desactivar esta regla desde el Panel de Control Móvil o mediante ignorando la regla en pruebas escritas para iOS.

Aprenda cómo desactivar reglas desde el Panel de Control Móvil.

Ejemplo Fallido ❌

Los elementos de texto utilizan fuentes fijas que no responden a la configuración de Dynamic Type del usuario

Después de aumentar la configuración de Dynamic Type al tamaño más grande, el texto remains unchanged — no se amplía para reflejar la preferencia del usuario

Ejemplo Exitoso ✅

Los elementos de texto utilizan fuentes escalables que responden a la configuración de Dynamic Type del usuario

Después de aumentar la configuración de Dynamic Type al tamaño más grande, el texto scales up accordingly para coincidir con la preferencia del dispositivo del usuario

Resumen

• Esta regla tiene un impacto crítico para los usuarios con baja visión que dependen de texto más grande
• Los elementos de texto deben soportar Dynamic Type para que se redimensionen cuando el usuario cambie el tamaño de fuente de su dispositivo

Impacto en los Usuarios

Las personas con baja visión son las más afectadas por el texto que no puede redimensionarse. Dynamic Type es una función de iOS que permite a los usuarios establecer un tamaño de fuente preferido a nivel de dispositivo, y se espera que las aplicaciones respeten esa preferencia. Cuando los elementos de texto no soportan Dynamic Type, los usuarios que necesitan textos más grandes deben esforzarse por leer contenido que no se escala independientemente de sus configuraciones.

Confirmar Problema de Soporte de Dynamic Type

1. Navegue a la pantalla que contiene texto y observe el tamaño de fuente actual y su disposición
2. Aumente el tamaño de fuente cambiando la configuración de Dynamic Type:
   • Si está usando 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. En Tamaño de Fuente, mueva el control deslizante a una configuración más grande
   • Si está usando un dispositivo con 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
3. Regrese a su aplicación y observe lo siguiente en la misma pantalla:
   • Inaccesible: El texto no cambió de tamaño después de actualizar la configuración de Dynamic Type
   • Accesible: El texto cambió de tamaño

Corregir problemas

Para resolver un problema de compatibilidad con Dynamic Type, configure los elementos de texto para usar fuentes escalables que respondan a la configuración de Dynamic Type del usuario.

UIKit

Establezca adjustsFontForContentSizeCategory = true en cualquier elemento de texto para que se actualice cuando el usuario cambie su configuración de Dynamic Type. Use UIFont.preferredFont(forTextStyle:) para fuentes del sistema, o UIFontMetrics para escalar una fuente personalizada en relación con un estilo de texto:

// System font — scales automatically to the user's Dynamic Type setting
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom font — scaled relative to a text style using UIFontMetrics
let customFont = UIFont(name: "Georgia", size: 17)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

SwiftUI

En iOS 14 o superior, puedes soportar Dynamic Type de dos maneras:

• Al usar una fuente personalizada, establezca la propiedad .font a .custom(_:size:relativeTo:) para asegurar que las fuentes se escalen relativamente al estilo de fuente del elemento de texto.
• Cuando se utiliza una fuente predeterminada por tamaño, el texto se escalará automáticamente. Sin embargo, si no se establece un estilo de fuente, los elementos de texto no se escalarán de acuerdo con su estilo. Por ejemplo, el texto que funciona como un título se escalará de manera diferente al texto que funciona como texto de cuerpo. Para una mejor experiencia, especifique el estilo de fuente para que coincida con el comportamiento esperado del elemento. Al usar un modificador como .font(.system(.largeTitle, design: .rounded)), puedes esperar que el texto sea el más grande en la página y funcione como un título adecuado.

React Native

Establezca allowFontScaling={true} en cada elemento Text para permitir que se adapte a las preferencias de configuración del dispositivo del usuario:

<Text style={{ color: 'black', fontSize: 18 }} allowFontScaling={true}> This text allows font scaling. </Text>

¿Puedo ignorar esta regla?

Supports Dynamic Type tiene un impacto crítico para usuarios con baja visión. Debido a que esta es una regla de mejor práctica, se puede desactivar desde el Mobile Dashboard o suprimir en pruebas individuales. Sin embargo, recomendamos enfáticamente soportar Dynamic Type en toda tu aplicación en lugar de ignorar ampliamente la regla. Aprende más sobre ignorando reglas.

Recursos

Páginas del curso de Deque University

• Criterio de Éxito 1.4.4 - Redimensionar Texto (AA)
• 1.4.4 Redimensionar Texto (AA)

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

Otros recursos

• Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, Recomendación del W3C
  • Criterio de Éxito 1.4.4 - Redimensionar Texto
• Documentación para desarrolladores de Apple
  • Escalado Automático de Fuentes
  • Dynamic Type en SwiftUI