Accesibilidad móvil: Cómo hacer apps accesibles

Introducción

El CEAPAT ha elaborado un documento de 94 páginas en el cual nos indican cómo hacer apps accesibles. Habla sobre los requisitos que deben tener en cuenta los desarrolladores a la hora de hacer una aplicación accesible.

Cómo hacer apps accesibles

Os resumo los puntos más importantes sobre el documento desarrollado por el Ceapat. «Cómo hacer apps accesibles»

Recomendaciones generales

Se incluyen las características de accesibilidad y usabilidad generales de la interfaz de usuario.

Identificación de objetos de la interfaz de usuario

  1. Nombre de los elementos de la interfaz: Debe garantizarse que todos los elementos de la interfaz, como casillas de verificación, botones o texto estático, están perfectamente identificados y son únicos en su contexto, con información de su nombre, estado y rol.
  2. Nombres consistentes y significativos: Los nombres de los elementos de la interfaz deben tener un nombre único y significativo a lo largo de toda la interfaz de usuario, usando un lenguaje natural que pueda entender el usuario.
  3. Nombres cortos y concisos: Deben utilizarse nombres que sean cortos y que no incluyan su función, de forma que el texto se diferencie del rol, el estado y el valor del elemento, información no visible pero que los lectores de pantalla verbalizarán a petición del usuario.
  4. Nombres visibles: Los elementos de la interfaz de usuario deben tener un etiquetado visible que informe al usuario
  5. Etiquetas de iconos: Todos los iconos deben poder tener asociada una etiqueta de texto y debe existir la posibilidad de visualizar sólo esa etiqueta.

Ajustes de preferencias de usuario

  1. Interfaz flexible y personalizable: Cada usuario debe poder cambiar y mantener las preferencias de la aplicación mediante la interfaz del sistema de una forma sencilla.
  2. Personalizar elementos comunes de la interfaz: Las aplicaciones desarrolladas deben admitir una configuración estándar para el tamaño, color y fuente de texto, utilizando las funciones del sistema.
  3. Personalizar la apariencia de los elementos. El usuario debe poder ajustar, de forma individual o en grupos, la posición u ocultación de aquellos iconos y objetos gráficos que puedan ser activados.
  4. Apariencia del cursor. Deben existir opciones para modificar la apariencia del cursor de texto y del puntero del ratón.
  5. Ajuste de tiempo de respuesta. Si se requiere una respuesta del usuario en un intervalo de tiempo determinado, se debe poder ajustar dicho intervalo, incluyendo la posibilidad de desactivar todos los límites de tiempo.
  6. Compatibilidad con atributos de visualización. La interfaz de usuario debe adaptarse a la configuración de contraste, color, tamaño y demás atributos de visualización que haya definido el usuario en el sistema operativo.

Pautas generales sobre control y uso

    1. Elección del método de entrada: Se debe permitir al usuario elegir el dispositivo de entrada preferido, ya sea el teclado, trackpad, pantalla táctil o la conexión de productos de apoyo que los sustituya.
    2. Elección del método de salida: Se debe proporcionar al usuario la posibilidad de elegir sistemas redundantes y combinados de salida para el sonido, imágenes, texto y gráficos.
    3. Pasos para realizar una acción: El software debe estar diseñado para minimizar el número de pasos que debe realizar el usuario para activar cualquier opción. Lo deseable es que el usuario alcance su objetivo en no más de dos o tres pasos. Regla de los tres clics
    4. Recuperación de errores: Se debe proporcionar una función que permita a los usuarios deshacer los efectos de acciones no intencionadas o que se quieran rectificar.
    5. Persistencia de avisos relevantes: La información sobre errores, o los avisos relevantes para la tarea actual, deben persistir hasta que el usuario confirme su lectura.
    6. Consistencia de las notificaciones: Los mensajes del mismo tipo, como mensajes o avisos, deben ser claramente identificables: deben tener el mismo formato y deben estar etiquetados de forma unívoca y estándar.
    7. Mensajes comprensibles: Los mensajes emitidos deben ser cortos, sencillos y redactados en un lenguaje claro para el usuario no técnico.
    8.  Mensajes de error: Cuando se produce un error, el sistema debería proporcionar sugerencias de soluciones posibles que ayuden a resolver el problema por parte del usuario.
    9. Información dinámica: El usuario debe poder pausar o detener la presentación de información que se mueve en carrusel o se actualiza periódicamente en un área de la pantalla.
    10. Controles temporales: Evitar los controles de interfaz de usuario que se extinguen o desaparecen después de un tiempo determinado.
    11. Salir de la aplicación: Las aplicaciones deberían ofrecer la opción de finalizar. Cerrar la aplicación en los sistemas operativos para dispositivos móviles no siempre parece evidente.

Opciones alternativas de entrada

Se incluyen las recomendaciones que tienen relación con los sistemas de entrada al dispositivo, tanto software como hardware.

  1. Método de entrada totalmente funcional: La aplicación se debe poder manejar de forma efectiva utilizando sólo uno de los posibles métodos de entrada, es decir, sólo con el teclado, sólo con el touchpad o con la pantalla táctil.

Foco del teclado

  1. Ubicación del foco: El foco de entrada debe quedar reflejado en pantalla de forma inequívoca.
  2. Contenidos de texto: Los contenidos relevantes en formato textual deben permitir su recorrido mediante un cursor cuando dispongan del foco.
  3. Función volver: Si el usuario cambia de tarea o de aplicación, al regresar, la interfaz debe recordar cuál era el control que tenía el foco, de forma que pueda seguir en el mismo punto en el que lo dejó.
  4. Navegación circular: La navegación entre elementos de la interfaz debe ser circular, de forma que el foco vuelva desde el último elemento al primero.

Entrada de teclado

  1. Acceso sólo por teclado. En la aplicación se deben poder navegar yactivar todas las funciones sólo mediante teclado,
  2. Atajos. Se deben proporcionar combinaciones de teclas para acceder rápidamente a las funciones principales y estas combinaciones deben estar documentadas.
  3. Métodos abreviados de teclado. Las etiquetas de los controles de la interfaz de usuario deben tener mnemónicos para un acceso rápido por teclado.
  4. Teclas de activación específicas. Los comandos de navegación por teclado no deben activar los objetos de interfaz.
  5. Compatibilidad con las funciones del teclado: Las aplicaciones deben respetar las convenciones de funcionamiento del teclado en el sistema operativo, de forma que no cambien la asignación funcional original de las teclas. Esto es una característica de consistencia que facilita su utilización por personas con diversidad funcional visual o intelectual.
  6. Navegación por listas y menús: Permitir a los usuarios elegir el elemento del menú utilizando las teclas del cursor, teclas principio y fin, mediante numeración, letras clave, etc.
  7. Agrupación de elementos relacionados: Los controles que estén relacionados deben estar próximos y alineados con un espacio de separación entre los grupos.
  8. Navegación lógica: El desplazamiento mediante teclado de un elemento a otro en los cuadros de diálogo debe seguir una secuencia consistente con la distribución de éstos en la pantalla.

Dispositivos apuntadores

La pantalla táctil cabe considerarla como un sistema de entrada que emula las funciones de un dispositivo apuntador.

  1. Alternativa al dispositivo apuntador. Las aplicaciones deben ofrecer laposibilidad de utilizar métodos alternativos para lograr entradas que serealizan normalmente mediante el dispositivo apuntador.
  2. Área táctil: El área sensible al tacto en una pantalla táctil, que activa o selecciona un elemento de la interfaz gráfica de usuario, debe tener una dimensión óptima de 9 x 9 mm, no debiendo ser inferior a 8 mm de ancho por 7 mm de alto.
  3. Asignación de botones: Se debe permitir cambiar la asignación de funciones de todos los botones del dispositivo apuntador.
  4. Evitar doble clic: Se debe poder emular el clic múltiple mediante la pulsación única de una tecla.
  5. Pulsación mantenida: Se debe poder emular la pulsación mantenida de un botón del dispositivo apuntador mediante la pulsación única de un botón.
  6. Velocidad del puntero: Se debe permitir configurar la velocidad y aceleración del movimiento del puntero del dispositivo apuntador.
  7. Ajustar la dirección del movimiento del puntero: La aplicación debería permitir cambiar la dirección predeterminada del puntero. Esta utilidad está asociada a un software de controladores de dispositivos, especialmente para joystick, lo que permite que el dispositivo pueda colocarse en cualquier posición.
  8. Pulsación simultánea: Se deben ofrecer alternativas para pulsaciones simultáneas de teclas y botones del dispositivo apuntador.

Recomendaciones generales sobre salidas

  1. Parpadeo. Se debe evitar presentar elementos que parpadeen o destellen con una frecuencia entre 2 y 50 Hz. El parpadeo dificulta la legibilidad y puede causar ataques epilépticos a algunas personas.
  2. Redundancia en la información auditiva y visual. La información relevante ofrecida en formato de audio o vídeo por las aplicaciones, debe también ser suministrada en otros formatos alternativos.

Pantalla

  1. Tamaño de imágenes: El usuario debe poder ajustar el tamaño de iconos y otras imágenes para facilitar su visión y selección.
  2. Magnificación: Debe existir al menos un modo de presentación de la información visual que sea legible para usuarios con agudeza visual entre 6/18 y 6/60 sin depender del sonido.
  3. No usar el texto para construir gráficos: No utilizar los caracteres para la creación de gráficos. Los lectores de pantalla interpretarán estos gráficos como texto y harán una lectura errática.

