Diseño para la accesibilidad es esencial para crear experiencias digitales inclusivas para todos los usuarios. En iOS, características como VoiceOver y Dynamic Type juegan un papel crucial en mejorar la usabilidad de las personas con deficiencias visuales, baja visión y otras necesidades de accesibilidad. Al integrar cuidadosamente estas herramientas, desarrolladores y diseñadores pueden asegurar que sus aplicaciones sean utilizables por un público más amplio, incluyendo aquellos que confían en tecnologías de asistencia.

Comprensión de vozOver

VoiceOver es un lector de pantalla integrado en iOS que lee en voz alta todo lo que aparece en la pantalla: botones, etiquetas, imágenes, deslizadores e incluso cambios de texto. Permite a los usuarios con deficiencias visuales navegar aplicaciones y sitios web usando un conjunto rico de gestos y comentarios hablados. Cuando un usuario toca o arrastra un dedo a través de la pantalla, VoiceOver describe el elemento de accesibilidad bajo su dedo.

VoiceOver se basa en la API de Accesibilidad (UIAccesibilidad) para extraer información sobre elementos en pantalla. Cada control UIKit —], , y vistas personalizadas— puede exponer etiquetas de accesibilidad, rasgos, consejos y acciones personalizadas. Si estas son desprotegidas o mal elaboradas, el lector de pantallas ignorará el elemento de manera infundable.

Al diseñar VoiceOver, los desarrolladores deben asegurarse de que todos los elementos interactivos estén correctamente etiquetados y accesibles a través de las API de accesibilidad. Esto incluye no sólo controles nativos sino también interfaces dibujadas a medida, reconocedores de gestos y contenido dinámico. Un error común es asumir que las etiquetas predeterminadas del contenido de texto serán suficientes. VoiceOver puede leer el tipo de control subyacente o un identificador bruto, que es raramente útil.

Traits de accesibilidad clave

iOS proporciona un conjunto de rasgos de accesibilidad] (]) que informan a VoiceOver sobre el comportamiento de un elemento. Por ejemplo:

  • Button] – indica que el elemento puede ser presionado para realizar una acción.
  • Header – marca una sección encabezada, permitiendo a los usuarios saltar entre los encabezados rápidamente.
  • StaticText – dice VoiceOver que el elemento es sólo texto leído.
  • Ajustable] – para controles como deslizadores o escalones que permiten gestos de aumento/deterioro.
  • Seleccionado] – indica que el elemento está en un estado seleccionado (por ejemplo, una pestaña).
  • Link] – para elementos similares a URL que abren una dirección web.

Aplicar el rasgo correcto no sólo mejora la salida hablada sino que también altera el gesto puesto disponible al usuario. Por ejemplo, un elemento con el Ajustable rasgo permite al usuario girar hacia arriba o hacia abajo para cambiar su valor. Sin ella, VoiceOver lo tratará como un elemento estático estándar.

Accesibilidad Hints y Acciones Aduaneras

A veces una etiqueta y un rasgo no son suficientes. Las sugerencias de accesibilidad pueden proporcionar un contexto adicional sobre el resultado de una acción, como “Abre el panel de configuración” o “Deletes el elemento actual”. Las hormigas sólo se hablan después de un breve retraso cuando el usuario se inclina en un elemento, por lo que deben usarse espaciadamente — solo cuando el comportamiento no es obvio sólo de la etiqueta.

Para elementos que soportan múltiples acciones (por ejemplo, una célula de mesa que puede ser girada para revelar botones de borrado, compartir y ocultar), use acciones personales. VoiceOver anuncia el número de acciones disponibles y permite que el usuario las realice girando hacia arriba o hacia abajo en un rotor dedicado. Implementar acciones personalizadas hace que las interacciones complejas sean accesibles sin forzar a los usuarios a realizar swipes físicos

Implementación de soporte de voz

