Accesibilidad web: La Confederación Estatal de Personas Sordas

Escribo esta entrada a modo de reflexión porque las personas con diversional funcional, sea del tipo que sea, sin distinción, formamos parte de esta sociedad, no sólo las personas sordas.

Y también voy a comentar los problemas de accesibilidad que presenta el sitio web de la Confederación Estatal de Personas Sordas.

Confederación Estatal de Personas Sordas

El otro día navegando por internet me entró curiosidad por ver cómo se desenvuelven las personas sordas por estos lares. Así que nada mejor que investigar en su sitio web principal, y ver vídeos en youtube.

Tal fue mi sorpresa que me di cuenta de que la Confederación Estatal de Personas Sordas  discrimina al resto de personas con Diversidad Funcional y también a las personas oyentes.

Que vale, que sí, que es una asignatura pendiente que tenemos y que deberemos adaptarnos tarde o temprano a su mundo, que es un mundo tan desconocido y tan incomprendido, que ya va siendo hora de que aprendamos algo, aunque sea lo más básico.

Pero como siempre digo, hasta que no lo tienes cerca no eres consciente del problema y la dificultad que entraña vivir con este hándicap: el principal, convivir en sociedad, ya que su círculo es bastante reducido.

Y ojalá pudiera terminar este post aquí, pero… ahora viene la parte negativa de este asunto y es algo que es imposible pasar por alto.

Que la propia Confederación Estatal de Personas Sordas discrimine al resto de personas con diversidad funcional es algo que no se puede permitir.

Porque por ejemplo, investigando en su web, tienen una guía de autodefensa. Si no me explicas con subtítulos qué puedo hacer para ayudar a la persona en cuestión, por si en algún momento nos encontramos en esa situación, complicado lo tenemos, porque no todas las personas que tienen una diversidad funcional auditiva necesitan lengua de signos, como las personas que lleven audífonos o personas que usen implantes cocleares.

Siempre es bueno informar y tener un conocimiento mínimo de cómo poder desenvolverse, que se supone que es el objetivo de los vídeos: información general para TODAS LAS PERSONAS, sin distinción.

Como se suele decir: cada persona es un mundo y hay que intentar adaptarse a las necesidades de cada cual. Hace falta mucha concienciación.

Y aquí no acaba todo… aún hay más. Vamos a lo importante:

Su web presenta graves problemas de accesibilidad

La web NO es accesible para todas las personas con diversidad funcional.

 

Imágenes sin texto aternativo en la CNSE

el menú principal es inaccesible por teclado

  • Es imposible navegar por teclado, te vuelves loca. Y además, el foco de teclado no se distingue.
  • El formulario de contacto no está correctamente etiquetado, y está maquetado con tablas.

formulario de CNSE inaccesible

Captcha y botón Enviar de CNSE

 

Y por último y no por ello, menos importante, (aunque hay más cosas), señalar la razón por la que escribo este post: subtítulos en los vídeos tanto en youtube, como en su propia web.

Y como muestra, un ejemplo, un vídeo de la Ley 27/2007 por la que se aprueba la lengua de signos:

En la web:

video presentación CNSE

 

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: ¿Qué el es enfoque “Mobile First”?

Responsive Design. ¿Qué es?

Responsive Web Design (RWD) es una técnica de diseño y desarrollo de sitios y aplicaciones web que permite que las páginas se adapten al tamaño, la resolución y orientación de la pantalla, y por tanto al dispositivo del usuario. Y todo ello con un código único, una única página, una única URL.

Boston Globe

Boston-Globe-ejemplo-de-Responsive-Web-Design

Responsive Design. ¿Cómo se hace?

Esta flexibilidad se consigue mediante el uso de un código HTML único pero que se presenta de manera diferente gracias a:

  • La separación entre el contenido y la presentación: todos los estilos están definidos en las CSS.
  • Layouts basados en grids: la información se organiza en ejes verticales y horizontales. Tendremos definidos diferentes layouts en diferentes CSS, por ejemplo uno de 3 columnas, uno de 2 columnas y uno de 1 columna.

 

layout_rwd

 

  • Fluids Grids, es decir, el uso de medidas relativas que permitan que el contenido se pueda adaptar realmente como se ve en la imagen anterior. Permite utilizar todo el espacio disponible y evitar el desplazamiento horizontal.
  • Media Queries, permite cargar dinámicamente las diferentes CSS que hemos definido en función del tamaño de pantalla, su resolución o su orientación.

<link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 400px) and (max-width: 800px)" />

En este ejemplo se especifica la CSS a utilizar (layout de 2 columnas) con un viewport (la parte de pantalla donde se representa el documento) de una anchura entre 400px y 800px.

  • Configuración del meta viewport: mediante este meta indicamos que nuestra web es flexible para adaptarse a los diferentes anchos y resoluciones de pantalla, le indicamos al navegador que no aumente o reduzca la página, que use el zoom por defecto.

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

  • Imágenes y vídeos de tamaño flexible, que también se adapten al espacio disponible. Se puede conseguir de diferentes maneras, cada una con sus ventajas e inconvenientes.

 

Uso de las imágenes

  • La imagen se define como fondo de un elemento en las CSS (background-image) Se tienen diferentes versiones de la imagen a diferentes tamaños, en cada CSS se carga una de ellas. Para ello, hay que tener en cuenta la accesibilidad de las  imágenes y usar el texto alternativo según la imagen que corresponda.
  • La imagen se incluye en el código HTML con el elemento IMG pero se define su anchura y altura en las diferentes CSS. El gran inconveniente es que aunque muestras la imagen a diferente tamaño en realidad se carga siempre la de mayor peso.
  • Los logotipos e iconos se incluyen con SVG adaptándolos mediante media queries. Media Queries son recomendación del W3C desde junio de 2012.

 

Enfoque “Mobile First”

Desde 2009 Luke Wroblewski viene defendiendo un enfoque Mobile First, basado en el principio de Mejora Progresiva. Pensar primero en la versión móvil y después ir añadiendo complejidad mediante Media Queries, que serán ignoradas por los navegadores que no las soporten.
Este enfoque, dada las limitaciones de las pantallas pequeñas, te permite centrarte y priorizar las tareas claves para los usuarios

Los dispositivos móviles requieren que los equipos de desarrollo de software se centren únicamente en los contenidos y en las acciones más importantes de la aplicación. Simplemente no hay espacio en una pantalla de 320x480px para los elementos innecesarios. Hay que priorizar.
Así que, cuando un equipo diseña primero para el móvil, el resultado final es una experiencia centrada en las tareas clave que los usuarios quieren lograr, sin distracciones. Eso es bueno para la experiencia de usuario y bueno para los negocios.

Relación entre Responsive Design y accesibilidad

Parten de un enfoque o filosofía similar: defienden una web única, que los sitios sean flexibles, independientes del dispositivo y a disposición de todos los usuarios.

Hay ciertos requisitos de accesibilidad, a nivel de código, que tienen gran impacto en la accesibilidad de las páginas y que deben tenerse en cuenta desde el comienzo del desarrollo: el uso de estándares, la separación entre el contenido y la presentación, el uso de medidas relativas, evitar las tablas para maquetar o la definición de jerarquías de información estructuradas correctamente.

