Evaluar las Accessibility Nutrition Labels de tu app

Hola, soy James, ingeniero de software en Accesibilidad. Hoy veremos cómo evaluar tu app para agregar Accessibility Nutrition Labels a la página de producto de tu app. Hola, soy Lisa. Soy diseñadora y también trabajo en Accesibilidad. Hablaré sobre diseño y cómo hacer que tu app sea más accesible. En esta sesión, exploraremos cómo evaluar tu app para Accessibility Nutrition Labels. Lisa y yo presentaremos los principios básicos de la accesibilidad de las apps y repasaremos las funcionalidades para las que puedes indicar compatibilidad. Descubriremos cómo diseñar para Accesibilidad, probar tu app con VoiceOver y Control por voz, y entregar contenido multimedia accesible. Al finalizar, sabrás cómo resaltar la accesibilidad de tu app con Accessibility Nutrition Labels. En Apple, creemos que la mejor tecnología la pueden usar todas las personas. Cuando diseñas tu app con Accesibilidad, muchas más personas pueden acceder a ella. Cuando integras tecnologías de asistencia, como VoiceOver y Control por voz, el acceso a tu app aumenta. Las Accessibility Nutrition Labels muestran las funcionalidades que admite tu app en el App Store. Esto permite a las personas saber si tu app es compatible con las funcionalidades que necesitan. Para indicar que tu app cuenta con las funcionalidades de accesibilidad, las personas deben poder completar todas las tareas comunes de la app. Comencemos por definir las tareas comunes. Son las funcionalidades principales de tu app por las que las personas la descargan, y las funcionalidades fundamentales para usar una app en general. Estas son la primera experiencia al iniciar la app, el inicio de sesión, la compra y la configuración. Define lo que se puede hacer en tu app. Luego de identificar las tareas comunes de tu app, evalúa cada funcionalidad de accesibilidad disponible en las Accessibility Nutrition Labels. Usa una estrategia de prueba que evalúe cada tarea común en tu app con cada funcionalidad. Con esta estrategia, descubrirás qué funcionalidades son compatibles con tu app y cuáles aún no. Asegúrate de realizar pruebas en todos los dispositivos compatibles. Como el iPhone, el iPad, la Mac, el Apple Watch y mucho más. Si una funcionalidad no es relevante para la funcionalidad de tu app, no indiques compatibilidad. Es esencial informar con precisión a las personas cómo usar tu app. Para garantizar precisión, consulta la documentación de Accessibility Nutrition Labels. Los criterios de evaluación tienen como objetivo estandarizar las experiencias de usuario que debe ofrecer una app para considerar que admite una funcionalidad. Esto garantiza que las apps tengan respuestas consistentes en todo el App Store. Cuando lo desees, puedes agregar Accessibility Nutrition Labels. Agrégalas a la página de producto de tus apps en App Store Connect. Todas las funcionalidades de accesibilidad compatibles con tus apps ahora aparecerán en tu página de producto. En el centro de las Accessibility Nutrition Labels encuentras los principios básicos de la accesibilidad de las apps. Estos principios te permitirán evaluar cada funcionalidad. Es una gran oportunidad para usar la app en la que estamos trabajando, Landmarks. Sí, es una gran idea. ¿Por qué no les cuentas cómo empezamos? La accesibilidad de las apps comienza con el diseño. Quieres diseñar una interfaz que todos disfruten, sin importar cómo interactúen con el dispositivo. Es importante conocer las funcionalidades de accesibilidad, activarlas, como Control por Voz y Texto Más Grande, y prestar atención a lo que se puede escuchar y ver cuando se usa tu app. Siempre que sea posible, conéctate con la comunidad de personas con discapacidades. Las pruebas con quienes usan funcionalidades de accesibilidad es una de las formas más efectivas de saber qué tan accesible es tu app. Como yo, tengo ceguera legal debido a una rara degeneración macular. Esto afecta mi visión central y provoca que vea todo borroso. Para explicarte mejor, imagina que estoy en una de mis caminatas favoritas. Veo objetos grandes como los árboles, las rocas, pero necesito acercarme mucho para ver detalles, como leer un cartel. En mi iPhone, uso los tamaños de texto más grandes para todo, leer, trabajar y realizar tareas personales. Quienes tenemos una discapacidad sostenemos la frase “Nada sobre nosotros sin nosotros”: debemos participar en todas las decisiones que afectan nuestras vidas. Y no hay mejor manera de garantizar la accesibilidad de tu app que involucrar a las personas que se verán afectadas por ella. Te aseguro que, si una app está diseñada para apoyar mi experiencia como persona ciega, siento que me incluyen y valoran como cliente. Por eso Accessibility Nutrition Labels son tan importantes. Exploremos el primer conjunto de funcionalidades. Comencemos. Este primer conjunto de funcionalidades ofrece una gran oportunidad para aplicar el diseño accesible. Empecemos con el color. El color puede mejorar la comunicación y permitir a las personas comprender la información. Debe haber un contraste suficientemente alto entre los colores del primer plano y del fondo. Esto permite garantizar la legibilidad del texto y ayuda a las personas a encontrar lo que buscan. Es importante diseñar tu app con esquemas de colores de mayor contraste. Si de forma predeterminada tu app no ofrece un contraste mínimo, comprueba que lo haga cuando esté activada la configuración Aumentar el contraste. Diseñamos la app con colores de alto contraste, pero ciertos colores no ofrecían el contraste mínimo. Así, elegimos alternativas para respaldar la configuración Aumentar el contraste. Esto se aplica tanto a las apariencias claras como a las oscuras. Luego de probar las tareas comunes de la app Landmarks para comprobar el contraste suficiente, no encontramos más problemas. Indicaré soporte para un contraste suficiente en las Accessibility Nutrition Labels. Lo siguiente es Interfaz Oscura. Las personas suelen usar el modo oscuro si son sensibles a la luz o prefieren un fondo más oscuro. Las áreas grandes blancas o brillantes en la pantalla pueden causar incomodidad o incluso dolor físico. Mis ojos son muy sensibles a la luz, y con el modo oscuro me resulta más cómodo leer. Si tu app aún no tiene una interfaz oscura, asegúrate de que la tenga cuando el modo oscuro esté activado. Diseñamos nuestra app para que admita el modo oscuro, pero para asegurarnos, completaremos algunas tareas comunes. También comprobaremos con Invertir (Inteligente) activado. Invertir (Inteligente) es una funcionalidad de accesibilidad que invierte los colores en la interfaz. Asegúrate de que los colores del contenido multimedia no se inviertan. Luego de confirmar que nuestra app admite un fondo mayoritariamente oscuro, podemos agregar una interfaz oscura a nuestras Accessibility Nutrition Labels. Algunas personas necesitan aumentar el tamaño del texto para poder leerlo. Al diseñar tu app, asegúrate de que las personas puedan aumentar el tamaño del texto al menos un 200% más. Lo ideal sería que el texto pudiera hacerse más grande. Personalmente necesito 310%. Por lo tanto, admite tamaños de texto superiores al 200% si es posible. También es importante crear un diseño que permita que el texto aumente de tamaño sin superposiciones ni truncamientos severos. Deja suficiente espacio y líneas adicionales para admitir tamaños de texto más grandes. Para los controles que no pueden aumentar de tamaño razonablemente, revisa la documentación para otras opciones de diseño. Una de las mejores formas de admitir texto más grande en tu app es usar Tamaño de Letra Dinámico. Para más información, consulta el video de la WWDC24 “Get Started with Dynamic Type”. Si el texto aumenta hasta un 200% en una tarea común, puedes agregar texto más grande a tus Accessibility Nutrition Labels. Ahora, James, probemos nuestra app. Sí, es una gran idea. Tengo preguntas sobre cómo funciona el texto grande para alguien que lo necesita. Trabajamos juntos por un tiempo. Sé que cada día cuentas con textos más grandes. ¿Está bien si hago preguntas? ¡Por supuesto! También documentaré cualquier problema que encontremos. Ya tengo activados tamaños de texto de accesibilidad más grandes, y el tamaño del texto está configurado al 235% en este iPhone. En la app Landmarks, ya puedo ver que el texto es más grande que el tamaño predeterminado. Una de las funcionalidades de Landmarks es que te permite agrupar diferentes puntos de referencia en colecciones. Ya iniciamos una colección del equipo de Accesibilidad para planificar excursiones. ¡Tengo una idea! Actualicemos la colección del equipo de Accesibilidad. Suena bien. Tal vez podamos elegir un lugar para llevar al equipo en la próxima caminata. Perfecto. Genial, veamos las colecciones. Primero tocaré el botón de atrás y luego el botón de colecciones. Creo que la colección de viajes de 2023 está un poco desalineada. Eso es definitivamente un error, ¿verdad? Bueno, no está terminado, pero puedo leer el nombre de la colección. No creo que nos impida indicar compatibilidad con texto más grande, pero deberíamos tomar nota para corregir el diseño. Lo tomaré en cuenta. Veamos esto en más detalle.