Texto

  1. Propiedades del texto: No se debe transmitir información sobre el estado sólo a través de los atributos del texto
  2. Tamaño y color: Las aplicaciones deben proporcionar opciones para que el usuario elija el tipo de letra, su tamaño y el color de todos los controles de la interfaz.
  3. Escalado de la interfaz: El diseño de la interfaz gráfica de usuario debe permitir que los elementos que la componen, principalmente el texto y los controles, sigan siendo visibles y navegables cuando se modifican su tamaño.

Color

  1. Color: La utilización del color es importante para realzar o resaltar la información, pero no debe usarse nunca como la única forma de transmitirla.
  2. Combinación de colores: Deben proporcionarse combinaciones de colores predefinidas que hayan sido diseñadas teniendo en cuenta las necesidades de las personas con diversidad funcional visual.
  3. Personalización de los colores de la interfaz: El usuario debería poder personalizar los colores de los elementos de la interfaz.

Ventanas

  1. Cambiar de una ventana a otra: El usuario debe poder cambiar de una ventana de trabajo o aplicación a otra utilizando el teclado, por combinación de teclas o mediante accesos directos.
  2. Gestión de las ventanas: Debe poder ajustarse el tamaño y posición de las ventanas. Así mismo, deben proporcionarse opciones para minimizar, maximizar, restaurar y cerrar las ventanas.
  3. Título de ventana único: El nombre de la ventana debe ser único y significativo en toda la interfaz del sistema.

Sonido

  1. Ajuste de volumen: El usuario debe poder ajustar el volumen del sonido de la aplicación. Este requisito tiene relación con la funcionalidad del propio sistema operativo y del dispositivo.
  2. Audio no vocal: Las señales acústicas auditivas no vocales están destinadas a proporcionar información al usuario del estado del dispositivo, de las aplicaciones o de las comunicaciones, como las señales de llamada, alertas o avisos de error.
  3. Alternativas a los avisos sonoros: Los usuarios con dificultad auditiva o que trabajan en entorno ruidosos o cuando deba utilizarse el dispositivo en silencio, deben poder activar una alternativa visual o por vibración.
  4. Lector de texto: Deben ofrecerse funciones que permitan enviar cualquier información textual a una salida mediante síntesis de voz.
  5. Lector de pantalla: La salida en síntesis de voz debe aparecer inmediatamente después de ocurrir el evento que la originó. Este requisito tiene relación con la utilización de un lector de pantalla.

Subtitulado y multimedia

  1. Proporcionar subtitulado: Si la aplicación proporciona reproducción de vídeo, debería ser compatible con el subtitulado adaptado y los subtítulos de idiomas para usuarios con problemas de audición.
  2. Visibilidad del subtitulado: El texto del subtitulado aparece en el borde inferior del vídeo, sobreimpuesto a la imagen.
  3. Control de reproducción multimedia: La aplicación debe proporcionar controles de reproducción para reproducir, pausar, saltar y avanzar o retroceder.

Servicios de accesibilidad de los sistemas operativos

Se describen a continuación los más relevantes:

  • Magnificador. Permite ampliar la imagen en pantalla de forma que los textos puedan leerse más cómodamente y percibirse mejor las imágenes.
  • Alto contraste y combinación de colores. Herramienta normalmente asociada al magnificador que permite invertir o modificar la combinación de colores para mejorar la visión de la pantalla por parte del usuario.
  • Lector de pantalla. Verbaliza la información que aparece en la pantalla, de forma que el usuario puede prescindir de verla para interactuar con el dispositivo.
  • Lectura de textos. Sistema de conversión texto a voz que ayuda a la lectura de documentos y otros contenidos, como páginas web o correos electrónicos. En alguno de los sistemas operativos es necesario adaptar el “Lector de pantalla” para esta función.
  • Reconocimiento de habla. Permite controlar el dispositivo por comandos de voz y escribir texto mediante dictado.
  • Avisos sonoros, visuales y hápticos. Señalización redundante de avisos o notificaciones del sistema operativo o de los programas para facilitar su percepción por parte de usuarios con dificultades visuales o auditivas.
  • Barrido. Método de acceso que permite al usuario controlar el dispositivo mediante un pulsador o una acción simple. No lo incorpora ningún sistema operativo.

 

Accesibilidad web: Técnicas PDF para las WCAG 2.1

Introducción

En esta entrada voy a hablar de las técnicas PDF para las WCAG 2.1 y os doy una serie de consejos prácticos para cada una.

El título de cada una de las técnicas os llevará a su descripción en la documentación de las WCAG 2.1

Técnicas pdf para las WCAG 2.1

Técnicas PDF de las WCAG 2.1

PDF1: Aplicar las alternativas de textos a imágenes con ALT

Esta técnica nos sirve para proporcionar alternativas de texto para las imágenes a través de un atributo Alt. Aquí os dejo una entrada donde hablé sobre cómo aplicar texto alternativo a las imágenes y cómo diferenciar unas de otras.

PDF2: Crear marcadores

El objetivo de esta técnica es permitir que las personas usuarias localicen contenido utilizando marcadores. Esto resulta beneficioso para las personas con diversidad funcional intelectual, por la facilidad que presenta el esquema jerárquico del documento. Esta técnica está asociada al criterio 2.4.5: Múltiples vías.

PDF3: Asegurar el tabulado correcto y el orden de lectura en documentos

Esta técnica sirve para que las personas usuarias puedan navegar a través del contenido en un orden lógico que sea consistente con el significado del contenido. Es imprescindible revisar el orden de lectura del documento mediante un lector de pantalla. Técnicas asociadas a los criterios 1.3.2: Secuencia significativa, 2.1.1: Teclado , 2.4.3: Orden del foco.

PDF4: Ocultar imágenes decorativas con la etiqueta “Artifact”

Esta técnica está relacionada con la técnica PDF1, en referencia a las imágenes decorativas. Esta asociada al criterio 1.1.1: Contenido sin texto

PDF5: Indicar los controles de formulario requeridos

Con esta técnica lo que pretendemos es notificar al usuario cuando un campo que debe completarse no se haya completado en un formulario PDF.

Para ello, hay que tener en cuenta la accesibilidad de los formularios en los sitios web.

Criterios: 3.3.1: Identificación de error, 3.3.2: Etiquetas o instrucciones,
3.3.3: Sugerencia de error

PDF6: Usar elementos de tabla para el marcado

Esta técnica nos da los pasos para marcar el etiquetado de las tablas. También es importante tener en cuenta la accesibilidad en las tablas. El criterio asociado es el 1.3.1: Información y relaciones.

PDF7: Aplicar Optical Character Recognition (OCR) en un documento PDF escaneado para proporcionar texto.

Un documento que tiene imágenes escaneadas de texto es intrínsecamente inaccesible. En este caso, las imágenes escaneadas de texto se pueden convertir a PDF mediante el reconocimiento óptico de caracteres (OCR). Criterios: 1.4.5: Imágenes de texto y 1.4.9: Imágenes de texto (sin excepción)

PDF8: Proporcionar definiciones de abreviaturas a través de una entrada para un elemento de estructura

El objetivo de esta técnica es proporcionar una expansión o definición de una abreviatura para la primera aparición de la abreviatura. Criterio 3.1.4: Abreviaturas.

PDF 9: Proveer encabezados al marcar el contenido con etiquetas de encabezado

Los encabezados se marcan utilizando los elementos de encabezado y tiene ser lógico y coherente. Es importante validar el documento siempre con un lector de pantalla. Criterios asociados: 1.3.1: Informaciones y relaciones y 2.4.1: Bloques de desvío

PDF10: Suministrar etiquetas para controles de formulario interactivos

Los campos de formulario tienen que tener un nombre significativo que esté relacionado con él, incluida la ayuda contextual. Criterios asociados: 1.3.1: Información y relaciones, 3.3.2: Etiquetas o instrucciones y 4.1.2: Nombre, Rol, Valor

PDF11: Proporcionar enlaces y vincular el texto mediante la anotación “Link”

La forma más sencilla de proporcionar enlaces que cumplan con los criterios de éxito de WCAG es crearlos al crear el documento, antes de la conversión a PDF. Es importante que el texto del enlace y el contexto en el que se incluye sea significativo, y en caso contrario añadir un texto alternativo. Criterios asociados: 1.3.1: Información y relaciones, 2.1.1: Teclado, 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces)

PDF12: Facilitar información de nombre, función y valor para los formularios

Como ya he dicho, todo campo de formulario debe tener un nombre y también tenemos que poner su valor y estado por defecto. Los criterios relacionados son: 1.3.1 y 4.1.2.

PDF13: Proveer texto de reemplazo usando la entrada “Alt” para enlaces

Volvemos a la técnica PDF11, donde se habla de los propósitos de los enlaces. Los criterios relacionados con esta técnica son: 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces).

PDF14: Proporcionar encabezados y pies de página en ejecución

Los encabezados y pies de página deben ser consistentes y deben incluir información relevante, así, como tener en cuenta la ubicación, ya que esto ayuda a las personas con diversidad funcional intelectual a orientarse
a lo largo de todo el documento. Los criterios relacionados son: 2.4.8: Ubicación y 3.2.3: Navegación consistente.