Por otra parte, también hemos comentado que la metodología Mobile First va más allá de la mera adaptación del sitio al tamaño de pantalla.

Esto ayuda a priorizar contenidos y funcionalidades eliminado lo innecesario: las páginas son más cortas y sencillas y la navegación más racional. Como resultado tendremos sitios más fáciles de navegar y entender, con menor carga cognitiva y visual.

Favorece a todos los usuarios, pero sin duda especialmente a los usuarios con diversidad funcional cognitiva, a los usuarios que utilizan lectores de pantalla o a los usuarios que tienen una diversidad funcional física y utilizan dispositivos de entrada alternativos.

¿Cómo puede favorecer a la accesibilidad de un sitio que este sea Responsive Design?

Tener en cuenta el Criterio 1.3.1 para:

  • El contenido y la presentación están separados, los estilos están definidos en las CSS y no se usan tablas para maquetar. Todo ello beneficia a las personas con diferentes discapacidades al permitir a los agentes de usuario adaptar el contenido de acuerdo a sus necesidades.
  • Tendencia a tener la información estructurada y jerarquizada más correctamente
  • Tendencia al uso de elementos semánticos para poder definir sus estilos en las CSS. Indicar explícitamente la función estructural o valor semántico del contenido permitirá que esta información se pueda determinar mediante software favoreciendo la accesibilidad.
  • Tendencia a un mayor respeto por los estándares web, lo cual maximizará la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas (pauta 4.1)
  • El diseño flexible y la definición de tamaños relativos permiten que el texto se pueda ampliar sin desbordamientos y hacer zoom con garantías (criterio de conformidad 1.4.4)
    • El tamaño flexible de las imágenes y vídeos permitirá que se adapten mejor al espacio disponible sin que se superpongan con otros contenidos.
    • Mejor experiencia para los usuarios con baja visión que suelen tener resoluciones de pantalla más bajas y suelen ampliar la pantalla.
  • Además, el diseño flexible y que no se usen tablas para maquetar ayuda a garantizar un orden de lectura correcto.
  • Se tiene muy presente que el sitio se visualizará en distintos dispositivos y por tanto:
    • Es más probable que tu sitio no sea operable solo con el ratón, la forma de interactuar ahora es muy variable y esto ayuda al diseño inclusivo.
    • Es más probable que mejores el contraste de color, que suele ser más pobre en los dispositivos móviles ya que bajamos el brillo para ahorrar batería, además de que son habituales los reflejos en la pantalla (criterios de conformidad 1.4.3 y 1.4.6)
    • Mayor uso de la técnica de Mejora Progresiva, que consiste en una implementación básica, que funciona a través de múltiples dispositivos y con una amplia gama de tecnologías de asistencia, añadiendo después más funcionalidades para los dispositivos que las soportan.
  • Focalizarse solo en lo necesario, priorizar y simplificar, dará como resultado sitios más fáciles de navegar y entender, con menor carga cognitiva y visual, mejorando la legibilidad y la accesibilidad.
    • Mayor uso de la técnica de Revelación Progresiva, que se basa en diferenciar el contenido primario del secundario. El contenido primario aparece inmediatamente en el flujo normal de la página y es muy visible. El objetivo es mostrar solo lo relevante para el usuario en este momento. Nos beneficia a todos, pero especialmente a los usuarios con discapacidad cognitiva o con déficit de atención, y bien hecho facilita la navegación a los usuarios de lectores de pantalla o a las personas con diversidad funcional motriz.

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.

 

Accesibilidad web: Cómo funciona un lector de pantalla

Cómo funciona un lector de pantalla

Para aquellos usuarios que usan software de lectura de pantalla como JAWS, NVDA o VoiceOver para acceder a la información en la Web, la experiencia del usuario puede ser bastante diferente de la de quienes pueden ver visualmente el contenido.Pero la gente prefiere pasar directamente a los detalles técnicos:

  • ¿Qué teclas presionar?
  • ¿Con qué lector de pantalla debería probar?
  • ¿Qué navegador debería usar?

 

lector_de_pantalla

Si bien todas estas consideraciones son importantes, lo mejor es dar un paso atrás y preguntarnos:

¿Cómo es la experiencia y cómo puedo simular esa experiencia si puedo ver la pantalla?
Para ello, lo vamos a explicar con un ejemplo muy claro para que se entienda bien.

Una puerta abierta

Imagina que acabas de abrir una puerta y estás mirando una gran sala de conferencias.
En el centro de la sala hay una gran mesa de conferencias con 10 sillas (5 en cada lado de la mesa).

Sentados en la mesa hay 2 hombres y 2 mujeres. Las 4 personas están sentadas en el mismo lado de la mesa (están frente a la puerta en la que estás parado). En el otro extremo de la sala (detrás de la gente sentada en la mesa) hay 3 ventanas grandes que dan a un patio con bancos, flores y árboles pequeños.

En el lado derecho de la sala hay un mostrador con una cafetera y un microondas encima.

El lado izquierdo de la sala tiene un gran televisor de pantalla plana montado en la pared.

Suponiendo que no está familiarizado con el diseño de esta sala, ¿qué es lo primero que haría al abrir la puerta? Escanear visualmente la habitación de izquierda a derecha. Algunos la pueden escanear de derecha a izquierda. Otros pueden primero mirar la mesa en el centro y luego escanear el perímetro de la habitación.

Sin embargo, no importa cómo lo hagas, la mayoría escanearía la habitación de alguna manera con la vista para tener una idea rápida del diseño y el contenido de la sala.
El escaneo sólo puede tomar unos segundos y la mayoría ni siquiera se darán cuenta de que lo hicieron.

A continuación, nos podemos centrar en ciertos elementos de interés, como las personas sentadas en la mesa o en la televisión de pantalla plana.

Una habitación oscura

Ahora, imaginemos la escena y esta vez cuando abramos la puerta, la habitación estará completamente a oscuras. No hay luz y no se puede ver absolutamente nada a primera vista. Sin embargo, nos han dado una pequeña linterna y cuando la encendemos, la luz nos permite ver un área pequeña a la vez.

¿Cómo observarías ahora el contenido de la habitación?

Algunos pueden mover la luz de izquierda a derecha comenzando por los pies y alejándose.
También se puede empezar desde la parte posterior de la habitación y mover la linterna, mientras que otros pueden apuntar la linterna al azar en varios lugares de la habitación sin un patrón en particular. A medida que mueva la luz por la habitación, tendrá que construir un mapa mental o una imagen de lo que hay en la habitación y cómo está distribuida.
La construcción de este mapa mental llevará mucho más tiempo que el escaneo visual de la sala cuando todas las luces estaban encendidas.
A medida que movemos la linterna, tendremos que recordar cada cosa que hemos visto y cómo se relacionan todas juntas.

Si olvidamos dónde se encuentra algo, llevará más tiempo localizarlo:

¿el mostrador con la cafetera estaba en el lado derecho de la habitación o estaba en la parte de atrás? ¿Cuántas personas había en la mesa, 4 o 5?

Responder estas preguntas cuando puede ver toda la habitación a la vez requerirá poco esfuerzo, pero contestarlas cuando solo puede ver un área pequeña a la vez llevará mucho más tiempo.

Un escenario análogo

Este segundo escenario es análogo a cómo un usuario de lector de pantalla revisa una página web o una aplicación de móvil.