La descripción está truncada. Realmente deberíamos hacer que ese texto se ajuste en varias líneas. Lo agregaré a la lista de errores. Editaré la colección.

Espera. ¿Por qué no se ve todo el texto en el campo de texto de descripción? Probaré desplazarlo. Parece que el campo de descripción no se agranda para admitir tamaños de texto más grandes. Igual puedo desplazarme, pero es mucho más trabajo. Lisa, ahora que tenemos más información, ¿qué piensas? Honestamente, todos esos errores hacen que sea difícil obtener información sobre la colección. Realmente deberíamos corregir esos errores antes de indicar compatibilidad para texto más grande. Estoy de acuerdo. Cuando terminemos el resto de nuestras tareas comunes, buscaremos en la documentación soluciones a los errores que encontramos. Podemos hacer que los campos de texto se agranden para permitir que el texto se ajuste a la siguiente línea en lugar de truncarse. Por ahora, estos problemas implican que no indicaremos compatibilidad con texto más grande en Landmarks. Luego de solucionar estos problemas y probar nuestras otras tareas comunes, podremos volver a App Store Connect e indicar compatibilidad. Hablemos más sobre el color. Al diseñar usando colores, es importante considerar que las personas pueden percibir el color diferente. Muchas apps usan el color para transmitir información. Por ejemplo, algunas apps usan rojo o verde para comunicar un estado como correcto o error. Las personas daltónicas podrían no comprender esa comunicación. Al diseñar, usa formas, íconos o texto además de color para comunicar información importante. También puedes permitir que las personas personalicen cómo se usa el color en tu app. Diseñamos nuestra app con colores e íconos que llamen la atención de elementos importantes como el botón de basura. Así no dependemos solo del color para estos elementos. Para asegurarnos de cumplir con los criterios de evaluación, repasaremos tareas comunes prestando atención al uso del color. Cuando confirmemos que el color no es el único medio de información en Landmarks, podemos agregar Diferenciación no Sólo con Color a las Accessibility Nutrition Labels. Ahora, hablemos de los movimientos. El movimiento puede enriquecer la experiencia de una app, pero es importante considerar que ciertos movimientos pueden provocar mareos o náuseas intensas. Esto puede impedir que las personas puedan usar tu app. Los disparadores pueden ser: transiciones de zoom o deslizamiento, destellos o parpadeos, animaciones automáticas o efectos de paralaje. Para mejorar esto, las personas pueden activar la configuración de movimiento reducido. Para respaldar esta configuración, revisa tu tarea común e identifica las animaciones que son disparadores conocidos. Puedes realizar cambios en estas animaciones en lugar de eliminarlas. Si tu app no tiene ninguno de estos disparadores conocidos para comenzar, puedes indicar compatibilidad para Movimiento Reducido. Para evaluar nuestra app, completaremos tareas comunes prestando mucha atención a cualquier movimiento. Revisaremos la documentación para obtener orientación sobre cualquier animación problemática o sobre la que no estemos seguros. Luego de confirmar que se eliminaron los disparadores de movimiento, puedes agregar movimiento reducido a tus Accessibility Nutrition Labels. Además del diseño accesible, puedes crear tu app con API de accesibilidad para que las personas que dependen de tecnologías de asistencia puedan disfrutarla. Ahora, nos centraremos en dos de estas tecnologías: Control por voz y VoiceOver. Control por voz es una de las tecnologías de asistencia de Apple que permite controlar dispositivos mediante la voz. Las personas pueden usar Control por voz para tocar, deslizar y más mediante comandos de voz. Debes asegurarte de que Control por voz interactúe con cualquier parte de tu app que responda al tacto. Con elementos como botones de retroceso y campos de búsqueda. Control por Voz depende de que tu app proporcione metadatos al elemento de accesibilidad para la vista. Por ejemplo, el modificador de etiqueta de accesibilidad en un botón especifica el nombre de ese botón. Las personas pueden decir este nombre y así tocarlo usando Control por voz. Nos centraremos en cómo evaluar tu app para comprobar la compatibilidad con Control por voz, pero puedes consultar la documentación para desarrolladores para más información. Seguro que las personas necesitarán encontrar puntos de referencia usando Control por voz. Probemos nuestra app. Hagámoslo. Nos aseguraremos de que se puedan completar tareas comunes usando solo comandos de voz. Luego de activar el Control por voz, abriré la app Landmarks. Voy a decir los nombres de los artículos y asegurarme de que tengan etiquetas que sean descriptivas y precisas. Completaré tareas comunes usando Control por voz. Cuando corresponda, usaré comandos para desplazar, arrastrar y otras interacciones. Es importante solo usar comandos de Control por voz y no necesitar el tacto o el cursor para que quienes dependen de los comandos de voz puedan navegar por las funcionalidades de nuestra app. Una vez que confirmaste que las personas pueden usar tu app a través de comandos de Control por voz, puedes agregarlo a tus Accessibility Nutrition Labels. Pasemos a VoiceOver ahora. La buena noticia es que el trabajo de API que realizaste para Control por voz también admitirá VoiceOver. VoiceOver es una de las tecnologías de asistencia de Apple que permite a las personas navegar por una interfaz sin necesidad de ver la pantalla. Con un gesto o un comando de teclado puedes mover el foco de VoiceOver por la interfaz. Cuando el foco se mueve a un botón, VoiceOver dice el nombre del botón. Y cuando el foco se mueve al texto, VoiceOver lee el texto. Luego, con otro gesto o comando de teclado, VoiceOver activa el elemento enfocado. Lisa, me encantaría recibir tu ayuda para evaluar Landmarks con VoiceOver. Sé cómo funcionan las tecnologías de asistencia, pero me interesa especialmente VoiceOver. A veces uso VoiceOver cuando no puedo ver los detalles en la pantalla. Claro. ¿Está bien si hago más preguntas mientras trabajamos? - ¡Por supuesto! - Te lo agradezco.

