Accessibility
Un producto digital utilizable por el máximo número de personas.
Accessibility
Una aplicación accesible admite personalizaciones de accesibilidad por diseño y ofrecen a todos una gran experiencia de usuario, independientemente de sus capacidades o de como utilicen sus dispositivos.
Aproximadamente una de cada siete personas tiene una discapacidad que afecta a su forma de interactuar con el mundo y con sus dispositivos. Las personas sufren discapacidades a cualquier edad, durante cualquier periodo de tiempo y con distintos niveles de gravedad, por ejemplo: si hay discapacidades en situaciones -como una lesión en la muñeca por una caída o la pérdida de voz por uso excesivo- estas pueden afectar la forma en que el usuario interactúa con sus dispositivos en distintos momentos
Buenas prácticas
Diseñar pensando en la accesibilidad, no solo consiste en poner la información a disposición de las personas en general, sino de todo el mundo, independientemente de sus capacidades o situación. Diseñar la aplicación teniendo en cuenta la accesibilidad significa dar prioridad a la sencillez y la perceptibilidad, y examinar cada decisión de diseño para asegurar que no excluye a personas con capacidades diferentes o que interactúan con sus dispositivos de formas distintas.
Simplicidad, permite interacciones familiares y coherentes que hagan que las tareas complejas sean sencillas y fáciles de realizar.
Perceptibilidad, garantiza que todo el contenido puede percibirse independientemente de que las personas utilicen la vista, el oído o el tacto.
Apoyo a la personalización, diseña la experiencia para que se adapte a las variaciones del entorno para que la gente la disfrute en cualquier contexto y en todos los dispositivos compatibles.
Cuando utilizas componentes para implementar tu interfaz, el texto y los controles se adaptan automáticamente a varios ajustes de accesibilidad como texto en negrita, texto más grande, invertir colores y aumentar contraste.
Las normas de accesibilidad integradas en estos componentes están diseñadas para sentar las bases de un diseño para un producto digital incluyente. Con esto en mente se deben seguir estas recomendaciones para poder diseñar un producto más accesible.
Comprueba la accesibilidad, para saber si el desarrollo es apto para cualquier usuario, se debe realizar una auditoría de componentes y se examinan todos los elementos de la experiencia en la aplicación. Sugerimos proporcionar una lista de los problemas que se encuentren y que se deben solucionar.
Interacciones
Las tecnologías de asistencia amplían las formas en que las personas pueden interactuar con sus dispositivos. Dado que estas tecnologías y funciones se integran con las proporcionadas por el sistema, es esencial que admitas correctamente las interacciones del sistema en la aplicación. Esto a través de los gestos, botones y controles.
Gestos
No elimines los gestos del sistema operativo. La gente espera que estas acciones como: deslizar hacia abajo para mostrar el Centro de Notificaciones funcionen independientemente de la aplicación que estén utilizando.
Proporciona diferentes formas de realizar acciones basadas en gestos. Incluye una opción para las personas que no puedan realizar un gesto concreto. Por ejemplo, si al deslizar el dedo se cambia una foto en el banner, también puedes ofrecer una forma alternativa de cambiar los elementos a través de un botón o el usuario le dé tap en la pantalla.
Trata de que la funcionalidad principal de la aplicación sea accesible a través de más de una interacción o un gesto. Por ejemplo, la cámara del iPhone y el iPad permite hacer fotos tocando el botón en pantalla o pulsando el botón para bajar el volumen del dispositivo. Además de hacer que la captura de fotos sea más cómoda para todos, estas interacciones alternativas ofrecen opciones a las personas que pueden tener una fuerza de agarre o una destreza limitada.
Botones y controles
Asigna a todos los controles y elementos interactivos un área de “toque” que mida al menos 36 x 36 pt. Las personas con movilidad reducida necesitan objetivos más grandes que les ayuden a interactuar con tu aplicación. Puede resultar frustrante interactuar con controles demasiado pequeños en cualquier plataforma, incluso cuando se utiliza un puntero.
Nombra los elementos custom en tu aplicación. Si utilizas button o NSAccessibilityButton para caracterizar una vista como un botón, VoiceOver pronunciará la descripción de la vista seguida de la palabra “button”, lo que indica a los usuarios que la vista se comporta como un botón.
Utiliza una jerarquía de estilos coherente para comunicar la importancia de los botones. Cuando se utiliza una jerarquía coherente de estilos de botón, los usuarios pueden comprender la importancia de los botones en función de su aspecto. En Elektra, por ejemplo, puedes encontrar un botón “relleno” visualmente prominente para el botón que realiza la acción principal, utilizando estilos menos prominentes -como gris o contorno- para los botones que permiten acciones menos importantes. También se pueden activar las formas de los botones para que resulte más fácil distinguir los botones activos del contenido.
Procura usar el componente switch del sistema. SwiftUI proporciona un interruptor que indica su estado por la posición del “botón” y su color de relleno. Para algunas personas, sin embargo, la adición de etiquetas hace que sea más fácil percibir si un interruptor está encendido o apagado.
Agrega a los links un indicador visual además del color, como un subrayado. Está bien utilizar el color para identificar un enlace, pero si se utiliza como único indicador, es posible que las personas con daltonismo o deficiencias cognitivas o de atención situacional no sean capaces de percibir la distinción.
Entrada al Usuario (input)
Permite que los usuarios introduzcan información hablando en lugar de tecleando. Si añades un botón de dictado en un campo de texto, los usuarios podrán elegir el habla como método de entrada preferido. Si creas un teclado personalizado, asegúrate de incluir una tecla de micrófono para el dictado.
Siempre que sea posible, no impidas que los usuarios seleccionen “texto plano”. Muchas personas confían en utilizar el texto seleccionado como entrada para traducciones y definiciones.
Descripciones de contenido
Proporciona descripciones alternativas para todas las imágenes que transmitan significado. Si no describes el contenido o el significaco de las imágenes en tu aplicación, impedirás que los usuarios de VoiceOver disfruten plenamente de la aplicación. Para crear una descripción útil, empieza por describir lo que sería para ti la imagen, lo más claro posible. Dado que VoiceOver lee el texto que rodea la imagen y cualquier pie de foto, centra tu descripción en la información que transmite la propia imagen.
Cuando una imagen es puramente decorativa y no pretende comunicar nada, debes ocultarla a las tecnologías de asistencia. Hacer que VoiceOver describa una imagen puramente decorativa puede hacer perder el tiempo a los usuarios y aumentar su carga cognitiva sin aportarles ningún beneficio
Da a cada pantalla un título único y pon encabezados que identifiquen las secciones de la jerarquía de información. Cuando los usuarios llegan a una pantalla, el título es la primera información que reciben de una tecnología de apoyo. Para ayudarles a entender la estructura de tu aplicación, crea un título único para cada pantalla que describa brevemente su contenido o finalidad. Del mismo modo, los usuarios necesitan títulos de sección precisos que les ayuden a construir un mapa mental de la jerarquía de información de cada pantalla.
Visualización de texto
Puedes utilizar Dynamic Type y comprobar que el diseño de tu app se adapta a todos los tamaños de fuente. Dynamic Type permite a los usuarios elegir el tamaño de fuente que más les convenga. Comprueba que el diseño se puede escalar y que tanto el texto como los signos y símbolos son legibles en todos los tamaños de fuente.
A medida que aumente el tamaño de la fuente, reduce al mínimo cortar el texto. En general, intenta mostrar tanto el texto útil en el tamaño de fuente más grande como en el tamaño estándar. Evita truncar el texto en las zonas de desplazamiento, a menos que los usuarios puedan abrir una vista independiente para leer el resto del contenido. Evita cortar el texto en una etiqueta configurándola para que utilice tantas líneas como sea necesario para mostrar una cantidad útil de texto.
Considera la posibilidad de ajustar el diseño en tamaños de fuente grandes. Cuando el tamaño de la fuente aumenta, los elementos en línea y los límites del contenedor pueden amontonar el texto, haciéndolo menos legible. Con tamaños de fuente grandes, un diseño en línea puede hacer que se trunque o que se superpongan el texto y los elementos secundarios.
En este caso, considera la posibilidad de utilizar un diseño escalonado en el que el texto aparezca por encima de los elementos secundarios. Crea un diseño que tenga la opción de ajustarse a los tamaños de fuente grandes en conjunto, no permitas que solo se agranden algunos elementos.
Aumenta el tamaño de los íconos a medida que aumente el tamaño de la fuente. Si utiliza íconos para comunicar información importante, asegúrate también de que sean fáciles de ver con tamaños de fuente mayores.
Mantén una jerarquía de información coherente independientemente del tamaño de la fuente. Por ejemplo, mantén los elementos primarios en la parte superior de la pantalla, aunque el tamaño de la fuente sea muy grande, para que los usuarios no pierdan de vista estos elementos.
En la aplicación, usa tipos de letra regulares o pesados. Considera el uso de tipos de letra regular, media, semibold o negrita, porque son más fáciles de ver. Evita los pesos ultraligeros, finos y ligeros, que pueden ser más difíciles de ver. Quieres saber más sobre la fuente tipográfica visita Typography.
Asegúrate de que la aplicación responde correctamente y se ve bien cuando los usuarios activan el texto en negrita. En iOS, los usuarios activan el ajuste de texto en negrita para que el texto y los símbolos sean más fáciles de ver. En respuesta, tu aplicación debería poner todo el texto en negrita y dar a todos los signos y símbolos un mayor peso de trazo.
Asegúrate de que los tipos de letra personalizados son legibles. A veces, los tipos de letra personalizados son difíciles de leer. Si utilizas una fuente personalizada, asegúrate de que sea fácil de leer, incluso en tamaños pequeños.
Evita el uso de cursivas o mayúsculas en pasajes largos de texto. La cursiva y las mayúsculas son adecuadas para dar énfasis ocasionalmente, pero su uso excesivo dificulta la lectura del texto.
Evita el uso de cursivas o mayúsculas en pasajes largos de texto. La cursiva y las mayúsculas son adecuadas para dar énfasis ocasionalmente, pero su uso excesivo dificulta la lectura del texto.
Color y efectos
No confíes únicamente en el color para diferenciar objetos o comunicar información importante. Si utilizas el color para transmitir información, asegúrate de proporcionar etiquetas de texto o formas de signos o símbolos que ayuden a todo el mundo a percibirla.
Evita utilizar combinaciones de colores como única forma de distinguir entre dos estados o valores. A muchos daltónicos les resulta difícil distinguir el azul del naranja; otras combinaciones problemáticas son el rojo y el verde, el rojo y el negro, y el rojo o el verde combinados con gris. Cuando tenga sentido utilizar una combinación de colores para comunicar estados o valores, incluye indicadores visuales adicionales para que todos puedan percibir la información. Por ejemplo, en lugar de utilizar círculos rojos y verdes para indicar fuera de línea y en línea, puedes utilizar un cuadrado rojo y un círculo verde.
Asegúrate de que las vistas responden correctamente a invertir colores. Los usuarios pueden activar Invertir colores cuando prefieren ver los elementos sobre un fondo oscuro. En el modo invertir colores de forma inteligente, las imágenes, los vídeos y los íconos a todo color (como los íconos de aplicaciones y las imágenes que no son plantillas) no se invierten, y la UI oscura permanece oscura. Prueba tu aplicación para encontrar lugares en los que podrías necesitar evitar que una imagen -como una foto en una vista personalizada- se invierta. Para saber más visita la sección de Dark Mode.
Utiliza colores muy contrastados para mejorar la legibilidad. Hay muchos factores que afectan a la percepción del color, como el tamaño y el peso de la fuente, el brillo del color, la resolución de la pantalla y las condiciones de iluminación. Al aumentar el contraste de color de elementos visuales como texto, símbolos y controles, puede ayudar a que más personas utilicen la aplicación en más situaciones. Para averiguar si el contraste de colores en tu interfaz cumple los niveles mínimos aceptables, puedes utilizar una calculadora de color online basada en la fórmula de contraste de color de las Pautas de Accesibilidad al Contenido en la Web (WCAG). En general, el texto más pequeño o de menor peso debe tener un mayor contraste para ser legible.
Animaciones
Los usuarios pueden distraerse o a experimentar mareos o náuseas al ver animaciones que incluyen efectos como zoom, escalado, giro o movimiento periférico. Para evitar esto, debes desactivar o reducir las animaciones que se sabe que causan problemas. Si utilizas una animación problemática para comunicar información importante, plantéate diseñar una alternativa no animada o ajustar la física de la animación para reducir su movimiento. Por ejemplo:
- Reduce los efectos de rebote en animaciones o realiza un seguimiento 1:1 con el dedo del usuario.
- Evita animar los cambios de profundidad en las capas del eje z.
- Evita animar dentro o fuera de desenfoques.
- Sustituye una diapositiva por un desvanecido (fade) para evitar el movimiento.
Ten cuidado al mostrar elementos en movimiento o parpadeantes. Aunque el movimiento sutil y el parpadeo pueden llamar la atención, estos efectos también pueden distraer y no son útiles para personas con discapacidad visual. Peor aún, algunos elementos parpadeantes pueden provocar episodios epilépticos. En cualquier caso, evita utilizar el movimiento y el parpadeo como única forma de transmitir información.
También puedes consultar
Materials
Image Formats
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