Si bien los comandos del teclado o los gestos táctiles pueden mover el software de lectura de pantalla alrededor de la página, solo es posible leer una cosa a la vez.
No hay forma de que el usuario con discapacidad visual tenga una visión general rápida (de 1 a 3 segundos) de la página, similar a lo que podría hacer alguien que pueda ver la pantalla.

Afortunadamente, si se utilizan técnicas de navegación de página accesibles como encabezados o regiones, esto puede ayudar a los usuarios del lector de pantalla a enfocarse en ciertas áreas de la página.

Volviendo a nuestro escenario de habitación oscura desde arriba, imagina que ahora hay pequeños puntos rojos de luz en los elementos clave de la habitación: como la mesa, el mostrador, la televisión y cada persona sentada en la mesa. Hay que usar la linterna para mirar alrededor, pero los puntos rojos le dan una idea de dónde se encuentran las cosas más importantes.

Otro desafío importante que pueden enfrentar los usuarios de lectores de pantalla es cambiar dinámicamente el contenido de una página.

Volviendo a los ejemplos de habitaciones claras y oscuras, imagina que uno de los hombres se levanta y se mueve al otro lado de la mesa.

Ahora hay 2 mujeres y 1 hombre en un lado de la mesa y 1 hombre en el otro lado.
En el ejemplo de la habitación iluminada, lo más probable es que notemos el movimiento mientras sucede. Incluso si no estuviéramos mirando directamente al hombre que se movió, probablemente notaríamos el movimiento por el rabillo del ojo y nos percatamos de lo sucedido.

En cuanto al ejemplo de la habitación oscura, sería muy difícil saber que algo sucedió a menos que tengas el haz de la linterna directamente sobre el hombre que se movió en el momento preciso.
Es más probable que nunca sepa que se movió hasta algún momento después, cuando mueve la luz sobre la silla que dejó libre.

En efecto, esto es lo que sucede cuando el contenido de la página cambia pero no alerta el software de lectura de la pantalla. Es posible que el usuario nunca sepa que algo cambió en la página a menos que se muevan a través de la nueva información y se den cuenta de que ahora es diferente.

Esto que he explicado se resuelve asegurando que con el contenido dinámico se usen técnicas como alertas o regiones en vivo que hacen que el software de lectura de pantalla anuncie la información actualizada al usuario.

En nuestro escenario de la habitación oscura, el hombre puede anunciar verbalmente que se está moviendo de un lado de la mesa al otro. Incluso si la luz no estuviera en él, escucharías el anuncio y entenderías mejor lo que está cambiando.

En una ilustración final, tomemos las ventanas que dan al patio. En el escenario de la habitación iluminada, se podrá ver rápidamente que las ventanas dan a un patio con bancos, flores y árboles. Sin embargo, en el ejemplo de la habitación oscura, incluso si apuntabas la luz hacia las ventanas, no podrías ver lo que estaba afuera.
Esto ilustra elementos visuales como imágenes que no tienen una etiqueta de texto asociada.
Por ejemplo, el software de lectura de pantalla puede identificar que una imagen está presente en una página, pero la única forma en que puede comunicar información sobre la imagen es a través del texto alternativo que se le asigna.
Sin la etiqueta de texto, el usuario del lector de pantalla no tendría idea de qué se muestra en la imagen. En el ejemplo de la habitación oscura, se podría colocar un letrero junto a las ventanas con una descripción de lo que aparece afuera. Cuando usemos la linterna, entonces podremos leer el letrero.

 

Usabilidad web: “Miro y entiendo” – Daniel Mordecki.

En esta entrada voy a hablar del libro de Daniel Mordecki “Miro y entiendo”.

Miro y Entiendo es una guía práctica de usabilidad. Parte de los conceptos teóricos y definiciones básicas, desarrolla las metodologías y técnicas centrales de la disciplina y aporta consejos prácticos para su utilización, con ejemplos y casos de la vida real.

miro_y_entiendoEl libro comienza con una gran pregunta:

¿Qué es la usabilidad?

“La usabilidad es la disciplina que tiene como objetivo reducir al mínimo las dificultades de uso inherentes a una herramienta informática, analizando la forma en que los usuarios utilizan las aplicaciones y sitios Web con el objetivo de detectar los problemas que se les presentan y proponer alternativas para solucionarlos, de modo de que la interacción de dichos usuarios con las aplicaciones y sitios Web sea sencilla, agradable y productiva.”

El autor indica que todos los profesionales de la usabilidad tienen que ser persistentes en la tarea de hacer sitios web fáciles de usar, y de ahí deriva algunos atributos de la usabilidad:

  • Todas las interfaces se pueden usar, por muy difícil que sea.
  • Los problemas de usabilidad nunca son catastróficos.
  • No hay una solución puntual

Nos cuenta que la usabilidad se pone de manifiesto por tres fases: la computación, la percepción y la interacción.

El Diseño de Interacción se basa en 4 pilares fundamentales:

Elementos de la experiencia de usuario

El modelo divide los elementos de la interfaz en 5 grandes grupos, que describiremos partiendo de los cimientos conceptuales y subiendo hacia las capas más concretas, donde se efectúa realmente la interacción en la práctica.

elementos de interfaz de usuario

 

En la primera capa se determinarán los objetivos que se pretenden conseguir con tres preguntas claves:

  • ¿Por qué necesitamos el sitio?
  • ¿Para quién es el sitio?
  • ¿Qué debe suceder para que estemos satisfechos?

El alcance de un sitio Web está determinado por los objetivos que un visitante podrá cumplir en él. Tiene una relación directa con los objetivos, pero mien-tras los objetivos reflejan el punto de vista de la organización, el alcance expresa el punto de vista de los usuarios del sitio.

La arquitectura de la información es la base que permite definir cómo se va a navegar el sitio.hay una fuerte relación entre la organización de categorías y la organización de menús.

El autor también plantea cómo se originan las búsquedas de los usuarios en función de las necesidades que se le presentran en el momento.

Un modelo de interacción supone un conjunto pequeño de funcionalidades básicas o primitivas sobre las que se construyen las funcionalidades más complejas.

Es el conjunto de primitivas que se van a utilizar para construir la interfaz y aplicarlas consistentemente a lo largo de todo el sitio o la aplicación.

La interfaz es, desde el punto de vista estrictamente técnico, el conjunto de puntos de contacto del usuario con el sitio a través de la computadora e incluye todo lo que el sitio emite o muestra (salida o “output”) y todo lo que el sitio recibe (entrada o “input”). Es lo que se muestra en la pantalla, sumado al conjunto de acciones que el usuario puede realizar utilizando el mouse y el teclado. Es la parte sensible (visible, tocable, audible) de la interacción.

Miro, leo, pienso: Tres niveles de interacción

Para crear páginas y sitios Web fáciles de comprender y usar es importante pasar al otro lado de la pantalla e intentar entender cómo los visitantes de esos sitios interactúan con ellos.

La interacción de los visitantes con un sitio web se concibe en tres niveles: mirar, leer y pensar. La interacción se desarrolla simultáneamente en los tres niveles, se combinan e interactúan permanentemente entre sí y el visitante obtiene su experiencia como un todo, sin necesidad de tener consciencia alguna sobre qué nivel fue el que aportó qué dato. Cada uno de estos niveles requiere un nivel de atención particular, un esfuerzo consciente particular y retorna al visitante un nivel de resultados particular. 