Para apoyar a VoiceOver de manera efectiva, considere las mejores prácticas siguientes: no son sólo directrices, son necesarias para pasar auditorías de accesibilidad y crear una experiencia equitativa.

  1. ]Utilizar etiquetas descriptivas para botones, enlaces y controles. Un botón etiquetado "Guardar" es aceptable; mejor es "Guardar documento" o "Guardar borrador". Evite las etiquetas genéricas como "Button" o "Item 1". Para los iconos sin texto visible, establece la etiqueta de accesibilidad para describir la acción, por ejemplo, "Agregar nuevo contacto" para un icono más.
  2. ] Velar por que todas las imágenes tengan texto alt significativo.] Las imágenes decorativas que no transmiten información deben ser marcadas como por lo que VoiceOver las ignora. Las imágenes informativas, como una gráfica o una foto de producto, necesitan una descripción concisa. No olvide actualizar las imágenes en y .
  3. Utilice la navegación usando gestos de VoiceOver] para identificar posibles problemas. Encienda la vozOver en Ajustes → Accesibilidad → VoiceOver y trate de completar todas las tareas básicas en su aplicación sin mirar la pantalla. Preste atención a elementos que son saltados, mal leídos o no alcanzables.
  4. Usar rasgos de accesibilidad] para definir el propósito de los elementos de la UI. Por ejemplo, establecer sobre los títulos de sección, y sobre elementos tappables.
  5. Elementos relacionados con el crecimiento] utilizando vistas de contenedores con y una etiqueta combinada. Por ejemplo, una tarjeta que muestra una imagen de producto, nombre y precio debe ser un elemento accesible con una etiqueta como "Audífonos inalámbricos, $79.99".
  6. Posibilidad de las notificaciones de accesibilidad cuando el contenido cambia dinámicamente. Use para enfocar VoiceOver en contenido actualizado, como un nuevo mensaje en un chat o un modal que aparece.
  7. Evitar confiar exclusivamente en los colores o las señales visuales] para transmitir el estado. Los usuarios de VoiceOver no pueden ver las fronteras de error rojo. Combina siempre indicadores visuales con texto, símbolos o rasgos como .
  8. ]Rodómetro de accesibilidad de soporte] cuando sea apropiado. Por ejemplo, si su aplicación incluye un deslizador para volumen, implemente el Ajustable rasgo y exponga acciones de incremento y decremento a través del rotor.

Voz comúnPotfalls de buzo

Incluso los desarrolladores experimentados pueden pasar por alto problemas sutiles. Aquí hay problemas frecuentes para observar:

  • Elementos accesibles más cercanos: Si una vista de los padres es accesible y sus hijos también son accesibles, VoiceOver anunciará al padre y a cada niño, causando redundancia y confusión. O bien, haga que el padre sea el único elemento accesible o asegure que los niños estén bien ocultos.
  • Vistas de desplazamiento manejadas de forma adecuada: VoiceOver depende del tamaño de contenido de la vista de desplazamiento. Si el tamaño de contenido no está correctamente establecido, VoiceOver no puede desplazarse a través de todos los elementos.
  • ]Escribe los identificadores de accesibilidad: Aunque el identificador de accesibilidad () es principalmente para pruebas automatizadas, no debe ser utilizado como la etiqueta para VoiceOver. Siempre proporciona una separada para la producción legible por humanos.
  • Ignorar los comandos de teclado: Algunos usuarios combinan VoiceOver con un teclado externo. Asegúrese de que su aplicación responda a los atajos comunes de teclado (por ejemplo, Cmd+S para Guardar) y que estas acciones son descubiertas a través del rotor de accesibilidad.

Entender el tipo dinámico

Dynamic Type permite a los usuarios personalizar el tamaño de texto en todas las aplicaciones iOS a nivel de todo el sistema, mejorando la legibilidad y la comodidad para las personas con baja visión, presbyopia o simplemente aquellos que prefieren texto más grande. Cuando un usuario ajusta el tamaño de texto en Ajustes → Mostrar " Brightness → Tamaño de texto, o utiliza el acceso directo de accesibilidad, cualquier aplicación que soporta el tipo dinámico escalará automáticamente su texto.

Tipo dinámico se construye en el concepto de estilos de texto definidos por . iOS proporciona un conjunto de estilos predefinidos: , , , , ], contenido de la escala ]

Al diseñar el tipo dinámico, los desarrolladores deben asegurarse de que el texto se escala correctamente y que el diseño se adapte sin romper, solapar o desconcertar contenido de formas indeseables. Esto va más allá del texto mismo: márgenes, relleno, anchos de botones e incluso tamaños de imagen pueden necesitar ajustarse para mantener un aspecto armónico en cada tamaño.

Categorías de Tamaño de Contenido

iOS define varios niveles de tamaño de texto, desde XS] (extra pequeña) a XXXL] (extra extra grande).Las categorías de tamaño de accesibilidad (más grandes que ]AX1]) están diseñadas específicamente para usuarios con deficiencias visuales y pueden producir textos muy bien.

No todo el texto tiene que ser igualmente grande. Típicamente, el texto corporal crece más, mientras que las pequeñas capciones o títulos de botones pueden escalar menos agresivamente. La clase le da un control bien arraigado sobre el comportamiento de escalado para fuentes personalizadas que no están atadas a un estilo de texto.

Implementación de tipo dinámico