PDF15: Suministrar botones de envío con la acción de presentación en formularios

Al igual que ocurre en los sitios webs, también deberemos hacer lo mismo con los PDF. Criterio asociado a esta técnica, 3.2.2: En la entrada

PDF16: Configurar el idioma predeterminado mediante la entrada “Lang”

Con esta técnica, lo que conseguimos es especificar el idioma predeterminado de un documento. De esta manera, las personas con diversidad funcional pueden entender mejor el contenido. Es importante recordar que, también hay que marcar los cambios de idioma. Criterio asociado 3.1.1: Idioma de la página

PDF17: Describir la numeración de página coherente para documentos

Si vamos a añadir la paginación, por ejemplo en el pie, esta debe ser coherente con la paginación del propio documento. Criterios relacionados: 1.3.1 Información y relaciones, 2.4.8: Ubicación y  3.2.3: Navegación consistente.

PDF18: Especificar el título del documento mediante la entrada “Título”

Una de las cosas más importantes que siempre se recomienda es, como indica esta técnica: poner un título descriptivo al documento. Tiene mucho que ver con el criterio 2.4.2: Título de la página.

PDF19: Detallar el idioma para una frase con la entrada “Lang”

Volvemos a la técnica 16, donde ya se explicó. Si el texto en otro idioma está insertado dentro de un párrafo, será necesario convertirlo en una etiqueta independiente: <span></span>. Los criterios relacionados son: 3.1.1: Idioma de la página y 3.1.2: Idioma de las partes

PDF20: Utilizar el Editor de tablas de Adobe Acrobat Pro para tablas erróneas

En la técnica 6 explico todo lo que se refiere a las tablas. Criterio 1.3.1.

PDF21: Usar etiquetas de lista para documentos PDF

Esta técnica sirve para crear listas de elementos relacionados utilizando elementos de lista apropiados según su propósito, y que estén correctamente etiquetadas. Esto permite al lector de pantallas avisar de que hay listas. Criterio: 1.3.1: Información y relaciones

PDF22: Indicar la entrada de usuario que se encuentra fuera del formato requerido

Al igual que en un formulario web, en un formulario PDF se debe indicar los campos que son obligatorios y los formatos requeridos. Ya lo comenté en la técnica 5. Los criterios relacionados son: 3.3.1: Identificación de error y 3.3.3: Sugerencia de error

PDF23: Proporcionar controles de formularios interactivos en documentos PDF

Los formularios PDF deben ser accesibles también por teclado. Criterios relacionados: 2.1.1: Teclado.

Accesibilidad en videojuegos: Buenas prácticas

Introducción

Como curiosidad y con la charla que dieron en el Openzink, he empezado a investigar más sobre la accesibilidad en videojuegos.

El CEAPAT ha publicado el documento «Buenas prácticas de accesibilidad en videojuegos«, un extensa recopilación de 250 páginas de experiencias y estudios realizados en España sobre la accesibilidad en videojuegos en los últimos años.

Accesibilidad en videojuegos: Buenas prácticas

El objetivo del documento, es identificar, reunir y difundir buenas prácticas que permitan aprender de los otros, promover soluciones innovadoras, exitosas y sostenibles a problemas compartidos, establecer relaciones entre las soluciones efectivas, la investigación y las políticas y proporcionar orientaciones para el desarrollo de iniciativas nuevas.

Voy a hacer un resumen del documento, enumerando las cosas más importantes.

Principales barreras de accesibilidad en videojuegos

Los jugadores reciben estímulos del juego y deben procesarlos y responder a ellos proporcio
nando input al juego, con el fin de superar diversas tareas y cumplir determinadas misiones para alcanzar su objetivo, al mismo tiempo que disfrutan jugando. Yuan et al. (2010) identifican tres problemas principales de accesibilidad en videojuegos debidos a su interactividad:
  1. La persona que juega no puede recibir estímulos, ya sean visuales, auditivos o táctiles.
  2.  No puede determinar cuál es la respuesta adecuada para realizar una acción concreta necesaria para avanzar en el juego.
  3. El jugador no puede proporcionar input al juego debido a que no puede manipular el dispositivo de interfaz entre el jugador y el videojuego, ya sea el ratón, el teclado, etc.

Dichas barreras de accesibilidad afectan a distintos usuarios de forma diferente.
Por ejemplo, los jugadores sordos no reciben los estímulos auditivos y los ciegos no reciben los visuales. Los jugadores con diversidad funcional cognitiva pueden experimentar dificultades para determinar la respuesta de juego si la velocidad del juego es demasiado rápida o si la dificultad del juego es elevada.

Estrategias para mejorar la accesibilidad en videojuegos

  • Fomentar el diseño para todos en la fase conceptual del desarrollo de los videojuegos, de modo que las opciones de accesibilidad se tengan en cuenta desde el principio y no impliquen costosas modificaciones posteriores.
  • Promover el desarrollo y el uso de los dispositivos de tecnología adaptativa, así como la compatibilidad de las distintas plataformas con ellos. Otro avance consistiría en el diseño de un mando con controles simplificados que fuera compatible con todas las plataformas de juego y todos los juegos. El precio de dichos dispositivos debería estar al alcance de todos para asegurar que nadie no pueda acceder a este tipo de tecnología por falta de medios económicos.
  • Implementar un sistema de información y etiquetaje, similar al de la clasificación por edades de PEGI, que indique las opciones y el grado de accesibilidad de cada videojuego, por ejemplo, si está subtitulado o no, si incluye modo de práctica, si hay diversos niveles de dificultad, etc.
  • Concienciar a diferentes colectivos sobre la necesidad de mejorar el panorama de accesibilidad a los videojuegos mediante campañas de información dirigidas a la industria y el público, organización de eventos, conferencias, notas de prensa, etc.
  • Elaborar normas oficiales (UNE, ISO) que propongan pautas para mejorar la accesibilidad en videojuegos y se conviertan en un referente para la industria.
  • Fomentar la investigación interdisciplinar en el campo de la accesibilidad a los videojuegos

Recomendaciones generales de accesibilidad en videojuegos

  • Debe respetarse la zona de escritura segura para texto
  • La fuente empleada no debe distorsionarse y se debe utilizar un tamaño suficiente para asegurar la correcta legibilidad del texto.
  • Número de fuentes que se utilizan y su correcto visionado
  • Lenguaje claro y sencillo
  • Color y Contraste
  • Armonía de colores que no perjudique la lectura

Además la metodología desarrolla aspectos como:

  • Configuración de interfaz
  • Navegación
  • Menús de navegación
  • Imágenes e iconos

Accesibilidad y Jugabilidad

La accesibilidad y la jugabilidad van de la mano en pos de conseguir una mejor experiencia de usuario. Es importante destacar que si un videojuego es accesible pero tiene problemas de jugabilidad, no causará suficiente diversión y entretenimiento a los jugadores, será un juego que fracasará como tal, al no cumplir su principal objetivo.

Por otro lado, si un videojuego es jugable pero no es accesible, un conjunto de jugadores pueden verse limitados provocando frustración.

Soluciones existentes de acceso alternativo a los videojuegos

  1. Adaptaciones mecánicas de mandos de videojuegos basados en el movimiento natural. Como la Wii, Kinect. Sin embargo, su uso para personas con una grave diversidad funcional, queda limitado a un uso terapéutico, no competitivo.
  2. El acceso al ordenador como forma de acceso al videojuego. Una forma de acceder a los videojuegos es a través de un ordenador y podemos encontrar dispositivos de acceso como joysticks, ratones de bola, sistemas de seguimiento de la cabeza o incluso de la mirada.
  3. Mandos específicos para personas con diversidad funcional.

Recomendaciones para el subtitulado en videojuegos

  • Subtitular todos los elementos con audio en el texto: diálogos, tutorials con audio, sonidos ambientales, canciones, etc.
  • Utilizar fuentes fáciles de leer: Permitir al usuario ajustar el tamaño de la fuente. 
  • Asegurarse de que los subtítulos pueden leerse bien
  • Usar un máximo de 45 caracteres por línea
  • Limitar el número de líneas de los subtítulos a dos. Permitir la activación y desactivación de los subtítulos.
  • Hay que asegurarse de que haya un buen contraste entre los subtítulos y el fondo.
  • Utilizar etiquetas con el nombre de los personajes para facilitar su identificación.
  • Sincronizar los subtítulos con la imagen y el audio.

Y muchísimas cosas más, no lo puedo poner entero porque el documento es muy amplio, pero no tiene desperdicio. Se hace muy ameno y es fácil de entender.

Guía de accesibilidad para videojuegos.

Y para no perder la costumbre, y seguir el ejemplo de buenas prácticas para la accesibilidad de videojuegos, os dejo aquí una guía de vídeojuegos, Game Accesibility Guidelines, que está dividida en tres niveles: Básico, intermedio y avanzado. El documento está en inglés, pero es muy interesante

Openzink Chiclana: 1ª edición

Openzink en Chiclana 2018

Pues como sabéis, este sábado 1 de diciembre se ha celebrado en Chiclana un evento muy chulo más allá de WordPress. En esta ocasión damos paso al eCommerce, marketing digital y negocios online.

openzink

Openzink: Charlas de la mañana

Llegamos sobre las diez y pico y empezamos con la ponencia de Miguel Florido, sobre cómo mandar al jefe de paseo y empezar a vivir de tu proyecto.