En este capítulo, lo que más me ha gustado es la facilidad que tiene para transmitir las ideas y conceptos de una forma sencilla y comprensible para todos, fruto posiblemente de su experiencia docente. Por ello, el libro está lleno de consejos prácticos, ejemplos y casos de la vida real, de la aplicación de la teoría en la práctica cotidiana.

Métodos de evaluación de Usabilidad

El autor nos habla entre otras cosas de Jakob Nielsen y los principios heurísticos, así como de técnicas que se usan para trabajar la usabilidad como el test con usuarios, el card sorting, la ley de Fitts, y las normas ISO.

Redactar para la Web

el autor nos hace una introducción de cómo los navegantes leen en Internet y nos proporciona una serie de consejos y características para leer en la Web (mapas de calor, estilos de escritura, técnicas de escritura y cómo organizar el contenido).

Formularios: la Web interactiva

El autor nos da consejos sobre cómo hacer formularios usables, cómo se estructuran, cómo poner las etiquetas, los mensajes de error, etc…

Por otro lado, para finalizar a modo de resumen, resaltar que Daniel Mordecki a lo largo de todo el libro hace uso de la metáfora para facilitar la compresión de los conceptos.

“Quien se focaliza en la tarea de barrer podrá inventar escobas más livianas, con cerda intercambiable y mango irrompible, pero jamás podrá inventar la aspiradora: esto está reservado a los que se focalizan en el objetivo de tener una casa limpia.”

El mensaje que emerge al final del libro es el absurdo de muchos rediseños web, el absurdo de destinar grandes cantidades de dinero y tiempo a cambiar por cambiar, y no a cambiar para mejorar, que es la misión de los profesionales de la usabilidad.

 

Accesibilidad web: ¿Cómo hacer tablas accesibles?

Introducción

Las tablas son un elemento más que forman parte de los sitios web.

Para las personas videntes pueden resultar cómodas y fáciles de interpretar, pero para las personas que usen lectores de pantallas puede ser un problema de accesibilidad.

¿Para qué sirven las tablas?

Las tablas sirven para mostrar información tabular. La información tabular permite consultar y analizar datos. Las tablas no se deben utilizar para la presentación de los contenidos en la web y, por tanto, no se debe usar para la maquetación de nuestro sitio web.

¿Cómo hacemos nuestras tablas accesibles?

En las WCAG 2.0 en el Criterio de Conformidad 1.3.1 Información y relaciones, hay una serie de técnicas que tenemos que tener en cuenta cuando tengamos que insertar en nuestros contenidos una tabla de datos:

Es importante describir la tabla

Debemos proporcionar información adicional sobre la tabla. Así describiremos el propósito de la misma y también se recomienda informar de su estructura. Disponemos de dos métodos complementarios:

  • el atributo summary dentro de la etiqueta <table>
  • la etiqueta <caption> dentro de la tabla.

 

Así se informará a los usuarios de productos de apoyo, como los lectores de pantalla. Por ejemplo, si es un listado de notas, lo debemos indicar. Si en la misma página hay múltiples listados de notas, deberemos incluir en la descripción, la asignatura para permitir al que navega saltar todas las tablas que no le interesen.

Es como poner un título y una leyenda a la tabla para que los usuarios sepan cuál es la información de la tabla, algo que me recuerda al tema de los formularios con el uso de fieldset y la etiqueta <legend>

<table summary"Notas del curso 2015-2016">
<caption>Notas finales del curso de accesibilidad</caption>
</table>
  • En las tablas de maquetación no debemos incluir el atributo summary.
  • El elemento caption y el atributo summary se pueden usar conjuntamente y no deben tener el mismo contenido.

Las tablas deben ser uniformes

Las tablas deben ser uniformes, evitando dividir, combinar o vincular celdas, y por lo tanto tienen que tener el mismo número de filas por columna y el mismo número de columnas por fila.

Para mayor facilidad de de uso y compresión de las tablas se recomienda hacer tablas simples en vez de tablas complejas.

Uso de encabezados

Las tablas deben tener definidos correctamente los encabezados con la etiqueta <th>, ya sea horizontalmente como verticalmente.

Cuando la tabla tiene una disposición de agrupación de columnas o filas, hace mucho más complicado su consulta. Disponemos del atributo scope para poder indicar que el campo actual es la cabecera de la columna o fila que hay a continuación.

En esta primera tabla la cabecera superior se corresponde con la ordenación posterior de los datos. Por tanto en cada <th> incluiremos el atributo scope=”col”.

tabla1

<thead>
<tr>
<th scope="col">Alumno</th>
<th scope="col">Nota</th>
</tr>
</thead>
<tbody>...</tbody>

Ahora vamos a trabajar con una segunda tabla, en la que tenemos una doble agrupación. En la fila superior dispondremos de <th> con el atributo scope=”col” como anteriormente, pero en la primera celda de cada fila tenemos un nuevo th en vez de td e indicaremos el atributo scope=”row”.

Hemos utilizado la técnica H63.

<thead>
<tr>
<th scope="col">Alumno</th>
<th scope="col">Sesión 1</th>
...
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Marta</th>
<td>8</td>
<td>9</td>
<td>9</td> ...
</tr>
</tbody>

tabla2

Tablas de datos complejas

Para explicar cómo hacer hacer accesible una tabla compleja nada mejor que explicarlo con un ejemplo. Imaginemos que tenemos una tabla en la que se muestra un horario escolar.

Tabla compleja: horario escolar

Es una tabla de datos compleja porque para una celda de datos tiene asociados dos encabezados.  “Matemáticas” tiene dos encabezados: uno de columna “lunes” y uno de fila de las “8:00 a las 9:00.”

Mediante los atributos id y headers los lectores de pantalla serán capaces de informar a los usuarios sobre cuáles son los encabezados correspondientes a la celda actual, independientemente de la complejidad de la tabla:

  • id, se utiliza en las celdas de encabezado <th> para proporcionar un identificador que ha de ser único.
  • headers, se usa en las celdas de datos <td>, con el valor de los id correspondientes.

 

<table>
<caption>Horario de Primero A</caption>
</<tr>
<td>
</<th id=“l”>Lunes</th>
<th id=“m”>Martes</th>
<th id=“x”>Miércoles</th>
</tr>
<tr>
<th id=“h_1”>8:00-9:00h</th>
<td headers=“h_1 l”>Matemáticas</td>
<td headers=“h_1 m”>Inglés</td>
<td headers=“h_1 x”>Música</td>
</tr>
<tr>
<th id=“h_2”>9:00-10:00h</th>
<td headers=“h_2 l”>Lengua</td>
<td headers=“h_2 m”>E.Física</td>
<td headers=“h_2 x”>Lengua</td>
</tr>
</table>

Si examinamos el ejemplo anterior:

  • Para el encabezado lunes se ha definido un id con el valor l.
  • Para el encabezado martes se ha definido un id con el valor m.
  • Para el encabezado miércoles se ha definido un id con el valor x.
  • Para el encabezado de 8:00 a 9:00, un id con el valor h_1.
  • Para el encabezado de 9:00 a 10:00, id con el valor h_2.