Para apoyar el tipo dinámico de manera efectiva, siga estas prácticas. Garantizan que su aplicación respeta las preferencias de los usuarios y se comporta de forma previsible en toda la gama de tamaños de texto.

  1. Use estilos de texto que se adapten automáticamente a la configuración de los usuarios], como , , etc. En Interface Builder, puede configurar la fuente a un estilo de texto en el inspector de los atributos. En código, utilice .
  2. Evite tamaños de fuentes fijas; en cambio, confíe en fuentes escalables. Si utiliza una fuente personalizada, regístrela y luego cree con para aplicar la misma curva de escalado que las fuentes del sistema.
  3. Prueba su aplicación con diferentes ajustes de tamaño de texto] en opciones de accesibilidad. Ir a Ajustes → Accesibilidad → Mostrar & Tamaño de texto → Texto más grande para permitir tamaños de accesibilidad. Luego navegar por cada pantalla en su aplicación, prestando especial atención a botones que se están cortando, imágenes superpuestas y texto truncando.
  4. Velar por que su diseño siga siendo flexible y legible en todos los tamaños. Usar las limitaciones Auto-Diseño que se adapten al tamaño de contenido en lugar de los anchos fijos. Por ejemplo, una etiqueta debe tener limitaciones de liderazgo y seguimiento a su supervisión, no un ancho fijo, por lo que puede crecer y envolver. Use para permitir texto multilínea.
  5. ]Ajustar la altura de la línea y el espaciamiento del párrafo] dinámicamente. La altura de la línea predeterminada para los estilos de texto es apropiada, pero si utiliza cadenas atribuidas, asegúrese de establecer en relación con el tamaño de la fuente. Evite los valores de puntos absolutos.
  6. Use para fuentes personalizadas: garantiza sus escalas de fuentes idénticamente a la fuente del cuerpo del sistema. También puede utilizar para escalar constantes como márgenes o radios de esquina proporcionalmente.
  7. Para imágenes o iconos que acompañan el texto, considere la posibilidad de proporcionar múltiples resoluciones o utilizar SVG para que escalan sin pixelación. Un icono que se sienta junto a una etiqueta puede necesitar crecer cuando el texto crece. Puede utilizar catálogos de activos con imágenes específicas de tamaño o imágenes de escala usando con escalado de estilo de texto.
  8. Actualizar diseños cuando Dynamic Type cambia a tiempo de ejecución]. Registro para la notificación para invalidar su diseño y recalcular tamaños. Si se utiliza , el sistema automáticamente llama actualización de la colección de características; sin embargo, las vistas personalizadas pueden necesitar un manejo explícito.

Manejo de tipo dinámico en vistas de la mesa y vistas de la colección

Tipo dinámico puede complicar las vistas de la lista si las alturas de las células están fijadas. La solución es utilizar células auto-size que computan su altura intrínseca basada en el contenido. Establecer la altura de la fila estimada y permitir que Auto Layout expanda las células. Para , establecer y proporcionar un margen de cálculo razonable

Accesibilidad Tallas y rendimiento

En tamaños de accesibilidad, el texto puede ser muy grande, y una sola célula puede contener sólo unas pocas palabras. En aplicaciones de chat o feeds de noticias, esto es aceptable y esperado. Sin embargo, en redes de datos intensivos (por ejemplo, una vista de mes calendario), el escalado de texto puede romper el diseño. En tales casos, usted podría elegir cap el tamaño máximo de texto para esa vista particular o proporcionar un diseño compacto alternativo.

Otra consideración de rendimiento: escalar imágenes en tiempo de ejecución puede ser costosa. Si proporciona diferentes tamaños de imagen para diferentes categorías de tamaño de contenido, cargar sólo la resolución necesaria. Use para seleccionar el activo adecuado en el momento de la renderización.

Accesibilidad Más allá de la vozOver y el tipo dinámico

Aunque VoiceOver y Dynamic Type son dos de las características de accesibilidad más impactantes en iOS, no son las únicas. Una estrategia de accesibilidad integral también incluye soporte para:

  • Control de Brujas] – para usuarios con control de motor limitado.
  • AssistiveTouch – botones y gestos virtuales para usuarios que no pueden realizar ciertos movimientos físicos.
  • Control de Voz] – navegación basada en la voz completa (diferente de VoiceOver).
  • Reducir la Moción] – para usuarios sensibles a las animaciones.
  • Aumentar el contraste] y Formas de botón] – para una mejor claridad visual.
  • Cerrados y ]Audio Descripciones – para contenido multimedia.

Cada una de estas características interactúa con su aplicación de manera específica. Por ejemplo, elementos que soportan acciones personalizadas en VoiceOver también trabajan con Control de Interruptores. Asegurar que cada elemento interactivo es un objetivo táctil de tamaño completo (al menos 44 puntos) beneficia a todos los usuarios, especialmente aquellos con discapacidad del motor. Diseñar con accesibilidad desde el principio significa que su aplicación funcionará bien con todas estas tecnologías de asistencia, no sólo VoiceOver y Dynamic Type.

Conclusión

Diseñar con accesibilidad en mente no sólo beneficia a los usuarios con deficiencias sino que también mejora la experiencia global de los usuarios para todos. Características como VoiceOver y Dynamic Type son maduras, bien documentadas y relativamente simples de implementar una vez que comprendas las API fundamentales.Integrándose el soporte VoiceOver con etiquetas adecuadas, rasgos y acciones personalizadas, y adoptando Dynamic Type a través de fuentes escalables y diseños flexibles, los desarrolladores pueden crear una filosofía más inclusiva y adaptable.

Para más lectura, consulte las Directrices de interfaz humana sobre accesibilidad], ]Documentación de tipo dinámico, ]VoiceOver recursos de desarrollador, y las W3C Directrices de accesibilidad de contenido web [FLT]