Después continuamos con la ponencia de Nando Pappalardo en la que nos contó un poco su visión profesional de cómo hacer que el dinero trabaje para nosotros.

A continuación, hubo un cafelito para continuar la mañana con energía. Después de reponer energías comenzaron las charlas de la tarde.

Yo fui al taller de los esports, de la mano de Juan Antonio Tejada. La verdad es que bueno, es un tema que me resultaba curioso y tenía muchas ganas de escucharlo. Me pareció un taller muy interesante sobre todo, por ver cómo se organizaban los equipos, las ligas, los eventos sobre las competiciones de videojuegos, así como diferentes estrategias de marketing que se llevan a cabo.

Fue una charla que me dio qué pensar en cuanto a cómo está el mercado del videojuego en cuestiones de accesibilidad porque yo también he jugado de pequeña. No juego habitualmente por la frustación que genera no poder pasarte las fases o conseguir los objetivos de un juego determinado. Siempre en algún punto del juego, por h por b necesito ayuda, a veces sí y veces no. Yo, como cualquier otra persona también quiero poder hacer las cosas por mí misma.

Y la verdad es que, saqué una conclusión muy interesante al hablar con Juan: Como siempre, la accesibilidad es una tarea a tener en cuenta por los desarrolladores de videojuegos. En este caso, hay que mirar varios aspectos:

  • la programación de los juegos desde su inicio, es decir, si por ejemplo tenemos varios niveles de juego: como el nivel básico, medio y avanzado. Hay gente que no tiene ninguna dificultad y es incapaz de pasarse el juego a nivel intermedio, y a mí me cuesta el nivel básico. Entonces, teniendo en cuenta esta reflexión, está claro que ahí algo falla.
  • Bien puede ser, la adaptación de los mandos para facilitar la jugabilidad y la interacción de la interfaz. Yo en mi caso utilizaba un joystick de mesa adaptado cuando estaba en el ordenador, y lo usaba con una sola mano. Con la play, uso el mando normal y según el tipo de juego me costaba más o menos.
  •  Poder modificar los comandos, y los botones para las diferentes acciones a realizar.
  • Que exista la posibilidad de ralentizar ciertas acciones, porque puede ocurrir que un simple movimiento sea demasiado agresivo, así como la intensidad, vibración, fuerza, sensibilidad, precisión, velocidad del juego o tiempo de respuesta, etc… para todos los niveles.
  • A nivel auditivo: los subtítulos y poder controlar el volumen.
  • A nivel visual: Daltonismo.

¿Cuál es el problema?

En comparación con el mercado existente, hay muy pocos videojuegos accesibles, y sólo
una pequeña selección de ellos podrán ser disfrutados por cualquier persona sin importar sus
dificultades, pero no es sólo un problema de falta de producto: hay falta de sensibilización
y, en especial, falta de información sobre cómo desarrollar juegos accesibles.
También un problema es que, si se lanza al mercado un producto nuevo adaptado, una de las desventajas es el precio del producto.
Pero lo que está claro, es que se convierte es una necesidad a cubrir, ya que es un mercado que genera mucho dinero y en el que se debería invertir más.
Sirvan de gran ejemplo de comunidad sitios como AbleGamers, IGDA o AudioGames , donde muchas personas afectadas por algún tipo de diversidad funcional debaten y proponen soluciones de accesibilidad.
¿Qué ganamos con esto? Crear nuevos nichos de mercado. A nivel personal, lo que siempre digo: nos enriquecemos como personas, porque siempre se aprende algo nuevo. Y que todo el mundo tiene derecho a jugar.

Openzink: Charlas de la tarde

Luego teníamos la ponencia de Keka Sánchez, que nos habló de la importancia de llevar a cabo un plan de social media y nos dio consejos bastante interesantes, no sólo sobre cómo hacerlo sino también con las redes sociales.
Para reponer fuerzas, luego descansamos un ratillo y disfrutamos de la comida para continuar la tarde con la ponencia de Fernando Puente.
La ponencia de Fernando me gustó bastante porque habló sobre WPO, (Web Performance Optimization), nos dio consejos sobre lo importante que es tener un eCommerce rápido y optimizado. Si hacemos esto, entre otras muchas cosas, mejoramos el SEO, la tasa de conversión, es decir, mejoran las ventas. Y también se mejora algo muy importante: la experiencia de usuario, que ayuda a analizar la usabilidad de nuestro eCommerce.
Luego me fui al taller de Ibon Azkoitia, donde nos explicó cómo gestionar las tareas para un proyecto y cómo realizar un calendario editorial. Una charla muy interesante.
Para finalizar el día, quedaba la ponencia de José Mª Sánchez, que nos contó en qué consiste la estrategia del oceáno azul, así como la importancia de desarrollar productos y servicios innovadores.
Por último, se repartieron diferentes premios entre las personas asistentes.
Quiero dar desde aquí mi enhorabuena a todas las personas involucradas en el evento: ponentes, organizadores, voluntarios, fotógrafos, etc… por hacer posible un evento de estas características.
En definitiva, fue un día muy divertido viendo a los compis, que son unos cracks, y la verdad me fui a casa con ideas nuevas, pero también me quedé con ganas de más.
Ya estoy deseando que llegue la nueva edición de Openzink.

 

 

Accesibilidad web: Sensibilidad reducida al contraste

Sensibilidad reducida al contraste: Introducción

Como bien sabemos hay muchas personas que tienen problemas de visión, y la variedad que existe es enorme. Existen dificultades como la baja visión, el daltonismo, la retinosis pigmentaria, glaucoma, etc…

En esta ocasión vamos a a hablar de una dificultad visual que quizás mucha gente no lo tiene en cuenta porque es muy poco conocida: La sensibilidad reducida al contraste.

Definición de sensibilidad reducida al contraste

El contraste se define como «la capacidad de discriminar diferencias de iluminación entre áreas adyacentes cuyo umbral se estima como la menor cantidad de contraste que se hace para lograr esta distinción.»
Dicho de otra manera, la sensibilidad al contraste representa el menor contraste que el sistema visual puede detectar, es decir, que si no utilizamos los contrastes de la manera adecuada puede originar problemas de accesibilidad.

¿A qué se debe esta dificultad visual?

Este problema de visión se puede deber a enfermedades como las cataratas, los glaucomas, la diabetes, el SIDA, el Alzheimer o a una mala cirugía refractiva, como la miopía, la hipermetropía o el astigmatismo.

La sensibilidad al contraste se relaciona por diversas causas: el reconocimiento de objetos, la percepción de las caras o las distancias.

Valoración de la sensibilidad reducida al contraste

Una de las formas es, por medio de rejillas de enrejado. Están formadas por rejillas curvas en cartillas impresas.

Test de Sensibilidad al contraste

Por medio de letras de contraste decreciente. Estas son una cartillas creadas por Denis Pelli y  John Robson, en la que conforme va disminuyendo el contraste, la legibilidad se va perdiendo.

Por lo tanto, hace que estas personas tengan problemas a la hora de leer el contenido si no se establece un buen contraste.
Sensibilidad de contraste: Prueba de letras

 

Se considera que la sensibilidad al contraste se puede medir más facilmente utilizando cartillas del mismo tamaño pero con contraste decreciente y el umbral de contraste se determina, según la última línea en la cual la persona pueda reconocer los caracteres.

El test de Lea Hyvarinen

El test de Lea lo desarrolló Lea Hyvarinen, natural de Finlandia, que consiste en una serie de figuras pictóricas, como cuadrados, manzanas, casas y círculos con varias versiones para valorar problemas de visión: la visión lejana, la vista cansada, la sensibilidad al contraste, la ambliopía u ojo vago y el daño cerebral.

Sensibilidad reducida al contraste al contraste: Test de Lea Hyvarinen

 

Otra de las pruebas que se realizan es el Test de Bajo Contraste de Hiding Heidi, que determinan los niveles de contraste que un bebé puede detectar. Ayuda a proporcionar datos de referencia para evaluar los cambios futuros.

Consiste en 4 tarjetas impresas por ambos lados, de 23cm x 23cm, con los siguientes contrastes:
Negro, 25%, 10%, 5%, 1,25%

Sensibilidad al contraste: Test de Hiding Heidi

Ahora bien, una vez definida la sensibilidad al contraste y cómo se llevan a cabo los diferentes tipos de test, tenemos que tener en cuenta las pautas referentes al contraste de colores determinado en las WCAG 2.1.

1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos:

  • Textos grandes: Los textos de gran tamaño  y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.

1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.

  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

 

Herramientas para evaluar el contraste de colores

Color Contrast Checker, de WebAim
Color Contrast Tester, de Joe Dolson

Recuerda que siempre hay que utilizar contrastes altos entre el color y el fondo

 

 

 

Accesibilidad web: ¿Cómo trabajar los enlaces?

Introducción

En esta entrada voy a hablar sobre cómo hacer enlaces más accesibles para facilitar su comprensión a todas las personas.

Cómo trabajar los enlaces

Para ello, tenemos que tener en cuenta que para trabajar con enlaces, el texto del propio enlace debe indicar claramente cuál es su propósito, como el contenido o información que se encuentra en el documento de destino o descripción de la acción que invoca.

El objetivo de esto es ayudar a las personas con diversidad diversidad funcional a comprender el propósito de cada enlace, de forma que puedan decidir seguir el enlace o no.