Una vez determinados los identificadores a los encabezados vamos a relacionarlos con las celdas de datos, de la siguiente manera:

  • En la celda de datos matemáticas, el valor de headers será el id del encabezado de fila de la franja horaria de 8:00 a 9:00, h_1 y el del id del encabezado columna lunes, l.

De esta forma, se ha definido el valor de todos los headers para todas las celdas de datos de la tabla.

Resumen

  • Una tabla de datos simple es aquella en la que, una celda de datos sólo se relaciona con un encabezado o de fila o de columna, es suficiente el uso de th para identificarlos. Por lo tanto es suficiente con implementar la técnica anteriormente vista H51.
  • Una tabla de datos compleja, es aquella en la que una celda de datos se relaciona con más de un encabezado de fila y/o columna, y por tanto hemos de establecer la asociación entre las celdas de datos con sus celdas de encabezado, utilizando la técnica H63 o la técnica H43.

Accesibilidad web: Cómo hacer una navegación más accesible

En esta entrada voy a comentaros varios requisitos y técnicas de accesibilidad que nos ayudarán a tener una navegación más sencilla y más accesible.

Accesibilidad web: Cómo hacer una navegación más accesible

Cómo hacer una navegación accesible

Los requisitos a tener en cuenta son los siguientes:

  • Ofrecer varias vías de navegación para localizar el contenido
  • Facilitar la ubicación al usuario para que en ningún momento se sienta perdido
  • Mantener la consistencia lo largo del sitio

 

1. Múltiples vías  de navegación

Lo primero vamos a explicar es cómo establecer diferentes vías para mejorar la navegación de forma que los usuarios lo encuentren fácil y puedan satisfacer sus necesidades.

Para ello, tendremos en cuenta el criterio 2.4.5. “Múltiples vías: Se proporciona más de un camino para localizar una página web dentro de un conjunto de páginas web, excepto cuando la página es el resultado, o un paso intermedio, de un proceso. (Nivel AA)

Hay quienes prefieren usar el buscador a recorrer un menú de navegación largo. Otros prefieren usar tablas de contenidos o un mapa del sitios para navegar por el sitio

Por eso, las WCAG 2.0 establece que tenemos que aplicar dos o más técnicas para mejorar la navegación.

  • Mapa del sitio
  • Función de búsqueda
  • Enlaces a páginas relacionadas
  • Tabla de contenidos

 

Mapa del sitio

Es muy importante tener en cuenta la creación de un mapa web, que ayude a facilitar la comprensión del sitio web. Para ello, tenemos la técnica G63: Proporcionar un mapa del sitio y que debe cumplir una serie de requisitos:

  • Debe estar enlazado a todas las páginas, o desde cada una de las páginas que se listan en el mapa web.
  • Desde el mapa web se tiene que poder acceder a todas las páginas del sitio, directa o indirectamente. Por lo tanto, sus elementos deben ser enlaces.
  • La presentación y la estructura deben reflejar la orgnización del sitio, con elementos HTML, como son los encabezados y las listas.
  • El orden de lectura y de tabulación debe ser el correcto.
  • Se debe actualizar cada vez que se actualiza el sitio.

Función de búsqueda

Otra técnica a tener en cuenta es proporcionar una función de búsqueda en el sittio web, patra que los usuarios puedan acceder a buscar el contenido sin necesidad de entender el sitio o navegar por él. Es muy útil en sitios de gran tamaño.

La función de búsqueda se realizará mediando un campo de búsqueda que esté presente en las páginas del sitio. La técnica que habla de esto es la G161: Proporcionar una función de búsqueda para ayudar a los usuarios a encontrar contenido.

 

Enlaces a páginas relacionadas

Otra técnica que se puede emplear es enlaces a páginas relacionadas. De esta manera los usuarios ppueden encontrar información adicional. Técnica G125: Proporcionar enlaces para navegar a páginas relacionadas.

 

Tabla de contenidos

Otra técnica es utilizar una tabla de contenidos, que consiste en un índice con las secciones y subsecciones de una página, y que proporciona un acceso directo a una sección específica. Para más información sobre ello, se puede consultar la técnica G64: Proporcionar una tabla de contenidos.

Otras técnicas para sitios pequeños

Si el sitio es pequeño se pueden aplicar otras técnicas:

  • el menú de navegación incluye el acceso a todas las páginas del sitio.
  • todas las páginas están enlazadas desde la página de inicio.

Técnicas relacionadas:

 

Ubicación del usuario

Un requisito muy importante que hará que el sitio web sea más accesible es facilitarle la ubicación a los usuarios, proporcionarle inforción sobre dónde se encuentran.

Para ello, esta el criterio 2.4.8 Ubicación: se proporciona información acerca de la ubicación del usuario dentro de un conjunto de páginas web.

Hay varias técnicas para conseguir esto:

Migas de pan.

Las migas de pan van a ayudar a:

  • Comprender cómo se estructura el contenido de un sitio web.
  • Navegar por las páginas visitadas
  • Identificar la ubicación actual de una página dentro del sitio web.

¿Qué requisitos deben cumplir las migas de pan?

  • Deben estar siempre situadas en el mismo lugar en todas las páginas.
  • Maquetarlas mediante listas, aunque visualmente se presenten en línea.
  • Usar separadores visuales entre las mismas.
  • Deben ser enlaces.
  • Deben indicar el camino usado para llegar a la página actual o bien indicar su situación en la jerarquía u organización del sitio.

 

Indicar la situación actual en la navegación

Otra técnica para facilitar la ubicación del usuario es indicar la situación actual en menús, barras de navegación, pestañas o pasos en un proceso. Todo cambio que se produzca se debe comunicar a los usuarios.

Por eso, el menú o paso en el que nos encontramos no solo se debe indicar visualmente, sino también estructural y semánticamente o mediante texto si fuera necesario como establece el criterio 1.3.1 Información y relaciones. Se puede obtener más información sobre este requisito en la técnica G128: Indica la ubicación actual dentro de las barras de navegación.

 

Elemento <link>

Otra técnica es incluir navegación semántica a través del elemento link

<head><title>Capítulo 2</title>
<link rel="index" href="index.html“ title="Índice" />

<link rel="start" href=“intro.html“ title="Introducción" />

<link rel="next" href=“cap3.html“ title="Capítulo 3" />

En este ejemplo estamos indicando, dentro de una colección de páginas: el índice, la primera página de la colección y la siguiente.

La ventaja de usar <link> para establecer las relaciones es que este elemento se puede interpretar mediante software. Se puede ampliar información en la técnica H59: Uso del elemento de enlace y las herramientas de navegación.

 

Consistencia

Otro aspecto que hace más accesible la navegación es la consistencia, tanto en la presentación y maquetación de los mecanismos de navegación, como en la identificación de los componentes que tienen la misma funcionalidad dentro de un conjunto de páginas

  • 3.2.3 – Navegación coherente
  • 3.2.4 – Identificación coherente

Navegación coherente

Si los mecanismos de navegación que se repiten en diferentes páginas de un conjunto (como el buscador, el menú de navegación, las migas de pan, etc), se presentan en el mismo orden en las diferentes páginas del conjunto, los usuarios pueden predecir dónde estarán en cada página y localizarlos con más facilidad. Para más información se puede consultar la técnica G61.

Identificación coherente