A un alto nivel, quiero asegurarme de que se pueden completar tareas comunes usando comandos de VoiceOver. Comenzaré activando VoiceOver con Función Rápida.

“Activar VoiceOver, Landmarks, botón mostrar barra lateral”. Se oye “VoiceOver activado” y, luego, el nombre del primer botón. Es ideal comenzar a explorar por aquí. ¿Cómo comprendo la estructura de una app con VoiceOver? Deslizo el dedo hacia la derecha para mover el foco de VoiceOver a cada botón.

“Buscar”. “Campo de búsqueda”. “Botón mostrar insignias”. “Punto de referencia destacado”. “Botón Monte Fuji”. “Acciones disponibles”. A medida que el foco se mueve a cada botón, puedo escuchar el nombre y el tipo de elemento. Esto me dice qué es y qué puede hacer. Para entender el diseño de la app, puedo arrastrar mi dedo por la pantalla. “Botón desierto del Sahara”. “Botón Serengeti”. “Botón desierto del Sahara”. Esto me indica que el desierto del Sahara está a la izquierda del Serengeti y viceversa. Parece que es importante considerar que VoiceOver cambia la forma en que las personas navegan. Las personas usan el tacto para mover el foco y luego interactuar. Ahora, usemos VoiceOver para agregar Landmarks a la colección del equipo Accesibilidad. Sé que normalmente hay una barra lateral a la izquierda. Usaré VoiceOver para encontrarla y activarla.