Criterios por los que se aplican los enlaces y su significado

Una vez explicado, vamos a hablar ahora de los criterios que establecen las Pautas de Accesibilidad al Contenido Web (WCAG 2.1).

2.4.4 Propósito de los enlaces (en contexto): El propósito de cada enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel A)

2.4.9 Propósito de los enlaces (sólo enlaces): Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel AAA)

Elementos de un enlace

Poniendo un ejemplo de lo que dice el criterio 2.4.4 es bien sencillo:

  1. Para más información, pulse este enlace.
  2. Puedes ver las fotos en Twitter o en Instagram

 

Como se puede intuir, de las dos opciones que tenemos, el enlace que se entiende mejor es el segundo, porque tiene un enlace descriptivo. Tiene que ser lo más descriptivo posible, es decir, en este caso, se cumple lo que establece el propio criterio: El enlace acompañado del contexto.

En la primera opción, por mucho que leamos, nos queda la duda: «¿para más información qué?»

Distinto sería dividir la información en dos párrafos, por ejemplo:

Puedes ver las fotos: (Un párrafo)

en Twitter o en Instagram (Otro párrafo)

Al poner la información en dos párrafos separados, su contexto no puede ser entendido por el software, por lo tanto, se trata de un enlace NO descriptivo.

Sin embargo, si lo ponemos como lista también es válido. En este caso sí es descriptivo.

 

Hay que tener en cuenta una consideración:

  1. Dos o más enlaces que tienen la misma función y/o propósito se identifican de manera coherente.

 

¿Qué quiero decir con esto?

Que tiene que haber una coherencia en los enlaces y no dar lugar a confusión, es decir, tenemos que ser consistentes con lo que hacemos.

Los dos documentos que se idfentifican como PDF, se interpretan de la misma manera con respecto a los otros dos, cuya identificación NO es consistente.

Texto del enlace descriptivo

A la hora de trabajar con los enlaces descriptivos según su contexto, hay que analizar si el enlace al leerlo tiene sentido, y en el caso que no lo tenga, intentar que se entienda de la mejor manera posible.

Tenemos dos ejemplos:

  1. «Había mucho derramamiento de sangre durante la época medieval«.
  2. «Envíe su voto e infórmese sobre la Comisión de Voto Electrónico»

 

En la primera opción, está claro que no cabe dudas sobre el sentido del enlace. Sin embargo, en la segunda opción, el contexto no queda muy claro.

Por lo que, es preferible que la información adicional que aclare el contexto vaya antes del enlace.

Es decir:

«Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto«.

 

El texto del enlace y el contexto deben estar en la misma oración

  1. Aprenda más acerca de la Comisión sobre Voto Electrónico.

 Envíe su voto.

2. «Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto«

También se puede poner el enlace acompañado por una imagen.

Y en los enlaces a documentos no HTML es mejor proporcionar algún indicativo al usuario de que va acceder a otro formato de documento. Al ser información relevante hay que incluirla dentro del enlace.

Por otro lado, si por ejemplo, hablamos de noticias, o cualquier cosa interesante, es importante mostrar el título de la noticia, así como que vaya acompañado de una breve descripción.

  • Titulo de la noticia 1

Descripción de noticia 1

  • Titulo de la noticia 2

Descripción de la noticia 2

Si por ejemplo, tenemos en cuenta enlaces de libros se hace así:

¿Cómo indicamos la apertura de una ventana nueva?

  • Lo podemos indicar en el texto del enlace:

Constitución Española (PDF, abre en una ventana nueva).

  • Indicarlo en el título del enlace (a través del campo descripción).

Consideraciones importantes para el título del enlace

  • Sólo lo usaremos para complementar la información, no todos los enlaces tienen que tener título.
  • No duplicar el texto que aparece en el enlace
  • No usar la palabra “Enlace”. El lector de pantalla ya nos dice que es un enlace.
  • No debemos abrir nueva ventana cuando estemos en el mismo sitio web.

 

Enlaces que provocan un cambio de contexto.

¿Qué es un cambio de contexto?
Cuando enlazamos una página con diferente estructura, diferente disposición de contenidos, diferente menú principal, etc… se produce un cambio de contexto.

¿Cuándo ocurre?

  • Un enlace externo siempre provoca un cambio de contexto.
  • Existen enlaces internos, que también provocan cambios de contexto.

¿Qué tenemos que hacer?

Hemos de avisar al usuario que el enlace provoca un cambio de contexto, va a otro “sitio/espacio web”.

¿Cómo lo hacemos?
En el texto del enlace, o en la descripción del enlace.

Dirección del enlace (URL) como texto del enlace

No incluir la dirección web (URL) como texto del enlace, a no ser que refiera a la de la página de entrada al sitio.

¿Por qué no se puede hacer esto? Muy sencillo.

Porque cuando el lector de pantalla lee la URL dice: «http dos puntos barra w w w punto…» y resulta tedioso para las personas que usan lector de pantallas.

Accesibilidad web: Guías de interfaces móviles accesibles

Guías de interfaces móviles accesibles

Voy a hablar de unas pautas, de unas guías que son imprescindibles para llevar a cabo el desarrollo de la accesibilidad de los móviles.

guías de interfaces móviles accesibles

Están desarrolladas por Funka, una empresa sueca especializada en accesibilidad de reconocido prestigio internacional.

Estas guías nos ofrecen un listado de pautas, estudiadas y testeadas con usuarios, que nos permiten diseñar e implementar interfaces móviles más usables y accesibles.

Pautas para el desarrollo de interfaces móviles accesibles

Están disponibles en castellano: Pautas para el desarrollo de interfaces móviles accesibles (PDF)

Son 48 pautas agrupadas en 6 temas.

Elección de una solución

1. Observe que su sitio web básico funcione en dispositivos móviles.

Recomiendan utilizar el enfoque «Mobile First».

2. No obligue al usuario a utilizar una versión móvil, pero ofrézcala en caso de que las páginas del sitio web básico sean grandes o tengan unas funcionalidades complejas.

3. Una versión móvil del sitio web debe, en la medida de lo posible, facilitar al usuario la misma información y servicios que el sitio web normal, a no ser que se trate expresamente de una versión móvil de un servicio o funcionalidad específicamente delimitados.

4. Cree aplicaciones para funcionalidades claramente delimitadas a las que el usuario pueda necesitar acceder con frecuencia.

Diseño

5. Siga las WCAG 2.0 excepto en los aspectos que las presentes pautas contradigan a las WCAG 2.0.

6. Al crear aplicaciones para dispositivos específicos, deberán seguirse las directrices de diseño y accesibilidad, siempre y cuando no contradigan estas pautas.

7. Si desarrolla una aplicación para una plataforma específica, deberá ser compatible con las características propias de la plataforma.

8. Identifique los elementos gráficos, iconos y botones con su motivo o función.

9. Cada objeto de formulario debe tener una etiqueta o una descripción.

10. No utilice marcos en interfaces web.

11. Ayude al usuario a introducir datos adaptando el teclado virtual al contenido que debe introducirse.

12. Minimice el uso de scripts ejecutados en cliente.

13. Realice pruebas prácticas de la solución.

Estructura y presentación

14. En las vistas con scroll, coloque las cosas importantes más arriba y las menos importantes más abajo.

Pero ten en cuenta también que es difícil conseguir hacer clic en los objetos que se encuentran arriba del todo en la pantalla. Por lo tanto, una interacción importante no debe situarse en la parte de arriba del todo de la pantalla.

zonas_mas_faciles_pulsar

15. Agrupe los elementos que van juntos.

La página debe redistribuirse, en la medida de lo posible, de modo que la información relacionada se posicione justo detrás de la sección con la que se relaciona, en lugar de que todo el material relacionado se coloque abajo del todo.

16. Procure crear un diseño limpio y minimice el número de objetos “innecesarios”.

17. Procure que el encabezado de la página sea pequeño.

18. Cree áreas grandes para hacer clic.

Procure que el área para hacer clic tenga como mínimo el alto de fila del cuerpo de texto en un sentido y el alto de fila del cuerpo de texto multiplicado por 3 en el otro sentido. Los iconos de una aplicación deberían tener, como mínimo, 9 milímetros de ancho y de alto.

19. No coloque los botones de uso frecuente en el margen derecho o izquierdo, a no ser que ocupen, como mínimo, una tercera parte del ancho de la pantalla.

A los usuarios que solo utilizan una mano, o que tienen que equilibrar el móvil sobre la rodilla para poder utilizarlo, les resulta difícil pulsar botones que están en los márgenes.

20. No coloque a la derecha los botones, funcionalidades o grupos con botones y funcionalidades, a no ser que el grupo ocupe, como mínimo, el 75 % de la pantalla en todas las posiciones.

Beneficia específicamente a los usuarios que no ven el sitio web y utilizan el dedo índice para escanear la interfaz.

21. Oriente los botones y los enlaces en filas claras (horizontal y verticalmente).

22. Las etiquetas de los campos de introducción deben colocarse principalmente encima del campo.

Son una excepción las casillas de verificación y los botones de opción, en los que el texto puede situarse a la derecha, pero el título del grupo se colocaría encima del mismo.

23. Las longitudes de línea deben adaptarse al ancho de la pantalla, pero nunca superar un máximo de 70 caracteres por línea, espacios incluidos.