Tan importante es la navegación coherente, como la identificación coherente, porque si en un sitio web se usan diferentes etiquetas para una misma función se dificulta considerablemente la comprensión y la interacción con el sitio, y en definitiva su uso.

Identificación coherente quiere decir, en los enlaces, que aquellos que tienen un mismo destino tienen el mismo texto de enlace.

Por ejemplo, si el destino del enlace es la página de inicio del sitio, el texto del enlace no puede ser unas veces “Ir a la home”, en otras “Ir a la página de inicio” y en otras “Ir a la página principal”.

El texto del enlace además deberá ser consistente con el título de la página, el nombre con el que se identifica a la misma en las migas de pan o en el mapa del sitio.
En el caso de destinos similares, los textos de enlace deberán ser consistentes.

Por ejemplo, en un portal de noticias, el texto del enlace para ampliar información sobre cada noticia, no puede ser en un caso “Más información”, en otro “Leer más” y en otro “Más info”.

La identificación coherente también se aplica al texto alternativo de los elementos no textuales.
Por ejemplo, si se usa el mismo icono en diferentes páginas, se entiende que con la misma función, debe tener el mismo texto alternativo, si tenemos un icono para descargar un fichero, su texto alternativo no puede ser en unos casos “descargar”, en otros “guardar” y en otros “bajar”.

Y la identificación coherente se aplica también a las etiquetas de los campos de formulario: los mismos controles de formulario deben estar etiquetados igual.

Por ejemplo, no podemos etiquetar el campo contraseña en unos casos como “password”, en otros como “contraseña” y otros como “clave”.

 

Accesibilidad web: Requisitos de Accesibilidad de los Medios Audiovisuales

El objetivo de este artículo es explicar el documento del W3C: Requisitos de usuario para la Accesibilidad de los medios audiovisuales.

Introducción

Este documento explica los diferentes tipos de contenidos alternativos que se pueden ofrecer, a quiénes benefician y los requisitos que deben cumplir; recoge asimismo los que debería cumplir el sistema, abarcando el proceso de producción o los agentes de usuario (y que por tanto tiene que ver con los navegadores, los productos de apoyo o los reproductores multimedia).

Requisitos de usuario para la accesibilidad de los medios audiovisuales

Estructura del documento

Se divide en cuatro grandes apartados:

  • Resumen de los requisitos de accesibilidad de los medios audiovisuales por tipo de diversidad funcional.

En este apartado se proporciona una introducción a las necesidades de los usuarios con diversidad funcional, (ceguera, baja visión, daltonismo, diversidad funcional auditiva, sordoceguera, diversidad funcional motriz y diversidad funcional intelectual) en relación con el contenido audiovisual.

  • Tecnologías para proporcionar contenido alternativo.

En esta sección se explican los diferentes tipos de contenidos alternativos que se pueden proporcionar para ayudar a los usuarios con una discapacidad sensorial a acceder al contenido audiovisual. Por cada uno de ellos se incluye un listado de los requisitos que deben satisfacer en el contexto de un desarrollo HTML5 (pero no se entra en aspectos técnicos o de desarrollo concretos).

  • Requisitos del sistema

En este apartado se explica cómo las tecnologías para proporcionar contenido alternativo al vídeo y audio encajan en el panorama más amplio de la accesibilidad, tanto técnicamente, desde de un punto de vista del agente de usuario (y que por tanto tiene que ver con los navegadores, los productos de apoyo o los reproductores multimedia) como desde un punto de vista del proceso de producción. Por ello, los requisitos listados en este apartado están en su mayoría más relacionados con las UAAG que con las WCAG.

  • Checklist “Requisitos de Usuario para la Accesibilidad de los Medios Audiovisuales”

 

Resumen de los requisitos de accesibilidad de los medios audiovisuales por tipo de diversidad funcional

En este apartado se proporciona una introducción a las necesidades de los usuarios con discapacidad para poder percibir, interactuar y comprender los contenidos audiovisuales.

Ceguera

Las personas ciegas no pueden acceder a la información visual presente en los vídeos, los controles de los reproductores o los indicadores de estado. Por ello necesitan que la información se presente de forma alternativa mediante texto o audio.

Hay que tener en cuenta que las personas ciegas utilizan un lector de pantalla y/o una línea braille, por tanto necesitan que los medios audiovisuales sean operables cuando se utilizan estos productos de apoyo.

Baja visión

Las personas con baja visión, en función de su capacidad visual, puede ser que tengan problemas específicos, como dificultad para discriminar la información de primer plano de la información de fondo, para discriminar colores, o les pueden deslumbrar los contenidos muy brillantes.

Por otra parte, quizás no puedan reaccionar rápidamente a la información que se presenta en pantalla durante un tiempo limitado. Pueden tener un ángulo de visión estrecho que no les permita detectar la información clave presentada temporalmente si no están mirando en esa dirección, o si el texto se está moviendo o desplazando.

Estas personas utilizarán probablemente un magnificador de pantalla, así que solo estarán viendo una parte de la pantalla, por ello se debe poder gestionar el contenido audiovisual a través de su producto de apoyo.

Las personas con baja visión pueden tener dificultad para leer el texto demasiado pequeño, con poco contraste, con un determinado tipo de fuente o con efectos. Por otra parte, si el texto es una imagen, se verá pixelada al ampliarse.

Pueden estar utilizando un producto de apoyo que modifique los colores, por ejemplo que los invierta, de modo que los contenidos audiovisuales deben ser visibles también en este contexto.

Por último, los usuarios con baja visión a menudo se benefician también de los textos e instrucciones que algunas veces los autores ocultan visualmente (por ejemplo colocándolos fuera de pantalla) dirigidos a los usuarios de lector de pantalla o línea braille.

Percepción del color

Las personas con problemas en la percepción del color (daltonismo) pueden tener dificultades para discriminar entre diferentes colores, o pueden perderse información clave cuando la información se proporciona solo mediante el color, por ejemplo en los controles del audio/vídeo o en las superposiciones de texto

Sordera

Las personas sordas no podrán escuchar el audio, por tanto será necesaria una alternativa, normalmente a través de subtítulos sincronizados y/o traducción en lengua de signos.

Problemas de audición

Las personas con problemas de audición podrían no ser capaces de discriminar cierto tipo de sonidos, y por tanto pueden perderse información presente en el audio si tiene frecuencias que no pueden oír, o bien a causa del ruido de fondo o la distorsión.

También pueden perderse información si el audio es demasiado bajo o de mala calidad, o si las personas hablan demasiado rápido y no se puede reproducir el audio más lento.

La información que se presenta mediante audio multicanal puede no ser percibida por las personas sordas de un oído.

Por último, las personas con un implante coclear pueden no tener problemas con el volumen del audio, pero la comprensión puede ser difícil si la experiencia multimedia es abrumadora.

Sordoceguera

Según su nivel de ceguera y sordera, las personas sordociegas podrían necesitar: subtítulos y la posibilidad de ampliarlos; cambiar a colores de alto contraste (u otra combinación de colores); subtítulos y/o descripción del vídeo expuestos por su producto de apoyo; o una transcripción que cada usuario pueda leer a su ritmo, es decir, que no esté basada en el tiempo.

Diversidad funcional motriz