“África”. “Botón Monte Everest”. “Botón Wulingyuan”. “Botón Monte Fuji”. “Asia”. “Punto de referencia destacado, botón Monte Fuji”, “Botón mostrar insignias”, “Buscar, campo de búsqueda”. “Botón barra lateral”. Deslizaré el dedo a la derecha hasta encontrar el botón Colecciones. “Barra lateral, botón puntos de referencia”. “Botón mapa”. “Botón Colecciones”. Ahí está. Haré doble toque para activarlo. “Seleccionado, Colecciones”. VoiceOver confirmó que el botón Colecciones está activado y que ahora estamos en la vista Colecciones. Busquemos y abramos la colección del equipo de Accesibilidad. Primero, cerraré la barra lateral. “Botón Mapa”. “Botón Puntos de referencia”. “Botón Barra lateral”. “Barra lateral”. “Buscar, campo de búsqueda”. “Botón Mostrar insignias”. “Favoritos”. “Botón Desierto del Sahara”. “Botón Islas Shetland del Sur”. “Botón Montañas Rocosas”. “Botón Salar de Uyuni”. “Mis colecciones”. “Equipo de Accesibilidad”. “Botón tres elementos”. Abramos esto. “Equipo de Accesibilidad”. Ahora, revisemos los puntos de referencia que ya agregamos. “Lugares a los que el equipo de Accesibilidad puede ir para caminatas en equipo”. “Botón Gran Cañón”. “Botón Cataratas del Niágara”. “Botón Árbol de Josué”. “Acciones disponibles”. Árbol de Josué es el último punto de referencia. Muy buena lista. Agreguemos Muir Woods a nuestra colección. Buscaré el botón editar. “Botón Cataratas del Niágara”. “Botón Gran Cañón”. “Lugares a los que el equipo de Accesibilidad...”. “Equipo de Accesibilidad”. “Buscar, campo de búsqueda”. “Botón Editar”. “Editar”. “Botón Seleccionado”. “Buscar, buscar tu...”. “Título”. “Equipo de Accesibilidad”. “Descripción”. “Lugares a los que el equipo...”. “Puntos de referencia”. “Botón Seleccionar”. “Seleccionar título de puntos de referencia”. “Seleccionado”. “Seleccionar Asia, título”. “Monte Fuji”. Para navegar rápido por la lista, me desplazaré hacia arriba con tres dedos. “Página dos de cinco”. “Página tres de cinco”. Ahora, agreguemos Muir Woods. “Montaña Kirchufel”. “Norteamérica, título”. “Seleccionado, Gran Cañón”. “Seleccionado, Cataratas del Niágara”. “Seleccionado, Árbol de Josué”. “Montañas Rocosas”. “Valle de los Monumentos”. “Muir Woods”. Ahí está. Agreguémoslo a nuestra colección. “Seleccionado. Muir Woods”. Gracias, Lisa. Eso es muy interesante. Así, se agrega contexto sobre cómo los usuarios de VoiceOver usarán Landmarks después del lanzamiento. Lisa, tengo que practicar estos gestos. ¿Tienes algún consejo? Hay tutoriales interactivos y configuraciones que te enseñarán cómo usar VoiceOver. Deberíamos hablar con personas que confían en VoiceOver hasta que obtengamos comentarios de personas que lo usan regularmente. A veces, no sabemos si una tarea común en nuestra app supone un desafío especial hasta que recibimos comentarios. También recopilaremos comentarios de los evaluadores internos y terminaremos de evaluar todas nuestras otras tareas comunes con VoiceOver. Indicaremos compatibilidad si no se encuentran otros problemas. Hasta ahora, hablamos sobre las decisiones de diseño que puedes tomar y las tecnologías de asistencia que puedes usar para que las personas disfruten de tus apps. También puedes comunicar a las personas que admites la accesibilidad multimedia con las Accessibility Nutrition Labels. Los subtítulos ofrecen descripciones de texto del diálogo y contenido audible mientras se reproduce el contenido multimedia. Les permiten a las personas sordas o con dificultades auditivas obtener información importante, como el habla, la comunicación no verbal, la música y los efectos de sonido. Asegúrate de que se puedan activar los subtítulos para el contenido de video o audio. Luego de confirmar que tu app ofrece subtítulos para el contenido, puedes agregar subtítulos a tus Accessibility Nutrition Labels. Lisa y yo confirmamos algo interesante al probar Landmarks para compatibilidad con subtítulos. Después de completar las tareas comunes, notamos que nuestra app no tenía contenido de video o audio. En este caso, no indicaremos que Landmarks admite subtítulos. Está bien. Esto describe con precisión las funcionalidades que se esperan estén disponibles al usar la app. Las descripciones de audio ofrecen información entre pausas naturales en el audio principal de los medios que describe a los espectadores lo que sucede en el contenido visual. Asegúrate de que las personas puedan encontrar contenido que incluya descripciones de audio. La mayoría de los servicios de streaming mostrarán un ícono de descripción de audio. Si las personas pueden encontrar y activar las descripciones de audio en tu app, puedes indicar compatibilidad. Luego de confirmar que tu app ofrece descripciones de audio, puedes agregar esta funcionalidad a las Accessibility Nutrition Labels. Al igual que los subtítulos, Landmarks no ofrece ningún contenido que requiera descripciones de audio, por lo que no indicaremos compatibilidad. Creo que estamos listos para que todos sepan lo accesible que es nuestra app. En App Store Connect, puedes agregar funcionalidades a las Accessibility Nutrition Labels en la página de tu producto. También puedes agregar un enlace a tu sitio web para proporcionar detalles adicionales sobre la accesibilidad de tu app. Veamos cómo funciona esto para Landmarks. Aprendimos mucho sobre nuestra app Landmarks al evaluar tareas comunes para cada funcionalidad. Verificamos que nuestra app admite Suficiente Contraste, Interfaz Oscura, Diferenciación no Sólo con Color, Movimiento Reducido, Control por voz y VoiceOver. Encontramos algunos problemas con el texto más grande, pero decidimos solucionarlos antes de agregarlo a nuestras Accessibility Nutrition Labels. Confirmamos que los subtítulos y las descripciones de audio no son relevantes para nuestra app, por lo que no los agregaremos. Iremos a nuestra página de producto en App Store Connect. Seleccionamos las funcionalidades compatibles con las Accessibility Nutrition Labels. También agregamos un enlace a nuestro sitio web de Accesibilidad. Ahora tenemos todo listo para la publicación. No puedo esperar a que las personas usen las Accessibility Nutrition Labels cuando decidan usar nuestra app. Nos entusiasma compartir con mayor facilidad tu excelente trabajo para que tus apps sean accesibles. Puedes revisar la documentación para desarrolladores y comenzar a evaluar tus apps hoy mismo. Recuerda asociarse con personas que necesitan funcionalidades de accesibilidad. Dedica tiempo a aprender a usar funcionalidades como VoiceOver y Control por voz. Las personas con discapacidad sabrán rápidamente que también pueden disfrutar de tu app. Así que no dudes en empezar a destacar la accesibilidad de tu app. Considera la accesibilidad desde la fase de diseño de tu app. Prueba cada funcionalidad de accesibilidad a través de las tareas comunes de tu app para determinar cuáles indicarás que son compatibles. Cuando finalices, muestra el soporte de accesibilidad de tu app agregando Accessibility Nutrition Labels a la página del producto. Para más información sobre los criterios de evaluación y las formas de mejorar la experiencia de accesibilidad, consulta la documentación sobre Accessibility Nutrition Labels. Gracias por acompañarnos. Lisa, ahora que sabemos lo accesible que es la app Landmarks, tal vez podamos llevar al equipo de Accesibilidad a hacer una caminata. ¡Suena genial!