El objetivo es que la longitud sea de 55-60 caracteres por línea, espacios incluidos.

24. Limite la cantidad de información y el número de objetos mostrados.

25. Utilice iconos conocidos.

26. Diseñe los objetos clicables para que sean obvios.

Los enlaces no se deben distinguir solo por el color.

27. Utilice contrastes altos.

28. Debe ser posible utilizar la interfaz en la visualización tanto horizontal como vertical.

Interacción

29. Utilice conceptos de navegación sencillos.

Los mega-menús no funcionan bien en móvil y han de rediseñarse.

30. Si desarrolla una aplicación para un sistema operativo o un dispositivo móvil que pueda tener botones de control (por ejemplo, teclas de flecha y un botón Aceptar), debe ser posible utilizarlos para navegar por la interfaz.

31. Si desarrolla una interfaz que se pueda utilizar en dispositivos a los que se pueda conectar un teclado, la interfaz debe, cuando sea posible, poder controlarse con el teclado.

32. Inserte atajos para facilitar que el usuario salte de una parte a otra del contenido en las páginas largas.

Aunque estén ocultos inicialmente, deben mostrarse al recibir el foco en la navegación por teclado.

33. Minimice la introducción de texto en la interfaz.

34. Si la interfaz admite el control mediante gestos, debe implementarse esta función.

35. No incluya funciones que solo se puedan ejecutar mediante gestos, compleméntelas siempre con un botón o enlace.

36. Permita controlar la interfaz solo con un dedo.

37. Sea sistemático.

Por ejemplo, coloca los botones que tengan una determinada funcionalidad en el mismo lugar de la pantalla o diséñalos de forma homogénea.

38. Utilice los objetos integrados según su uso previsto y de la forma en que el usuario espera que se utilicen.

Es decir, en vez de implementar componentes propios con una funcionalidad equivalente.

39. Proporcione feedback al usuario.

Mediante un sonido y una vibración breve si el dispositivo lo permite, pero siendo posible desconectar esta confirmación. Puede haber excepciones cuando un exceso de confirmaciones se perciba como molesto (por ejemplo, una aplicación que funciona como podómetro no debe confirmar cada paso registrado).

40. Proporcione información de estado clara al usuario.

Por ejemplo, si la aplicación o sitio web están cargando datos, es conveniente mostrar el progreso de la carga.

41. Proporcione al usuario tiempo suficiente y avísele antes de que se supere el límite de tiempo.

Si fuera posible, también debería existir la posibilidad de prorrogar el tiempo de forma sencilla.

42. Ayude al usuario a evitar y a corregir posibles errores.

Por ejemplo con autocompletado o con sugerencias de búsqueda. Si aun así se producen errores, debe informarse claramente al usuario tanto en la parte superior de la página como en el lugar en el que se haya producido el error. Cuando sea posible, se debe ofrecer también propuestas de solución.

Contenido

43. Utilice imágenes solo si son realmente útiles para el usuario.

44. Utilice encabezados breves y descriptivos para estructurar la información.

45. Evite las abreviaturas.

Configuración de usuario

46. Asegure que la interfaz pueda ampliarse.

47. Considere la posibilidad de proporcionar una opción para invertir los colores.

48. Considere la posibilidad de proporcionar un ajuste para cambiar el tipo de letra.

Pautas de navegación móvil

Estas pautas están en inglés: «Mobile Navigation Guidelines»

 

Son 23 pautas que se agrupan en 5 temas.

Interacción

1. El concepto de navegación es fácil de comprender

2. La navegación es consistente y predecible entre los diferentes niveles de la estructura de información.

Una excepción es la navegación por el nivel superior, que puede ser diferente a la de los submenús sin crear problemas.

3. El usuario recibe feedback relevante.

Por ejemplo, se informa de la opción de menú seleccionada; un título visible indica en qué página se ha aterrizado; etc.

4. La comprensión del concepto de navegación no está basado en la ruta del enlace

5. El tiempo que se necesita para navegar está minimizado

Por ejemplo, se reduce el número de pasos para alcanzar el contenido si dichos pasos requieren una carga de página. Las pruebas demuestran que a menudo hacer scroll es más rápido.

6. La navegación trabaja en diferentes tamaños de ventanaNo solo en diferentes tamaños sino también en posición vertical y horizontal. Ciertos conceptos funcionan mejor en pantallas grandes y otros mejor en pantallas pequeñas, por ello no cambies demasiado pronto a la versión de navegación móvil.

7. La estructura de navegación soporta diferentes niveles de profundidad (si así se requiere). Hay conceptos que solo soportan uno o dos niveles de profundidad. Si tu web tiene una estructura más profunda debes escoger el concepto de navegación adecuado.

8. El menú solo debe contener la estructura de la información

Si la función de búsqueda está en el menú, habrá personas a las que les costará encontrarla. Tampoco recomiendan que tengas que abrir el menú para cambiar de idioma.

9. La estructura de la información se ha estudiado detenidamenteSi la arquitectura de información del sitio es incorrecta o está desequilibrada, el concepto de navegación se vuelve irrelevante, pues la información será difícil de encontrar independientemente del mismo.

Layout y diseño

10. El menú tiene un diseño claro.

Trata la importancia de saber en qué página estás, en qué nivel de la estructura te encuentras y qué otras opciones hay al mismo nivel. O también aspectos como el diseño consistente o la delimitación clara de las diferentes zonas clicables.

11. Presentar el menú verticalmente

Este punto no se aplica necesariamente al menú superior.

12. Áreas clicables suficientemente grandes.

Indican 9 mm medidos en la pantalla del dispositivo.

13. El menú es fácil de encontrar.

14. El icono del menú más texto complementario (si hay icono de menú).

Utiliza el icono de menú que los usuarios esperan encontrar y acompáñalo del texto «Menú».

15. El menú es de fácil acceso.

Debes poder acceder fácilmente al mismo cuando sostienes el teléfono con una sola mano.

16. Las opciones importantes del menú no están ocultas

No se refiere al menú oculto tras un botón «menú”, medida eficaz si su ubicación y diseño es claro y que además permite poner el foco en el contenido. Se refiere a ocultar opciones de menú tras un enlace «Mostrar más». Muchos usuarios evitan hacer clic en este tipo de enlaces incluso si no encuentran lo que están buscando en las opciones visibles.

Contenido

17. Poner el foco en el contenidoLo prioritario de la página es el contenido, que confirma además si lo que estás buscando es esa página o si llegaste a la página correcta. El menú no debe ocupar toda la pantalla a menos que el usuario así lo haya elegido

18. Los enlaces a las páginas importantes también están incluidos en el contenidoLas preferencias de navegación varían: unos usuarios utilizan el menú, otros el buscador, y muchos hojean títulos y enlaces relevantes, evitando el menú y el buscador. Los enlaces deben ser claros, descriptivos y legibles, para lo cual ayuda que estén en líneas separadas.

Diseño técnico

19. El menú trabaja con el lector de pantalla.

20. El menú puede ser usado con el teclado. Además el orden de tabulación ha de ser lógico y el foco visible.

21. Puedes navegar incluso cuando javascript está desactivado

Preferencias de los usuarios

22. El menú admite diferentes tamaños de texto y fuentes

Es decir, el usuario puede cambiar el tamaño de texto o las fuentes, mediante las opciones de personalización de su navegador o el sistema operativo, y el menú debe admitirlo y visualizarse correctamente,

23. El menú admite zoom.

Usabilidad web: ¿Qué es UI y UX? Diferencias

He decidido hacer esta entrada porque todavía hay mucha gente que suele confundir dos términos que son parecidos, pero que no significan lo mismo.

UI, que se le conoce como Interfaz de usuario y UX, que es Experiencia de Usuario.

ux y ui: diferencias

¿Qué es UI? (Interfaz de usuario)

La interfaz del usuario hace referencia al conjunto de elementos de la pantalla que hacen que el usuario interactúe con el sitio web. El experto en usabilidad y uno de los mayores referentes en UI, Jakob Nielsen ha desarrollado una serie de mejoras. Según él, los elementos más importantes de una IU son:

  • Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.
  • Ayuda al usuario: el sistema de navegación tiene que estar a la vista, y también tiene que incluir un sistema de búsqueda adicional.
  • Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).
  • Diseño gráfico funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere, y no solamente como adorno.

 

Componentes de la UI (Interfaz de Usuario)

La UI, principalmente presenta las posibilidades de interacción junto con el diseño visual. Esto quiere decir, que las decisiones de la Arquitectura de Información y el Diseño de Interacción se reflejan en la interfaz.

La arquitectura establece la estructura, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una serie de características: colores, texturas y gráficos que lo hacen estético.

Según Usability.gov, los elementos que generalmente se presentan en una UI son los siguientes:

  • Controles de Input: botones, campos de texto, casillas de verificación, botones de radio, listas drop down, campos de fecha…
  • Componentes de Navegación: migas de pan, sliders, formularios de búsqueda, paginación, tags, iconos…
  • Componentes de Información: ayudas adicionales, iconos, barras de progreso, notificaciones, cajas de mensajes.
  • Contenedores

Principios del Diseño de UI (Interfaz de Usuario)

Según Larry Constantine y Lucy Lockwood, existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:

  1. Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.
  2. Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.
  3. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.
  4. Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.
  5. Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
  6. Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.

 