Algunas personas con diversidad funcional motriz como aquellas con un control muscular limitado (temblores, falta de coordinación, parálisis), con dolor que les impida el movimiento o con la falta de alguna extremidad, no podrán utilizar el teclado o el ratón para interactuar con el contenido y los controles.

El reproductor de los contenidos audiovisuales tiene que poder ser operable solo con el teclado (sin ratón), lo cual incluye el acceso a todos los controles y métodos de selección del contenido alternativo.

Diversidad funcional cognitiva

Autismo, dislexia, discalculia, trastorno de déficit de atención, problemas de memoria, … la extensa gama de condiciones que abarca hace que los requisitos de accesibilidad también varíen ampliamente.

Algunas personas podrán procesar la información auditiva mejor que la lectura del texto, por tanto, la información que se presenta como texto embebido en el vídeo también deberá estar disponible como descripciones de audio.

Otras personas pueden necesitar reducir las distracciones o flashes en las presentaciones de vídeo.

En general, la experiencia multimedia para las personas con trastornos del espectro autista debe ser personalizable y estar bien diseñada para no resultar abrumadora.

Se debe tener cuidado en presentar la experiencia multimedia focalizada en el propósito del contenido y proporcionar alternativas al contenido de una manera clara y concisa.

Tecnologías para proporcionar contenido alternativo

En esta sección se explican los diferentes tipos de contenidos alternativos que se pueden proporcionar para ayudar a los usuarios con una discapacidad sensorial a acceder al contenido audiovisual. Por cada uno de ellos se incluye un listado de los requisitos que deben satisfacer en el contexto de un desarrollo HTML5 (pero no se entra en aspectos técnicos o de desarrollo concretos).

Audiodescripción

Una audiodescripción contiene una narración descriptiva de los elementos visuales clave para hacerlos accesibles a las personas ciegas o con una discapacidad visual. Se incluyen acciones, vestuario, gestos, cambios de escena o cualquier otra información visual relevante que alguien que no puede ver la pantalla podría perderse.

Las audiodescripciones son grabaciones de audio que se insertan en las pausas naturales del mismo.

Pueden ser de dos tipos:

  • Abiertas, se fusionan con la pista de audio y no pueden ser desactivadas por el usuario.
  • Cerradas, el usuario puede activarlas o desactivarlas.

Las audiodescripciones no solo benefician a las personas ciegas o con problemas de visión. Por ejemplo, pueden beneficiar a los estudiantes que lidian con materiales o conceptos difíciles, puesto que la audiodescripción puede dar información complementaria acerca de lo que se está viendo en pantalla (la estructura de una ecuación, la complejidad de una pintura, etc.).

Audiodescripciones en formato texto

Cuando la audiodescripción se proporciona en formato texto, en vez de en formato voz grabada, se presentan unos requisitos específicos.

Las audiodescripciones en formato texto (TVDs) se entregan al cliente como texto y son renderizadas localmente por los productos de apoyo (lector de pantalla o línea braille). Los ficheros de texto se proporcionan como archivos de texto que contienen los tiempos de comienzo de cada descripción. Las ventajas son que el usuario de lector de pantalla puede tener un control total sobre la voz, la velocidad del habla u otras opciones.

Audiodescripciones ampliadas

Las audiodescripciones se suelen introducir en las pausas naturales del diálogo o la narración. Pero en algunos casos no hay tiempo suficiente. Las audiodescripciones ampliadas (EVD) trabajan pausando el vídeo y el audio en momentos clave para reproducir la audiodescripción extensa, y una vez que termina reanudan la reproducción.

Las audiodescripciones ampliadas benefician por ejemplo a las personas con el síndrome de Asperger u otras personas con trastornos del espectro autista, ya que en ellas se puede explicar conexiones entre la causa y el efecto, se puede señalar lo que es más importante, o explicar los estados de ánimo.

Clean audio

Un desarrollo relativamente reciente en la accesibilidad en televisión es el concepto de “audio limpio”, que aprovecha el audio multicanal.

Beneficia especialmente a las personas con problemas de audición. Consiste en aislar el canal de audio que contiene los diálogos o la información relevante que así puede amplificarse (o modificarse de otro modo), mientras que los canales que tienen la música o los sonidos ambientales pueden atenuarse. Esto permite usar filtros y adaptar el audio a las necesidades del usuario, ya que la pérdida de audición es típicamente dependiente de la frecuencia.

La mayoría de los usuarios están familiarizados con el avance rápido y el rebobinado en el contenido audiovisual. Sin embargo, esta manera de explorar el contenido, basada en el tiempo, es bastante ineficaz y perjudica especialmente a las personas con discapacidad.

Afortunadamente, la mayoría de los contenidos tienen una estructura (los audiolibros tienen capítulos, las películas actos y escenas, los programas de televisión secciones, etc.). Un marcado adecuado puede exponer su estructura en los controles para avanzar y rebobinar.

Sin embargo, una navegación efectiva por la jerarquía de su estructura requeriría un control adicional que no suele estar disponible en los reproductores multimedia actuales. Este mecanismo (que llaman “granularity-level control”) permitiría al usuario ajustar el nivel de granularidad aplicado a los controles “siguiente” y “anterior”. La personalización sería necesaria porque puede ser muy engorroso acceder a todos los nodos de la jerarquía o insatisfactorio acceder solo a los del nivel superior de la jerarquía.

Se ponen varios ejemplos. Uno de ellos es el de un telediario. Las grandes secciones serían noticias, tiempo o deportes. El segundo nivel serían las noticias individuales de cada sección. Si dispusieras de este “granularity-level control” podrías ajustar el nivel de granularidad de los controles “siguiente” y “anterior” para saltar de sección en sección, o de noticia en noticia.

A continuación se habla de la navegación a través de contenidos auxiliares, como anuncios, resúmenes de noticias, notas al pie de un libro, etc. que interrumpen el “programa” primario, y que el usuario puede querer saltarlos (o tal vez ir directamente a ellos).

Subtítulos

Para las personas sordas o con problemas de audición, los subtítulos son la principal alternativa al audio.

A diferencia de los subtítulos para personas cuyo idioma no es el del contenido, el subtitulado para sordos (captioning) no solo debe transcribir el diálogo o la narración, sino también la información importante como efectos de sonido, risas, etc., y debe estar en el mismo idioma que la pista de audio principal.

Los subtítulos pueden ser cerrados, es decir, pueden ser activados o desactivados por el usuario; o abiertos, que están siempre visibles, fusionados con la pista de vídeo y no pueden desactivarse.

Aunque lo ideal es que sea una transcripción literal del audio, a veces se editan por adecuarlos, por ejemplo, a la velocidad de lectura. Si se editan debería indicarse y debería proporcionarse una versión textual completa.

No es estrictamente necesario que el texto del subtítulo coincida con el movimiento de la boca, a veces pueden adelantarse o extender un poco.

Cuando hablan varias personas, en el texto de los subtítulos se debe distinguir a los oradores, por ejemplo indicando el nombre de la persona (“Ana:”) antes del texto que representa lo que dice en el audio.

Los subtítulos también son muy útiles para que los clientes de bares, gimnasios, etc. sigan el programa en la televisión (yo añadiría que también para las personas que por el contexto no pueden activar o escuchar el audio y/o no tienen auriculares) o para las personas que no dominan el idioma. Por otra parte, los subtítulos tienen capacidad de búsqueda, lo que permite localizar un vídeo o un punto exacto del mismo.

Subtítulos enriquecidos

Pueden tenerse varias pistas de subtítulos, por ejemplo uno adecuado para cada rango de edad.

Los subtítulos también pueden enriquecerse con más información, por ejemplo con un glosario (podría ser un enlace que pausa el contenido principal y permite acceso al material explicativo). Proporcionar información relevante adicional permite mejorar la comprensión de los elementos esenciales tanto para los usuarios de productos de apoyo como para las personas con dificultad en la lectura.

Interpretación en lengua de signos

La lengua de signos no es universal, por tanto debe adecuarse a la audiencia. Es importante que la cara, los brazos, manos y gestos corporales se vean claramente, con suficiente resolución para que sean legibles. Por otra parte es preferible una persona que un avatar animado, al menos por el momento.

Igual que los subtítulos, pueden ser abiertos (siempre visibles) o cerrados (se puede activar/desactivar su visualización).

No todos los dispositivos podrán manejar múltiples flujos de vídeo, así que este debería ser un requisito del navegador. En las situaciones en las que no se soporte, por ejemplo en dispositivos móviles, los autores podrían ofrecer dos versiones, una de ellas con la interpretación en lengua de signos insertada en el vídeo. La selección de diferentes pistas de lengua de signos se haría de la misma manera que se manejan diferentes subtítulos.

Transcripciones

Hay personas a las que no les es posible o les resulta difícil seguir los subtítulos sincronizados, como las personas sordociegas, las personas con problemas cognitivos o con dificultad en la lectura. Incluso las personas que sí pueden seguirlos podrían perderse información al dividir la atención entre lo que ocurre en pantalla y el texto de los subtítulos.

Por tanto, la transcripción completa ayuda a las personas con diferentes necesidades y no es un sustituto de los subtítulos. La transcripción se puede presentar simultáneamente con el contenido audiovisual, pero debería estar también disponible independientemente.

El contenido que se incluye en la transcripción es tanto el de los subtítulos como el de la audiodescripción (y las opciones interactivas si tiene), y es por tanto una representación completa del material.

Requisitos del sistema

En este apartado se explica cómo las tecnologías para proporcionar contenido alternativo al vídeo y audio encajan en el panorama más amplio de la accesibilidad, tanto técnicamente desde de un punto de vista del agente de usuario (y que por tanto tiene que ver con los navegadores, los productos de apoyo o los reproductores multimedia) como desde un punto de vista del proceso de producción.

Acceso a los controles y menús interactivos

Todas las posibilidades de interacción deben estar disponibles para todos los usuarios. Por tanto deben ser independientes del dispositivo de entrada (teclado, ratón, habla, etc.) y ser expuestas a los productos de apoyo. Las posibilidades de interacción deben ser lo suficientemente ricas para un control detallado de la reproducción del contenido.

Control del nivel de granularidad para la navegación por la estructura del contenido

Los usuarios deben ser capaces de establecer el rango o alcance de los controles “siguiente” y “anterior” en tiempo real, ajustando en qué nivel de la estructura del contenido quieren navegar con dichos controles.

Modificación de la escala de tiempo

Por ejemplo en muchos reproductores de audiolibros, desde hace años, se puede acelerar o ralentizar la lectura del contenido sin alterar el tono del audio.

Requisitos de la producción y los resultados

En este apartado se habla del desafío que supone la falta de un sistema universal de acceso, la convivencia de sistemas incompatibles, o la falta de formatos comunes que permita el intercambio de datos. Trata también de los recursos que se aportan por separado, pues los contenidos alternativos son a menudo creados por entidades diferentes a las que crean el contenido audiovisual, así como de las posibilidades de edición.

Descubrimiento y activación/desactivación del contenido alternativo por parte del usuario

Se han descrito diferentes tipos de contenido alternativos que permitirán que las personas puedan percibir, interactuar y comprender el contenido audiovisual. Estas alternativas pueden ser parte del contenido, activarse o desactivarse o estar vinculadas al contenido original.

El usuario se enfrenta al reto de poder descubrir y reconocer que se proporcionan estos contenidos alternativos.

Requisitos relativos a hacer que las propiedades estén disponibles para la API de accesibilidad

Los usuarios necesitan acceder a los contenidos, controlar su reproducción y activar las opciones de accesibilidad. Para que los agentes de usuario apoyen la API de accesibilidad implementada para una plataforma, los controles del reproductor tienen que exponer la información, en caso contrario hay que proporcionar la información en formatos alternativos.

Por ello la existencia de pistas de contenido alternativo debe ser expuesta al agente de usuario y la API de accesibilidad debe tener acceso a las mismas.

Requisitos sobre el uso del visor de vídeo

El visor de vídeo juega un papel importante en lo que se refiere a los contenidos alternativos. Ofrece una caja delimitada para muchas de las alternativas que se ofrecen visualmente (subtítulos, lengua de signos, etc.), aunque no todas se basan en una ventana (como las transcripciones completas).

Hay que recordar que un tercio del vídeo será ocupado por el texto de los subtítulos. Los usuarios esperan encontrarlos en un lugar estándar y poder hacer movimientos oculares rápidos entre los mismos y el contenido del vídeo. Por tanto no se debe ocupar este espacio con otras cosas y se debe evitar la superposición con el contenido importante del vídeo.

Los requisitos de este apartado también hacen referencia a la relación entre el tamaño de la ventana de visualización, la posición de contenido audiovisual y la del contenido alternativo.

Por último se tratan las opciones de personalización por parte del usuario: del brillo y el contraste; de las características del texto (por ejemplo de los subtítulos) tamaño, color, etc.; o el ajuste del tamaño de visualización pero preservando la relación y evitando recortes.

Requisitos sobre las pantallas secundarias y otros dispositivos

El término “second screen” hace referencia a que cuando vemos o consumimos contenido (por ejemplo en la televisión), la información contextual adicional o el propio contenido se puede visualizar en un dispositivo complementario (como una tablet o un móvil). Se llama “second screen” a pesar de que puede haber más de dos y a pesar de que no todos los dispositivos secundarios son pantallas de vídeo.

Hay que asumir que muchos usuarios tendrán un dispositivo de visualización adicional y/o un dispositivo de audio adicional (como unos auriculares) conectado al dispositivo de visualización principal. Por tanto debe ser posible configurar ciertos tipos de contenidos para su presentación en dispositivos específicos.

Checklist de los Requisitos de Usuario para la Accesibilidad de los Medios Audiovisuales

Este es un apartado muy útil porque recoge la checklist con todos los requisitos listados en el documento.

La checklist está en formato tabla, con una fila para cada requisito y diversas columnas para indicar:

  • su categorización respecto a la tecnología (si ya está en la especificación de HTML 5, si es un nuevo requisito de la especificación, etc.)
  • su relación con criterios de conformidad de las WCAG y las UAAG. Cuando se incluye el signo “+” se está indicando que el requisito de este documento se define con más precisión que en las WCAG o en las UAAG. De hecho, el grupo de trabajo de las UAAG (se está trabajando en las UAAG 2.0 actualmente) ha indicado que revisarán algunos de sus requisitos en base a esta checklist.
  • su prioridad (Must, Should o May)

 

Actualmente, está en borrador una versión actualizada de este documento.