¿Qué es la UX? Experiencia de usuario.

La experiencia de usuario hace referencia a las sensaciones que experimenta el usuario antes, durante y después de interactuar con un sitio, es decir, son las sensaciones que percibe y hace que el usuario se sienta satisfecho y feliz. Si esto ocurre, estaremos hablando de que ha producido una buena buena experiencia, que hemos hemos aplicado la accesibilidad y hemos hecho el sitio web lo más usable posible.

La experiencia de usuario, como se refiere al análisis del comportamiento del usuario, tiene actitudes relacionadas con la psicología:

  • La percepción. Tenemos que saber qué nos llama la atención, cómo nos afectan los colores y cómo desplazamos la mirada por la pantalla.
  • Las emociones. Las emociones no son reacciones automáticas, y por lo tanto hay que entender cómo se generan y qué implicaciones tienen. Las personas nos dejamos guiar más por las emociones que por cualquier otra cosa, y precisamente por eso es tan importante tenerlas en cuenta.
  • La memoria. Cuando diseñamos una web tenemos que pensar en las limitaciones de las personas para recordar. Muchas veces no se tienen en cuenta los caminos para que el usuario vuelva al punto de partida, y eso puede hacer que se sienta confuso.
  • La mentalidad. El usuario tendrá creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean. Siguiendo en esta línea, vemos por qué cada vez más los usuarios buscan valoraciones de otras personas acerca de un producto en la red: no es solamente desconfianza, también implica qué prejuicios y creencias tiene.
  • La motivación. El usuario tiene que estar motivado durante todo el tiempo que esté en una web, no solamente al principio (de lo contrario, puede irse). Actualmente existen muchas empresas que usan el Gaming para tener a sus usuarios motivados y entretenidos.
  • El aprendizaje. Desde el momento en que un usuario entra en una página web se convierte en un aprendiz y eso significa que tenemos que enseñarle los pasos que tiene que dar para que consiga su objetivo. Además, se tiene que estructurar la información para que el usuario entienda fácilmente todo el contenido de la web.

Principios de la UX. (Experiencia de usuario)

 

  1. Esté fuera del camino de las personas: En diseño, mucho puede ser excesivo. En realidad las personas saben lo que desean y es mucho mejor hacer esa experiencia de la manera más fácil posible, sin complicaciones.
  2. Cree jerarquías que vayan de acuerdo con lo que las personas necesitan: si el principio 1 es hacerlo todo más simple, es importante que lo que las personas encuentren tenga una organización similar a sus necesidades.
  3. Limite las distracciones: si usted tiene una idea clara de qué desea que los usuarios hagan, tenga cuidado con lo que pone al lado, pues puede lograr resultados contraproducentes. Un diseño limpio y sin distracciones es un buen aliado.
  4. Provea de manera fuerte la esencia de la información: lo que más puede limitar una buena experiencia es no tener todo el conocimiento o contenido adecuados. Por ello, el diseño debe incluir lo necesario para la navegación y los contenidos prometidos o esperados por el usuario.
  5. Provea signos y pistas: hay que aprovechar todos los elementos a la mano, en especial los visuales, lo cual generalmente es un excelente complemento de la información adecuada.
  6. Es necesario el contexto: piense que no todos tienen el mismo nivel de conocimiento e información, por lo que muchas veces el contexto es parte importante para el desarrollo de la experiencia. Casi siempre todo necesita un porqué.
  7. Use el contenido constantemente: crear alertas y comunicar todo el tiempo en qué parte del proceso o del sitio se encuentra el usuario es vital para la buena experiencia.
  8. Haga reversibles las acciones: si hay algo que puede ser difícil de asumir para un usuario es que lo que hizo en el sitio web no pueda cambiarse o requiera muchos pasos para lograrlo. Por ello, es necesario dar la posibilidad de deshacer algunas decisiones, desde la simple de regresar a la página anterior hasta cancelar un pedido en una tienda en línea.
  9. Establezca un canal de retroalimentación: este puede ser uno de los canales más eficientes para saber lo que está sucediendo en su sitio web con la experiencia de usuario. Mantenga siempre una comunicación abierta. Si muchos usuarios ‘están equivocados’ o ‘no captan’ lo que usted está tratando de ofrecer o comunicar, lo más probable es que no sean ellos los del error.
  10. Es importante generar una primera buena impresión: lo que hace que los usuarios vuelvan y se conviertan en usuarios, lectores o visitantes fieles de un sitio es su experiencia. Generar buenos momentos y de tal forma buenos recuerdos impulsa esa fidelidad, y también el que comparta el sitio con otros.

Conclusión entre UI y UX

Por lo tanto la experiencia de usuario es lo que siente el usuario de interactuar con un producto, mientras que la interfaz de usuario es una capa visual de colores, texturas, formas y elementos. Por eso es algo que muchas personas suelen confundir con facilidad, porque digamos que una se integra dentro de la otra.

Es decir, la diferencia entre la interfaz de usuario y la UX o experiencia de usuario sería esta: El diseño de interacción se ocupa de decidir cuál será el recorrido y dónde se deberán situar los botones que desencadenarán las diferentes acciones, es la parte de estrategia y la experiencia de usuario trata sobre los aspectos relativos a esos procesos o acciones que se desencadenan, se ocupa de qué es lo que sucede cuando se activan los botones o mecanismos, y sería la parte mecánica del proceso.

Entradas relacionadas:

Accesibilidad y usabilidad web: Diferencias

Usabilidad web: Principios de diseño inclusivo

Introducción

Los principios de diseño inclusivo toman como elemento principal a los usuarios.

La base es diseñar teniendo en cuenta las necesidades de las personas con diversidad funcional permanente, temporal o contextual.

Van dirigidos a toda aquella persona que tenga que ver con el mundo del diseño y el de desarrollo de sitios web: diseñadores, profesionales de la experiencia del usuario, programadores, managers de productos, innovadores, artistas, pensadores…

Principios del diseño inclusivo

Los principios

Proporciona experiencias comparables

Asegúrate que la interfaz permite hacer tareas de manera conveniente para todos, sin perder la calidad del contenido.

Sea por circunstancias, contexto, o decisión propia, las personas son diversas. Usan métodos y herramientas distintas para interactuar con una aplicación. Lo que la interfaz ofrece a cada uno debe ser comparable en valor y calidad.

Ejemplos:

  • Contenido alternativo: Un alternativo básico, sea texto «alt» o una transcripción, descripción auditiva, o lenguaje de signos, hacen contenido accesible.
  • Caracteristicas de ergonomía: Proporcionar subtítulos sincronizados y poder personalizarlo hace un video accesible.
  • Establecer notificaciones y mensajes: Por ejemplo, para los usuarios ciegos aplicar los atributos ARIA

 

Considera la situación del usuario

Asegúrate de que la interfaz proporcione una una buena experiencia de usuario en cualquier situación.

Hay usuarios principiantes, los hay expertos, en el trabajo, en casa, viajando o bajo presión. Cada situación tiene su impacto. Para los que ya tienen dificultad en interactuar, por ejemplo por personas con diversidad funcional motriz, o si existen problemas con el uso del teclado, este impacto puede hacer la interfaz aún más difícil de usar.

Ejemplos:

  • Contraste de colores: Usar contrastes altos.
  • Ayuda contextual: La ayuda contextual es importante para los usuarios. Siempre es bueno esa información adicional que nos ayuda a saber qué estamos haciendo, por ejemplo, cuando estamos ante un formulario de inscripción y especificamos que el campo de «Contraseña» tenga 8 caracteres. Es muy importante para los usuarios que usen lector de pantalla.
  • Subtítulos: Cuando estemos en un lugar público y no queremos molestar a nadie es importante poner subtítulos y quitar el volumen.

Sé consistente

Usa convenciones, de manera consistente.

Los componentes de la interfaz reflejan patrones establecidos y conocidos que resultan obvios en funcionalidad, comportamiento, aparencia y estilo escrito. Se deben decir las cosas de la misma manera y los usuarios deben poder realizar acciones similares.

  • Patrones de diseño coherentes: Usa patrones de diseño consistentes para reforzar la comprensibilidad y familiaridad.
  • Consistencia de lenguaje: Usa lenguaje sencillo de manera consistente, incluso texto importante para usuarios de lectores de pantalla como el texto alternativo, encabezados, y etiquetas de controles. También es importante usar elementos del estilo como un resumen, bien señalado como tal, al principio de secciones, o destacar términos definidos en listados.
  • Arquitectura consistente: Usa arquitectura consistente en plantillas de paginas, para facilitar navegación y comprensión rápida.

 

El usuario manda

El usuario es que el manda. Debe poder interactuar con el contenido de la manera que le convenga.

Tiene que tener la posibilidad de trabajar para cambiar las características de la interfaz, como orientación de la pantalla, tamaño del texto y el contraste de colores.

Ejemplos:

  • Desplazamiento: El ‘Desplazamiento Infinito’ (cuando se agrega contenido automáticamente) puede implicar problemas para usuarios que usan el teclado, porque nunca pueden pasar el flujo de contenido. Permite desactivarlo poniendo un botón para actualizar.
  • No ponga animaciones: Para algunos usuarios pueden distraer y marear. Si empiezan automáticamente, deben de poder pararlas.
  • Permite hacer zoom: Hay muchas razones para querer hacer zoom en una pagina. Asegúrate de que el contenido no se esconde cuando se hace zoom.

 

Ofrece opciones

Proporciona diferentes maneras de cumplir las tareas.

Normalmente hay más de una manera de cumplir una tarea, y no se puede saber cual será la preferida por un usuario. Proporciona alternativas para la maquetación de información, y los procesos para cumplir tareas. Ofrece opciones que permita al usuario elegir la que le conviene en cada contexto.

Ejemplos:

  • Diversas maneras para hacer una acción: Ofrece maneras distintas para hacer una acción. Por ejemplo para borrar un objeto,se puede permitir una interacción directa, sea un gesto en pantalla táctil o una tecla de atajo, así que seleccionar objetos y tocar una botón de borrar – cómo se ve en clientes de correo.
  • Maquetación:  Hay usuarios quienes prefieren imágenes grandes, o contenido en bloques pequeños.
  • Alternativas accesibles: Hay muchas maneras de presentar la información. Esta información que presentamos, debe favorecer y debe estar disponible para todos los usuarios. Esas alternativas pueden ayudar a todos los usuarios, no sólo a un grupo determinado, (por ejemplo a los usuarios que usan lector de pantalla).

 

Prioriza el contenido

Ayuda al usuario a enfocarse en tareas, funciones y contenidos importantes para destacarlos en el contenido y la maquetación.

Puede ser más difícil entender una interfaz si las partes más importantes no se destacan. Un sitio puede ofrecer mucha información y funcionalidad, pero debe permitir al usuario enfocarse en una cosa a la vez. Identifica la función clave de la interfaz, el contenido y los controles que se dirigen a esta función.

Ejemplos:

  • Enfoque en la tarea actual: Muestra funcionalidades y contenido cuando son relevantes, no todos al principio.
  • Prioriza tareas: Ejemplo: Una app de correo permite principalmente leer y escribir mensajes. Entonces, haz que el botón para enviar un nuevo correo este siempre disponible. Igualmente, pon la bandeja de entrada antes de otros listados como los correos enviados o el spam. Es decir, dar prioridad a las acciones más importantes.
  • Ordenar el contenido: Es muy importante ordenar el contenido, tanto visualmente como en el orden del contenido en el código fuente.
  • Usa un lenguaje claro: En el texto de los enlaces, encabezados, y botones usa un lenguaje sencillo y claro, poniendo primero la información más importante. Eso facilita el escaneo del texto, sea visualmente o por audio, por ejemplo con un lector de pantalla.

 

Agrega valor

Considera el valor de funciones y características, y cómo mejoran la experiencia de usuarios diversos.

Funciones y características deben mejorar la experiencia del usuario, proporcionando maneras eficaces de encontrar e interactuar con el contenido. Considera funcionalidades de dispositivo cómo interreacción por voz, géolocalizacion, la camera, o vibración, y cómo integración con dispositivos conectados pueden ofrecer opciones más convenientes.

Ejemplos:

  • Integración con dispositivos conectados, o «pantalla segunda»: Usa la interacción por voz para controlar contenido multimedia o buscar contenido, que ayuda a la gente que puedan tener dificultades con otras interfaces.
  • Integración con funcionalidades de la plataforma: Utiliza la vibración para que salten las notificaciones para personas con dificultades auditivas, y geolocalización para facilitar el uso de servicios locales para usuarios con dificultades para moverse.
  • Facilita tareas: Permite ver contraseñas para que los usuarios sepan si las han escrito bien. Permite la identificación por huella digital así como por contraseña.

 

 

 

 

 

Accesibilidad web: Marcador de posición en los formularios

Los marcadores de posición en los campos de formulario son perjudiciales

El texto del marcador de posición dentro de un campo de formulario dificulta que las personas recuerden qué información pertenece a un campo, así como verificar y corregir los errores.
También plantea cargas adicionales para los usuarios con dificultades visuales y cognitivas.
Las descripciones o consejos ayudan a aclarar qué se incluye dentro de cada campo de formulario y, por lo tanto, mejorar las tasas de finalización y conversión.

marcador de posición en los formularios

Desafortunadamente, los marcadores de posición en los campos de formulario a menudo perjudican la usabilidad.

Etiquetas y marcadores de posición

Las etiquetas le dicen a los usuarios qué información pertenece a un campo de formulario determinado y generalmente se ubican fuera del campo de formulario. El texto del marcador de posición, ubicado dentro de un campo de formulario, es una sugerencia, descripción o ejemplo adicional de la información requerida para un campo en particular. Estas sugerencias generalmente desaparecen cuando el usuario escribe en el campo.

Marcadores de lugar que reemplazan etiquetas

Algunos formularios reemplazan las etiquetas de campo con texto de marcador de posición en el campo para reducir el desorden en la página o acortar la longitud del formulario.

A continuación, voy a enumerar 7 razones principales por las que los marcadores de posición no deben usarse como reemplazos de etiquetas de campo.

1. El texto de marcador de posición que desaparece afecta a la memoria a corto plazo

Si el usuario olvida la pista, lo que la gente suele hacer al completar formularios largos, debe borrar lo que escribió y, en algunos casos, hacer clic fuera del campo para volver a mostrar el marcador de posición. En un mundo ideal, los usuarios estarían completamente enfocados al completar un formulario.

En formularios simples, de uso frecuente, con uno o dos campos, como un cuadro de búsqueda o un formulario de inicio de sesión, los usuarios pueden adivinar a qué se deben ingresar.

2. Sin etiquetas, los usuarios no pueden verificar su trabajo antes de enviar un formulario.

La falta de etiquetas hace que sea imposible para los clientes mirar el formulario y asegurarse de que sus respuestas sean correctas.

Del mismo modo, los navegadores que completan automáticamente los campos de formulario pueden completar la información de forma incorrecta. Si no hay etiquetas, o si las instrucciones especiales ya no están visibles, los clientes deben revelar el texto del marcador de posición eliminando el texto de cada campo uno por uno para verificar que coincida con la descripción.

3. Cuando se producen mensajes de error, las personas no saben cómo solucionar el problema.

Si el formulario se ha completado, pero no hay etiquetas o instrucciones visibles fuera de los campos del formulario, los usuarios tienen que volver a cada campo para revelar la descripción a fin de corregir el error.

4. El texto del marcador de posición que desaparece cuando el cursor se coloca en un campo de formulario es irritante para los usuarios que navegan con el teclado.

Las personas que usan la tecla Tab se mueven rápidamente de un campo a otro, y no se detienen a estudiar el siguiente campo antes de buscarlo.

5. Los campos con cosas en ellos son menos perceptibles.

Los estudios de seguimiento de ojos muestran que los ojos de los usuarios se sienten atraídos por los campos vacíos.

6. Los usuarios pueden confundir un marcador de posición con los datos que se completaron automáticamente.

Algunos usuarios suponen que el texto del marcador de posición es un valor predeterminado y saltean el campo por completo. Lo más cómodo es dejar el campo vacío.

7. Ocasionalmente, los usuarios tienen que eliminar manualmente el texto del marcador de posición.

A veces, los marcadores de posición no desaparecen cuando los usuarios mueven el foco de entrada al campo. Si el marcador de posición permanece en el campo como texto editable, los usuarios se ven obligados a seleccionarlo manualmente y eliminarlo. Esto crea una carga innecesaria para los usuarios y aumenta el costo de interacción de rellenar el formulario.

A veces, el marcador de posición se atenúa cuando el cursor se coloca en un campo de texto. Desafortunadamente, este patrón de interacción es raro y los usuarios no están familiarizados con él: algunos todavía piensan que tienen que eliminar el texto manualmente. A menudo se requieren algunos intentos fallidos y muchos clics para darse cuenta de que pueden comenzar a escribir sobre el texto atenuado.

Texto de marcador de posición además de etiquetas

Usar texto de marcador de posición en combinación con etiquetas de formulario es un paso en la dirección correcta. Las etiquetas fuera de los campos del formulario hacen que la información esencial esté visible en todo momento, mientras que el texto de marcador dentro de los campos del formulario se reserva para información adicional.

Sin embargo, incluso al usar etiquetas, colocar sugerencias o sugerencias importantes dentro de un campo de formulario puede causar los 7 problemas mencionados arriba.

Si algunos de los campos requieren una descripción adicional que es esencial para completar el formulario correctamente, es mejor colocar ese texto fuera del campo para que esté siempre visible.

Marcadores de posición y accesibilidad

Un último tema a considerar es que el texto del marcador de posición generalmente es malo para la accesibilidad.

Tres de los mayores problemas de accesibilidad son los siguientes:

El color gris claro predeterminado del texto de marcador de posición tiene un contraste de color pobre en la mayoría de los fondos. Para los usuarios con problemas visuales, el contraste deficiente del color dificulta la lectura del texto. Debido a que no todos los navegadores permiten que el texto de marcador de posición tenga un estilo mediante CSS, este es un tema difícil de mitigar.

Los usuarios con dificultades motoras son los que lo tienen más difícil. Los marcadores de posición pueden ser problemáticos: los marcadores de posición que no desaparecen requieren más interacción con el teclado o el mouse para eliminarse.

Por otra parte, si hablamos de personas con problemas visuales, no todos los lectores de pantalla leen el texto del marcador de posición en voz alta. Los usuarios ciegos pueden perder la pista por completo si el software que utilizan no menciona el contenido del marcador de posición.