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: Mensajes de error en formularios

Mensajes de error en formularios

En esta entrada os voy a hablar de cual es la mejor manera de colocar los mensajes de error en los formularios.

¿Dónde colocamos los mensajes de error en los formularios?

Es importante conocer donde podemos colocar los errores, ya que si no se colocan donde los usuarios esperan verlos, les será imposible completar el formulario.

Cuando los usuarios cometen errores, deben comprender cuáles son esos errores para poder corregirlos y volver a enviar el formulario. Quieren completar el formulario, pero si hacerlo requiere mucho esfuerzo, se irán del sitio web.

¿En la parte superior o alineados con los campos erróneos?

Las dos ubicaciones más comunes para los mensajes de error se encuentran en la parte superior del formulario y en línea con los campos erróneos.

¿Qué ubicación es más intuitiva para los usuarios?

Mostrar todos los mensajes de error en la parte de arriba del formulario produce mucha carga cognitiva en la memoria del usuario. Esto obliga a los usuarios a recordar cada mensaje de error para cada campo erróneo.

Para reducir la carga cognitiva de los usuarios, hay que mostrar los mensajes de error alineados con los campos erróneos. Así pueden corregir los errores de forma más rápida y sencilla.

Ubicación de los mensajes de error de preferencia del usuario

Colocar los mensajes de error en línea con los campos erróneos es mucho más cómodo para los usuarios. Prefieren que los mensajes de error se ubiquen a la derecha del campo.

Los mensajes de error colocados a la izquierda del campo no son buenos para los usuarios. Los mensajes de error colocados sobre el campo causan mayor carga cognitiva seguida de mensajes de error debajo del campo, por lo tanto dificulta la usabilidad de los campos de formulario.

Por qué a la derecha del campo es mejor

Es importante entender por qué es preferible y esperado colocar los mensajes de error a la derecha del campo. De esta forma, los diseñadores pueden educar mejor a los demás sobre cómo se comportan los usuarios cuando toman decisiones de diseño.

El sistema de lectura occidental va de izquierda a derecha. Cuando los usuarios mueven los ojos de la entrada al mensaje de error, se produce una progresión natural que requiere poco esfuerzo mental y visual. Al mover los ojos desde el mensaje de error a la entrada para la corrección también sigue el flujo natural para releer el texto.

mensaje de error a la derecha del campo

Por qué a la izquierda del campo es peor

Colocar mensajes de error a la izquierda del campo va en contra del sistema de lectura occidental. Los usuarios mueven los ojos en la dirección opuesta al flujo de lectura natural cuando aparece el mensaje de error. En lugar de producirse una progresión natural, es antinatural y no es óptima, cuando los usuarios lo que desean es completar el formulario.

Tampoco es intuitivo porque los usuarios esperan elementos de mayor prioridad en el lado izquierdo. Colocar el mensaje de error a la izquierda lo hace más importante que el campo. Pero el campo es más importante porque los usuarios necesitan enfocarse en él para rellenarlo.

Mensaje de error a la izquierda del campo

Por qué sobre el campo aumenta la carga cognitiva

Los usuarios experimentan una mayor carga cognitiva con mensajes de error sobre el campo (es decir, formularios con etiquetas alineadas en la parte superior). Esto es causado por una combinación del mensaje de error y el texto de la etiqueta del campo que confunde a los usuarios.

La proximidad de los dos textos crea un ruido visual que distrae a los usuarios cuando intentan leer el mensaje de error o la etiqueta. Ver ambos textos en su campo de visión hace que sea difícil concentrarse solo en uno de ellos y puede confundirlos.

Mensaje de error encima del campo

Ubicación de los mensajes de error para formularios móviles

Las pantallas móviles carecen del espacio horizontal para mostrar un mensaje de error y un campo, uno al lado del otro. Esto significa que los mensajes de error a la derecha del campo no son la mejor ubicación en los formularios móviles. En su lugar, hay que colocar los mensajes de error debajo del campo.

Mensaje de error abajo del campo

Aunque no se corresponde con el flujo de lectura natural de izquierda a derecha del usuario, sí se corresponde con el flujo de lectura natural de arriba hacia abajo.

Cuando los usuarios leen texto, mueven los ojos de izquierda a derecha bajando una página. Los mensajes de error debajo del campo son menos incómodos que en el campo, porque siguen la progresión de lectura vertical.
Colocar el mensaje de error demasiado cerca de la etiqueta del campo después puede aumentar la carga cognitiva cuando los usuarios leen el texto.

A la derecha o debajo de campo: ¿Cuál es el mejor?

Ambos, a la derecha del campo y debajo del campo son ubicaciones óptimas para los mensajes de error.

¿Pero qué ubicación se debería usar? 

Si deseamos que la implementación tarde menos tiempo en hacerse para ordenadores y dispositivos móviles, la mejor opción es poner los mensajes de error debajo del campo. Implementarlos para ordenadores también los hará utilizables para dispositivos móviles. Si queremos implementar mensajes de error para ambos dispositivos, la mejor opción es colocarlos a la derecha del campo en el escritorio y debajo del campo para dispositivos móviles.

Colocación de mensajes de error intuitivos

Los mensajes de error deben corresponderse con el flujo de lectura del usuario, por lo que los errores requieren menos esfuerzo cognitivo para corregirlos. Cuando los usuarios trabajan y piensan menos, pueden completar el formulario más rápido. Cuanto más rápido ayudemos a los usuarios a superarlo, antes podrán pasar a lo que quieran hacer.

Si quieres saber más sobre los formularios puedes leer la entrada sobre los marcadores de posición.

 

Usabilidad web: Problemas con el editor Gutenberg

Introducción

Una de las partes más importantes de WordPress, aparte de todas las personas que trabajamos en ello, es el editor, ya que es donde escribes tus contenidos y puedes aportar y ayudar ofreciendo todo el conocimiento que tienes, con la idea de hacer un WordPress mejor para todos.

Pero desde que está la posibilidad de utilizar este editor, veo que aún le queda mucho por mejorar y, que usarlo así de primeras, el cambio impresiona bastante. Pero bueno, aún así intentaré mostrar los principales problemas que nos podemos encontrar.

Principalmente, si pensamos en personas con dificultades físicas y/o con dificultades visuales que usen el editor, el esquema mental que tenido en su mente durante tanto tiempo, en un segundo se desbarata. Con lo cual tiene que volver a empezar y adaptarse a un cambio tan brusco cuesta, como a todos, pero a ellos más aún, y claro, teniendo tantas cosas para mejorar, la frustración es aún mayor.

Problemas de usabilidad con Gutenberg

La primera impresión al usar Gutenberg hace ya unos cuantos meses, y reconozco lo que he usado poco, era que al existir la posibilidad de mover bloques, cualquier persona que use el teclado y le dé por error se puede llegar a confundir, sobre todo si es una persona con visión nula. Y para una persona con problemas físicos, lo que ocurre es que se aumenta la carga motora innecesariamente, al tener que volver a colocar el bloque en el lugar que le corresponde. Bueno, en este caso, no tanto.

Pero cuando tienes que modificar estilos, sí. Porque tienes que pasar los estilos en cada uno de los bloques para seguir, a menos que uses las flechas de dirección o usar los comandos de teclado asignados para ello. Que a fin de cuentas es lo que se hace con el editor actual, y no nos encontramos con el problema de que al usar el TAB hay que pasar por los bloques y cada una de las opciones que tiene, lo cual es bastante cansado.

Me falla la barra de herramientas fija en la parte superior

Sí, así, tal y como lo lees. ¿Por qué? Porque si nos fijamos bien en las diferentes opciones del bloque, en la primera de ellas que es «Cambiar tipo de bloque». Según lo que quieras poner ya sea una lista, un encabezado o una cita, la mejor solución es usar el comando correspondiente, porque es un pérdida de tiempo usar la tecla TAB si el usuario se equivoca al elegir qué quiere.

Yo pregunto: ¿Es necesario pasar con el teclado todas las opciones que se ven al desplegar esa opción? NO. Esto puede ser muy cansado para el usuario. Es cierto que beneficia a las personas que usan el ratón y es bastante rápido, pero nos olvidamos de los usuarios que no pueden usar un ratón y el problema principal es que se aumenta la carga motora sin necesidad. No sólo con eso, sino con todo. Porque se tiene que usar constantemente para estar editando y modificando las cosas. Y, también, todo esto puede marear a un usuario ciego.

Pero investigando por estos lares, me he dado cuenta de que existe la opción de «Fijar la barra de herramientas». En el menú de puntos de la esquina superior derecha, en Ajustes. 
Opción Fijar barra de herramientas

Inserción de imágenes

He creado esta imagen para hacer ver uno de los problemas principales de usabilidad, al menos para mí y para muchos usuarios.

Problema de usabilidad de Gutenberg

Y aquí me encuentro con otro problema: que una vez que insertas una imagen, le das a Intro, y te obliga a poner otra y no hay forma de salir de ahí, hasta que no pasas varias veces con el TAB. Te vuelves loca. ¿Y si yo quiero poner un párrafo o un encabezado inmediatamente después? Con lo cual esto es un problema grave de usabilidad. Te interrumpe cada vez que quieres hacer algo.

En las imágenes es importante añadir el texto alternativo para que las personas ciegas puedan hacerse una idea de cual es la información de la imagen. Una leyenda es añadir algo más de información cuando se trata de una información adicional de la propia imagen, como explicar un gráfico o una imagen compleja, por ejemplo.

Atajos de teclado

Cuando se va a buscar el menú de los atajos de teclado y quieres desplazarte hacia abajo para seguir viendo el resto de comandos, no se puede, es dependiente de ratón.

Y tampoco se sabe cuáles son los atajos para poner los encabezados, algo muy importante para llevar a cabo el orden necesario en cuanto a accesibilidad web, y por lo tanto para ayudar a las personas ciegas a navegar y a entender el contenido.

Inserción de Enlaces

A la hora de insertar un enlace también da problemas. Cuando insertamos un enlace, se inserta bien, pero no te deja abrirlo en una ventana nueva. Una vez lo pones, no puedes comprobar que funciona porque no te deja. Para comprobar que funciona nos tenemos que ir a la opción «Ver entrada» y ya sale, cuando debería dejar hacerlo desde el propio enlace.

Inserción de  vídeos y Opción Incrustados

Hay un problema de usabilidad bastante grande con la inserción de vídeos. Directamente, es que no se puede. Esto, desde un primer momento crea bastante confusión a los usuarios, porque por ejemplo, al insertar un vídeo usando la opción de Vídeo se espera eso, poder insertar un vídeo sin problemas.

En la pestaña Incrustados, que aparece en el menú de bloques de la esquina superior izquierda, en cuanto a los vídeos, me parece un error poner todo lo que corresponde a las redes sociales, vídeos, así como las diferentes plataformas de música y fotos. Hay que intentar ser coherentes con lo que estamos haciendo. Si ya tenemos la opción de Vídeo, que en un primer momento sirve para eso, no podemos confundir al usuario con la palabra Incrustados.

Es más, como sugerencia, diría que hasta podría clasificar las opciones en función de su finalidad: Fotos, audio, vídeos y Redes Sociales. Sería mucho más cómodo a la hora de hacer las búsquedas de lo que se necesite en el momento.

Además de esto, es muy posible que algunas de las opciones no sean accesibles y seguramente tendrán que mejorar muchísimo en cuestión de accesibilidad. Con lo cual, ese menú puede suponer una pérdida de tiempo para los usuarios.

Menú de bloques

En cuanto al menú de bloques, que está dividido en diferentes pestañas que su vez despliegan un menú con diferentes opciones, me quedaba con: Más utilizados, Bloques comunes, Formatos y Elementos de diseño. Incluso, me plantearía redistribuir los Elementos y eliminaría alguno que otro porque lo único que hace es entorpecer y complicar las cosas. De los Formatos en las tablas no se puede tabular y es dependiente de ratón, con lo cual es un problema grave de usabilidad.

Los Widgets están siempre y cuando se pueda añadir una barra lateral y al no poderse hacer, o al menos yo no lo he descubierto, no tiene mucho sentido.

Y la opción de Reutilizable no entiendo para qué sirve. No le encuentro ningún sentido.

Conclusiones

Para mi gusto y por facilidad a la hora de trabajar con Gutenberg, es mucho más cómodo trabajar como lo he explicado anteriormente, con la barra de herramientas fija en la parte de arriba.

Y yo pregunto: ¿Por qué no se añade directamente la barra de herramientas fija a la parte superior? Una funcionalidad tan importante como esta no debe pasar desapercibida para nadie y mucho menos estar escondida en un menú. Se debería incluir esta opción siempre y así no frustra tanto a los usuarios.

Por cierto, lo último que he visto ha sido dentro del menú de cada uno de los bloques, las opciones «Insertar antes» e «Insertar después», lo cual está bastante bien y mejora algo las cosas cuando estamos editando.

Y para finalizar, comento lo que toda la comunidad de WordPress lleva diciendo desde hace ya algunos meses:

Gutenber no está preparado para implementarse, necesita mejorar mucho en accesibilidad y en usabilidad para que se asiente como editor de textos en WordPress.

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

 

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.

 

Udemy: Tablas accesibles

Roger Hudson: Tablas accesibles

Office: Cómo hacer tablas accesibles en Word.

 

 

 

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: Problemas con el foco de teclado

En esta entrada voy a hablar de un problema bastante habitual en los sitios web. Hay personas que navegan por un sitio web a través de teclado, porque no ven. Al carecer de visión no pueden llevar a cabo el manejo del ratón y la visualización de la pantalla para poder dirigir el puntero.

 

Accesibilidad web: Problemas con el foco de teclado

Navegación por el sitio web a través de teclado

Para muchas personas este el único medio que tienen poder acceder a los sitios web:

  • Personas que usan un lector de pantallas o teclado braille.
  • Personas con diversidad funcional física o motriz, que pueden usar:
    • teclados alternativos.
    • Licornios, punteros de cabeza o apuntadores de boca para interactuar con el teclado.
    • Pulsadores de soplado que simulan la navegación por teclado.
  • Usuarios expertos que se manejan más rápido por teclado que con el ratón.
  • Personas que usan un portátil, que prefieren la navegación por teclado, o cuando existe un problema que impide usar el ratón.

Accesibilidad por teclado

Las WCAG 2.0 tienen varios criterios que hacen referencia a la operabilidad de los sitios web mediante el teclado.

teclado

2.1 Accesible por teclado

  • 2.1.1 Teclado Toda la funcionalidad del contenido es operable a través de una interfaz de teclado sin que se requiera una determinada velocidad para cada pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y final. (Nivel A)
  • 2.1.3 Teclado (sin excepciones): Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir una determinada velocidad en la pulsación de las teclas. (Nivel AAA)

 

Problemas con el foco de teclado

Hay varios problemas que impiden la navegación por los sitios web y que están relacionados con el foco de teclado. Estos problemas son:

  • El foco no está visible
  • El orden del foco no tiene sentido
  • Las páginas tienen trampas para el foco
  • Recibir el foco provoca automáticamente un cambio de contexto sin avisar al menos previamente al usuario.

1. El foco no está visible

Por defecto, cuando un enlace coge el foco aparece punteado alrededor.  O cuando un campo de formulario coge el foco también se aprecia visualmente, es decir, muestra un cursor parpadeando en su interior. El criterio de conformidad que recoge este problema es el 2.4.7 Foco visible.

El problema está en que hay sitios web en los que por razones estéticas, el foco no se encuentra visible, lo cual dificulta la navegación a muchos usuarios. Por lo tanto, el foco debe estar visible en todo momento.

El foco puede resaltarse con un borde más sólido y de color. Y usarse con la pseudoclase :hoveren la CSS y así resalta también con la interacción mediante ratón.

 

2. El orden del foco no tiene sentido

Otro de los problemas es que el orden del foco no tenga sentido. Por eso, es muy importante que el orden del foco sea el correcto, tal y como establece el criterio 2.4.3 de las WCAG 2.0.

Por ejemplo, si un enlace abre un menú desplegable, el siguiente elemento que debería coger el foco sería el primer elemento del menú.

No  sólo es necesario que el orden de lectura sea lineal y tenga sentido, sino también que el orden del foco por los elementos de interacción también lo tenga. De igual manera ocurre con el atributo global tabindex.

 

3. Trampas para el foco

El tercer problema que nos encontramos son las trampas para el foco. Son aquellas zonas a las que no podemos llegar mediante teclado, como son las ventanas modales o cuadros de diálogo, los controles de un reproducción de un vídeo o una animación en Flash. En estas interacciones sólo se puede volver atrás o ir a otra parte mediante el ratón.

Tal y como se puede leer en el criterio de conformidad 2.1.2 Sin trampas para el foco de teclado, vamos a seguir con el ejemplo del menú desplegable.

Si una vez que abrimos el menú, navegamos con la tecla TAB, y por cualquier razón no podemos volver a salir con el teclado, se consideraría una trampa para el foco.

 

4. Recibir el foco provoca un cambio de contexto

Otro de los problemas que se pueden dar es cuando se produce un cambio de contexto y reciben el foco sin advertir previamente al usuario.

Los cambios de contexto deberían producirse cuando el usuario realiza una acción, que normalmente se utilice para solicitar un cambio de contexto, como hacer clic en un enlace o un botón.

Los cambios inesperados en el contexto o que no puedan detectarlos pueden desorientar a los usuarios.

¿Qué es un cambio de contexto?

Es un cambio importante en el contenido de la página, que cuando se hace sin el consentimiento del usuario, puede desorientar a quienes no pueden ver la página o no pueden ver toda la página al mismo tiempo.

Esto incluye cambios en:

  • El agente de usuario. Como abrir un gestor de correo o un lector de PDF.
  • El foco: Mover automáticamente el foco a otro elemento. Una mala práctica muy habitual en los formularios es mover el foco de un control a otro automáticamente, por ejemplo al rellenar los campos de una cuenta bancaria. También es una mala práctica habitual utilizar  onfocus="blur()"para quitar el foco a un elemento cuando lo recibe.
  • El área de visualización del contenido: abrir otra ventana, otra pestaña o cambiar de marco.
  • El contenido. Cambios en el contenido que cambian el significado de la página: enviar un formulario, ir a otra página, o que lo parezca porque se cambia el orden del contenido de la misma.

Los criterios relacionados con este problema son:

3.2.1 Al recibir el foco

3.2.2 Al recibir entradas

3.2.5 Cambios a petición

 

Accesibilidad web: Las WCAG 2.1

El pasado 5 de junio, el W3C estableció como recomendación las WCAG 2.1, tras más de 10 de la publicación de las WCAG 2.0.

Accesibilidad web: WCAG 2.1

Introducción

Antes de empezar, me gustaría aclarar una cosa:

Un sitio web que aplique las WCAG 2.1 también cumple con las WCAG 2.0.

La novedad, es que los criterios ya no están ordenados por su nivel de conformidad. Para no cambiar el número de criterio a los criterios existentes, los nuevos siempre se han añadido al final de los actuales.

Para ello, hay una guía de referencia y ayuda, que permite filtrar los criterios por nivel, ya sea de las WCAG 2.0 o WCAG 2.1.

Filtro para los criterios en las WCAG 2.1

WCAG 2.1.

Como ya veníamos comentando desde hace unos meses, existen 17 nuevos criterios de conformidad, que son los siguientes:

 

Criterio 1.3.4: Orientación.

«El contenido no restringe su vista y funcionamiento a una única orientación de visualización, como vertical u horizontal, a menos que una orientación de visualización específica sea esencial.»

Este criterio hace referencia a que los sitios web deben admitir las dos orientaciones disponibles para que se pueda adaptar a todo tipo de usuarios, y asegurarse de que el contenido y la funcionalidad de la web estén disponibles. El contenido debe ser operable en todas las orientaciones de pantalla.

Criterio 1.3.5. Identificar el propósito de la entrada.

«El propósito de cada campo que recoge información del usuario se puede determinar por software cuando:

  • el campo tiene un propósito identificado y concreto de los listados en el apartado 7. Input Purposes for User Interface Components («name», «country», «postal-code», etc.), cuya lista está basada en la de HTML 5.2 Autofill field section. Y
  • el contenido está implementado usando una tecnología con soporte para identificar el significado esperado del dato introducido en un campo de formulario.

Este criterio ayuda a que sea más fácil rellenar los campos de formularios, según las necesidades y las preferencias de los usuarios.

La técnica suficiente incluida es utilizar autocomplete con los atributos definidos en HTML 5.2 Autofill field section.

Criterio 1.3.6 Identificar el propósito.

«En el contenido implementado utilizando lenguaje de marcas, el propósito de los componentes de la interfaz de usuario, los iconos y las regiones se puede determinar mediante programación.»

Tiene el mismo objetivo que el criterio anterior en cuantro a las preferencias y necesidades de los usuarios. Por ejemplo, si se identifica que es un botón para enviar un email, este tipo de botón se podrá personalizar con un icono o un término comprensible para un usuario en particular; se podrá mostrar ayuda relacionada con esa función, renderizarlo más grande, etc.

Las técnicas suficientes que se incluyen son: agregar semántica a los elementos usando landmark roles ARIA.

Como técnicas recomendables se incluyen: el uso de los atributos ARIA aria-invalid y aria-required en los campos de formulario.

1.4.10 Reflow

«El contenido puede presentarse sin pérdida de información o funcionalidad y sin necesidad de hacer scroll en dos dimensiones*, para:

  • Contenido con desplazamiento vertical con un ancho equivalente a 320 píxeles CSS;
  • Contenido con desplazamiento horizontal con una altura equivalente a 256 píxeles CSS;

*excepto para partes del contenido que lo requieran para su uso o significado.

En las notas se indica que, 320 píxeles CSS es equivalente a un viewport width inicial de 1280 píxeles CSS con un zoom de 400%. Para el contenido diseñado para escrolar horizontalmente, 256 píxeles CSS es equivalente a un viewport height inicial de 1024px con un zoom de 400%.

Los contenidos que pueden requerir doble scroll son: imágenes, mapas, diagramas, vídeo, juegos, presentaciones, tablas de datos, o interfaces donde es necesario mantener las barras de herramientas a la vista mientras se manipula el contenido.

Este criterio asegura que se puede hacer zoom de 400% sin pérdida de contenido o funcionalidad y se evitan los dobles scroll (salvo en los casos citados), pues el impacto del desplazamiento horizontal aumenta el esfuerzo de lectura 40-100 veces.

Las técnicas suficientes que se incluyen son: usar media queries y CSS grids o CSS Flexbox para reajustar los contenidos. Y también, calcular por programación los tamaños y posiciones de los elementos de manera que escalen con el tamaño del texto.

Como técnicas recomendables se incluyen: ajustar el tamaño de las imágenes y las tablas al viewport; y dar un mecanismo que permita cambiar a la vista móvil en cualquier momento.

Como errores comunes se nombran: usar tamaños y posiciones fijas; impedir el zoom; y usar texto preformateado o tratarlo como una excepción.

1.4.11 Contraste no textual

«La presentación visual de los siguientes elementos tiene una ratio de contraste de al menos 3:1 respecto a los colores adyacentes:

  • Componentes de la interfaz de usuario: información visual utilizada para identificar los componentes de la interfaz de usuario y los estados, excepto para componentes inactivos o cuando la apariencia del componente es determinada por el agente de usuario y el autor no la modifica.
  • Objetos gráficos: partes de los gráficos necesarias para comprender el contenido, excepto cuando una presentación particular de los gráficos es esencial para la información que se transmite (esencial como por ejemplo en los logotipos o en las banderas, en una captura de un sitio que muestra cómo es su apariencia, en un mapa de calor, en un diagrama médico que usa los colores utilizados en biología, etc.)

 

El criterio 1.4.3 solo abarca «la presentación visual de texto e imágenes de texto» y por tanto el criterio 1.4.11 lo complementa, porque el contraste sería también necesario para:

  • los iconos (que no van con texto)
  • los gráficos, por ejemplo, cada una de sus líneas
  • el borde o límites visuales de un campo de formulario o botón, siempre que no estuviera disabled
  • el indicador visual del valor actual en un control deslizante
  • el indicador del foco
  • etc.

Las técnicas suficientes para las gráficas son: que el contraste entre los colores de las gráficas sea suficiente así como el contraste de las líneas entre colores adyacentes.

Las técnicas suficientes para los textos de las gráficas son: que se incluyan en las gráficas etiquetas y valores; que las imágenes que transmiten información y los textos de las gráficas tengan suficiente contraste; o que haya un control con suficiente contraste que permita a los usuarios cambiar a una presentación que utilice suficiente contraste.

Como técnica recomendable, en el caso de los enlaces y controles que solo se identifican por el color, sería un ratio de contraste de 4,5:1 con el texto de alrededor y pistas visuales adicionales.

1.4.12 Espaciado de texto

El contenido implementado con lenguaje de marcas que soporte las siguientes propiedades, no se pierde contenido o funcionalidad ni por configurarlas, ni por no cambiar ninguna otra propiedad de estilo:

  • altura de línea (espaciado entre líneas): al menos 1.5 veces el tamaño de fuente
  • espaciado debajo de los párrafos: al menos 2 veces el tamaño de fuente
  • espaciado de letras (tracking): al menos 0.12 veces el tamaño de fuente
  • espaciado de palabras: al menos 0.16 veces el tamaño de fuente

 

La técnica suficiente que se incluye es: el espaciado del texto se pueda cambiar, siendo un error habitual usar medidas fijas.

Como técnicas recomendables se indican: usar las propiedades CSS letter-spacing, line-height y definir el tamaño de los contenedores en em

1.4.13 Contenido en Hover o Foco

Cuando el contenido se hace visible/oculto porque un componente de la interfaz coge/pierde el foco, lo siguiente es verdad:

  • Dismissable. Hay un mecanismo disponible para descartar el contenido adicional sin mover el puntero o el foco del teclado, a menos que el contenido adicional comunique un error en la entrada de datos, o no tape o reemplace otro contenido.
  • Hoverable. Si el puntero del cursor puede activar el contenido adicional, entonces el puntero se puede mover sobre el contenido adicional sin que desaparezca el contenido adicional.
  • Persistent. El contenido adicional permanece visible hasta que la activación del hover/focus se elimine, el usuario lo descarte o su información ya no sea válida.

 

Algunos ejemplos de contenidos a los que SÍ se aplica este criterio son: tooltips personalizados, submenús, pop-ups no modales que se muestran en el hover o en el focus, etc.

Las técnicas suficientes que se incluyen son: el uso de las pseudo-clases hover y focus.

Como técnicas recomendables: no escondas los elementos que desencadenan los cambios; y no escondas los nuevos mensajes cuando se haga hover sobre ellos, o hasta que el usuario los descarte o sean incorrectos.

2.1.4 Atajos de teclado de caracteres

si se implementa un atajo de teclado en el contenido usando una letra (incluidas mayúsculas y minúsculas), signo de puntuación, número o símbolo, entonces al menos una de las siguientes afirmaciones es cierta:

  • Desactivar: hay un mecanismo para desactivar el atajo.
  • Reasignar: hay un mecanismo para reasignar ese atajo de teclado, usando uno o más caracteres de teclado no imprimibles (Alt, Ctrl,…)
  • Activo solo en el foco: el atajo de teclado de un componente de la interfaz solo está activo cuando ese componente tiene el foco.

 

Este criterio tiene relación con los atajos de teclado personalizado.

Beneficia a los usuarios que utilizan programas de reconocimiento de voz que pueden activar varios atajos accidentalmente cuando estos están asociados a una sola tecla.

También puede evitar errores. El usuario de teclado puede pulsarla sin querer, especialmente aquellos que tienen problemas de movilidad.

Las técnicas suficientes se incluyen son: que los usuarios tengan una forma de desactivar los atajos de teclado de un solo carácter, o que exista un mecanismo que permite a los usuarios modificar los atajos de teclado y reasignarlos a caracteres no imprimibles.

2.2.6 Tiempos de espera

«Se debe advertir a los usuarios de la duración de cualquier inactividad del usuario que pueda causar la pérdida de datos, a menos que los datos se conserven durante más de 20 horas cuando el usuario no realiza ninguna acción.»

2.3.3 Animación de interacciones

«Las animaciones de movimiento desencadenadas por una interacción pueden ser deshabilitadas, a menos que la animación sea esencial para la funcionalidad o la información que se transmite.»

Este criterio se aplica cuando una interacción del usuario inicia una animación inesperadamente.

Esto puede provocar no solo distracción, sino incluso en algunos usuarios con desorden vestibular, nauseas y dolores de cabeza.

Las técnicas suficientes que se incluyen son: que los usuarios puedan definir en sus preferencias que no haya animaciones.

2.5.1 Gestos del puntero

«Toda funcionalidad que usa gestos multipunto o basados en una trayectoria, puede ser operada con un solo gesto de puntero (single pointer) sin depender de un gesto basado en una trayectoria, a no ser que sea esencial un gesto multipunto o basado en una trayectoria.»

iconos-del-gesto-fijados-para-los-dispositivos-móviles-del-tacto

Este criterio se aplica al contenido web que interpreta las acciones del puntero, es decir, no se aplica a las acciones que se requieren para operar el agente de usuario o el producto de apoyo.

Las técnicas suficientes que se incluyen son: no basar la interacción solo en recorridos gestuales o en varios toques, ofrecer controles alternativos que permitan realizar la misma función pero que no requieran gestos complejos.

2.5.2 Cancelación del puntero

«Para la funcionalidad que se puede operar con un puntero único, al menos una de las siguientes afirmaciones es verdad:

  • No Down-Event: el down-event del puntero no se usa para ejecutar ninguna parte de la función
  • Abort or Undo: la finalización de la función está en el up-event, y hay un mecanismo disponible para abortar la función antes de completarse o deshacer la función una vez completada
  • Up Reversal: el up-event invierte cualquier resultado del down-event anterior.
  • Essential: completar la función en el down-event es esencial

 

«Down-event», es cuando se presiona el dedo contra la pantalla.

Este criterio se aplica al contenido web que interpreta las acciones del puntero, es decir, no se aplica a las acciones que se requieren para operar el agente de usuario o el producto de apoyo.

Las técnicas suficientes se incluyen son: la activación de los controles en el up-event en HTML, iOS y Android; y que los eventos táctiles solo son activados cuando el toque se retira del control.

Como error a evitar, no actives un control en un down-event si el evento up-event no coincide con la misma localización del puntero.

2.5.3 Etiqueta en Nombre

«Para los componentes de la interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre accesible contiene el texto que se presenta visualmente. Y añade en una nota que una buena práctica es poner el texto de la etiqueta al comienzo del nombre.»

Si la etiqueta visible no es igual que la etiqueta no visible (el nombre accesible) los usuarios que acceden con programas de reconocimiento de voz pueden tener problemas. Hay que tener en cuenta que estos usuarios pueden decir el menú, el vínculo o la etiqueta del botón para activarlos.

Para los usuarios que utilizan un lector de pantalla pero visualizan la pantalla, también es mucho más claro que el nombre accesible que se les anuncia coincida con la etiqueta visual.

La técnica suficiente que se incluye es que las etiquetas visibles concuerden con los nombres accesibles.

Como técnica recomendable, si un icono no va acompañado de un texto, usa su texto «hover» como nombre accesible.

Los errores habituales que se listan:

  • El nombre accesible no contiene el texto visible de la etiqueta.
  • El nombre accesible contiene el texto de la etiqueta visible, pero las palabras de la etiqueta visible no están en el mismo orden.
  • El nombre accesible contiene el texto de la etiqueta visible, pero una o más palabras se entremezclan en la etiqueta.
  • El nombre accesible contiene el texto de la etiqueta visible, pero hay una o más palabras adicionales antes del texto de la etiqueta visible.

2.5.4 Actuación de movimiento

Toda funcionalidad que puede ser operada por el movimiento del dispositivo o por el movimiento del usuario, también puede ser operada mediante los componentes de la interfaz de usuario, y la respuesta al movimiento se puede desactivar para evitar el accionamiento accidental.

Incluye dos excepciones:

  • Supported Interface: el movimiento se utiliza para operar la funcionalidad a través de una interfaz compatible con la accesibilidad.
  • Essential: el movimiento es esencial para la función o si no se invalidaría la actividad.

Este criterio hace referencia a los sensores del dispositivo que detectan y responden a algún tipo de entrada del entorno físico. Por ejemplo, un movimiento como agitar el móvil, inclinar la tablet, etc.

Este criterio no se aplica a los sensores de geolocalización, ni a los movimientos que no sean movimientos intencionales del usuario, ni a los asociados al uso del teclado, el puntero o productos de apoyo.

Las técnicas suficientes que se incluyen son: proporcionar formas alternativas de introducir información cuando se usan los sensores de movimiento para activar funcionalidades y contenidos; y que el usuario pueda desactivar la actuación por movimiento.

2.5.5 Tamaño de la región de pantalla

Define que el tamaño mínimo del «target» (región de la pantalla que acepta la acción del puntero) debe ser 44×44 píxeles CSS.

Incluye ciertas excepciones:

  • Equivalent. Si el target está disponible a través de un enlace o un control equivalente, en la misma página, que tiene al menos 44×44 píxeles CSS.
  • Inline. Si el target está en una frase o en un bloque de texto.
  • User agent control. Si la apariencia del target es determinada por el agente de usuario y no es modificada por el autor.
  • Essential. Si una presentación particular del target es esencial para la información que se transmite.

 

El tamaño 44×44 que se define es el mínimo, pero se recomienda utilizar tamaños mayores, esto es especialmente importante en los siguientes casos:

  • El control se usa con frecuencia.
  • El resultado de la interacción no se puede deshacer fácilmente.
  • El control está situado en un lugar que será difícil de alcanzar o está cerca del borde de la pantalla.
  • El control es parte de una tarea esencial.

 

Las técnicas suficientes que se incluyen son: que las áreas interactivas tengan al menos 44*44px; y ofrecer un mecanismo que permita cambiar el tamaño de las áreas.

Como técnica recomendable, el área interactiva de un párrafo que es un enlace también tiene al menos 44*44px.

2.5.6 Mecanismos de entrada concurrentes

«El contenido web no restringe el uso de las modalidades de entrada (teclado, interfaz de teclado, ratón, pantalla táctil, habla, etc.) disponibles en una plataforma, excepto cuando la restricción es esencial, necesaria para garantizar la seguridad del contenido o respetar la configuración del usuario.»

En la mayoría de los dispositivos, es posible que los usuarios cambien entre diferentes medios de entrada de datos en la misma sesión (por ejemplo, entre pantalla táctil y teclado).

La aplicación o sitio web no debe asumir que el usuario siempre utilizará exclusivamente un mecanismo de entrada particular, y deberá permitir a los usuarios operar con cualquier mecanismo de entrada a su disposición.

Las técnicas suficientes que se incluyen son: usar solo manejadores de evento JS de alto nivel, independientes de la modalidad de entrada (focus, blur, click); o incluir manejadores de evento redundantes para las diferentes modalidades de entrada.

4.1.3 Mensajes de estado

«en el contenido implementado mediante lenguaje de marcas, los mensajes de estado pueden ser determinado por software a través de roles y propiedades, de modo que puedan ser presentados a los productos de apoyo sin recibir el foco.»

Se debe proporcionar una notificación para cada cambio del contenido de la página. No se trata tanto de que se vean esos mensajes, sino de que sean anunciados por el lector de pantalla. Esto se hace con el atributo aria-live de ARIA y sus roles específicos.

Los mensajes serán del tipo: «El formulario se ha enviado correctamente»

Las técnicas suficientes que se incluyen son:

  • Si el mensaje de estado advierte del éxito o el resultado de una acción o el estado de una aplicación: se usa role="status", informando de que el datos se ha enviado correctamente.
  • Si el mensaje de estado transmite una sugerencia o una advertencia ante la existencia de un error: se usa role=alert, en combinación con alguna de otras técnicas ya existentes como dar una descripción textual para identificar los campos requeridos no completados, así como los campos con valores o formatos no permitidos; permitir saltar a los errores; dar sugerencias de corrección o proporcionar una revisión ortográfica y sugerencias para la entrada de datos.
  • Si el mensaje de estado transmite información sobre el progreso de un proceso: se usa el role="log", role="progressbar" o role="status"

 

Nota adicional: 5.2.2 Páginas completas.

Este requisito de conformidad trata de que una página es conforme si es conforme en su totalidad, lo cual incluye las alternativas a las que enlaza (como por ejemplo una página con descripciones extensas de imágenes o con presentaciones alternativas de un vídeo).

Esta nota añade que las distintas variaciones de la página, como las generadas automáticamente para diferentes resoluciones de pantalla, también forman parte de esa página y deben ser conformes todas ellas.

Libro: Experiencia de usuario. Principios y métodos.

Esta semana toca hablar de un libro de usabilidad. Se titula Experiencia de usuario: Principios y métodos. El autor es Yusef Hassan Montero.

El libro se estructura en tres grandes bloques.

Conceptos fundamentales

En él se describen y explican los conceptos esenciales para comprender y fundamentar los siguientes capítulos: usabilidad, accesibilidad, arquitectura de información, diseño centrado en el usuario, interacción y estilos de interacción, affordance, modelos mentales, necesidades y estrategias de búsqueda de información y relación esfuerzo-beneficio.

Portada del libro de Yusef Hassan Montero. Experiencia de usuario: Principios y métodos

Dedica a cada concepto dos o tres páginas, los explica de forma clara y concisa, e incluye al final de cada uno una bibliografía relacionada.

Principios de diseño

En este apartado se recogen y desgranan los principios de diseño más destacados sobre los que partir a la hora de tomar decisiones de diseño: clasificación, color, eficiencia, error humano, estética, fotografías, gestalt, iconos, inteligencia colectiva, jerarquía visual, legibilidad e inteligibilidad, ley de Fitts, mapeo natural, ordenación, relevancia, taxonomías, toma de decisiones, y visibilidad y retroalimentación.

De nuevo explica cada uno de ellos de forma concisa, en este caso con una media de cuatro páginas por principio. Incluye en cada uno ejemplos, bibliografía y una relación de los principios con los que está relacionado.

Métodos

En esta parte se describen los métodos y técnicas más importantes del Diseño Centrado en el Usuario: analítica web, card sorting (y treejack), diagramas de interacción, diseño modular, encuestas y entrevistas, evaluación heurística, personajes y escenarios (y User Journey Maps), pruebas A/B, pruebas con usuarios, ROI y wireframes.

La organización es la misma que en los apartados anteriores, una media de cuatro páginas para cada uno, indicando su función y procedimiento, con ejemplos, bibliografía y las etapas del proceso para las que resultan pertinentes.

Es un libro muy recomendable. Sirve para todos aquellas personas que se quieran introducir en el mundo de la experiencia de usuario, y sirve como consulta para los expertos en el tema.  Es claro, es conciso, con ejemplos y con bibliografía asociada a cada concepto. El propio diseño y estructura del libro hace que sea muy cómodo de leer, tanto de forma lineal como a modo de consulta, como un glosario muy detallado.

Experiencia_de_Usuario_Principios-y-metodos.pdf

Directiva europea 2016/2012 sobre la accesibilidad de los sitios web y aplicaciones móviles

Tras un proceso de 4 años, el 26 de octubre de 2016 se aprobó la Directiva (UE) 2016/2102 del Parlamento Europeo y del Consejo, de 26 de octubre de 2016, sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público.

directiva europea 2016_2012

Objetivo de la directiva

El objetivo de la directiva es armonizar los requisitos de accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público:

Artículo 9

La presente Directiva establece las normas por las que se exige a los Estados miembros que garanticen que los sitios web, independientemente del dispositivo empleado para acceder a ellos, y las aplicaciones para dispositivos móviles de los organismos del sector público cumplan los requisitos de accesibilidad.

Lo primero que deberíamos aclarar es qué es una directiva en el marco jurídico de la Unión Europea.

¿Qué es una directiva?

Las directivas son actos legislativos en los cuales se establecen objetivos que todos los países de la UE deben cumplir. Sin embargo, corresponde a cada país elaborar sus propias leyes sobre cómo alcanzar estos objetivos.

La directiva obliga a los Estados miembros destinatarios (uno, varios o todos ellos) en cuanto al resultado que debe conseguirse, dejándoles, sin embargo, la elección de la forma y de los medios.

El legislador nacional debe adoptar un acto de transposición en el Derecho interno mediante el que se adapte la legislación nacional a tenor de los objetivos definidos en la directiva.

Este acto de transposición es el que en esencia confiere derechos e impone obligaciones al ciudadano. Los Estados miembros disponen de facultades discrecionales en la transposición al Derecho nacional, lo que les permite tener en cuenta las particularidades nacionales.

La transposición debe efectuarse en el plazo establecido por la directiva. Al transponer las directivas, los Estados miembros deben garantizar la eficacia del Derecho de la Unión, de conformidad con el principio de cooperación leal consagrado en el artículo 4, apartado 3, del TUE.

En principio, las directivas no son directamente aplicables. Sin embargo, el Tribunal de Justicia de la Unión Europea ha considerado que, de forma excepcional, determinadas disposiciones de una directiva pueden tener efectos directos en un Estado miembro sin que sea necesario que este último haya adoptado un acto de transposición previo, siempre que: a) la directiva no haya sido transpuesta o lo haya sido de forma incorrecta; b) las disposiciones de la directiva sean incondicionales y suficientemente claras y precisas; y c) las disposiciones de la directiva confieran derechos a los individuos. Si se reúnen estas condiciones, un particular puede hacer valer las disposiciones de la directiva ante cualquier autoridad pública.

Fuentes de aplicación del derecho de la Unión Europea

Por tanto, la directiva es de obligado cumplimiento pero no es directamente aplicable, sino que ahora España (y de igual forma cada país) debe elaborar una ley que respete, como mínimo, el alcance y los requisitos de accesibilidad estipulados en esta directiva.

La ley española deberá respetar “como mínimo” el alcance y los requisitos de accesibilidad de la directiva porque el artículo 2 lo establece así:

Artículo 2. Armonización mínima

Los Estados miembros podrán mantener o introducir medidas conformes al Derecho de la Unión que vayan más allá de los requisitos mínimos de accesibilidad de los sitios web y aplicaciones para dispositivos móviles dispuestos en la presente Directiva.

Es decir, que la ley de un país podrá ser luego más exigente que lo estipulado en la directiva. De hecho, la propia directiva anima a ampliar su alcance.

También puede darse el caso de que en algunos casos la propia legislación del país puede ser ya más exigente que la directiva europea.

 

¿Cuánto tiempo tiene España para elaborar la ley que adapte la directiva a su legislación?

Los Estados miembros tienen un plazo estipulado para llevar a cabo la adaptación de la directiva, en caso contrario, la Comisión abrirá un procedimiento de infracción:

Cuando un país no transpone una Directiva, la Comisión puede incoar un procedimiento de infracción e instruir un procedimiento contra el país ante el Tribunal de Justicia de la UE (el incumplimiento de la sentencia dictada con este motivo puede derivar en una nueva condena que puede concluir en la imposición de multas).

En Directivas de la Unión Europea, Eur-lex

En consecuencia, podemos estar bastante seguros de que la directiva será transpuesta a nuestra legislación para evitar sanciones. El plazo que estipula la directiva para ello es el 23 de septiembre de 2018:

Artículo 12. Transposición

Artículo 12.1

Los Estados miembros pondrán en vigor a más tardar el 23 de septiembre de 2018 las disposiciones legales, reglamentarias y administrativas necesarias para dar cumplimiento a lo establecido en la presente Directiva. Informarán inmediatamente de ello a la Comisión.

¿Cuándo deben empezar los sitios web y apps del sector público español a cumplir con la directiva?

En primer lugar, como hemos visto, deberemos esperar a que España apruebe una ley propia en la que transponga la directiva europea.

Pero la directiva ya estipula los plazos en los que entraría en vigor la obligación de cumplir con los requisitos de accesibilidad:

Artículo 12.3

  • Sitios web nuevos (publicados después del 23 de septiembre de 2018): deberán ser accesibles a partir del 23 de septiembre de 2019.
  • Resto de sitios web (publicados antes del 23 de septiembre de 2018): deberán ser accesibles a partir del 23 de septiembre de 2020.
  • Aplicaciones para dispositivos móviles: deberán ser accesibles a partir del 23 de junio de 2021.

 

El 23 de septiembre de 2018, los estados deben haber transpuesto la directiva a sus legislaciones o de lo contrario serían sancionados.

Norma EN 301 549

La norma EN 301 549 es el estándar europeo que dicta los requisitos de accesibilidad de cualquier producto y servicio: páginas web, software incluidas apps nativas, documentos, hardware, etc.

La Directiva (UE) 2016/2102 «sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público», establece como norma a seguir la EN 301 549.

En estos momentos, ya tenemos el borrador de la que será la próxima versión EN 301 549  (PDF). En ella se incluye un anexo A. «Relationship between the present document and the essential requirements of Directive 2016/2102», con dos tablas:

  • Tabla A: requisitos que se aplican a las páginas web: capítulo 9 (WCAG 2.0) y capítulo 12 «Documentación y servicios de atención al cliente», y otros capítulos condicionalmente
  • Tabla B: requisitos que se aplican a las aplicaciones móviles: capítulo 11 «Software» (WCAG 2.0 con excepciones y criterios adicionales) y 12 «Documentación y servicios de atención al cliente», y otros capítulos condicionalmente.

 

¿Quiénes están obligados a cumplir con los requisitos de accesibilidad de la directiva?

La Directiva establece los requisitos de accesibilidad que deben cumplir los sitios web y aplicaciones móviles del sector público. NO incluye a las empresas privadas.

¿Qué se entiende por “sector público”?

Artículo 3. Definiciones

1) «organismo del sector público»: el Estado, las entidades territoriales, los organismos de Derecho público según se definen en el artículo 2, apartado 1, punto 4, de la Directiva 2014/24/UE, o las asociaciones constituidas por una o más de dichas entidades o uno o más de dichos organismos de Derecho público, si esas asociaciones se han establecido con el propósito específico de atender necesidades de interés general, sin tener carácter industrial ni comercial;

Los organismos de Derecho público se definen así en la Directiva 2014/24/UE:

Artículo 2.4

4) «Organismo de Derecho público»: cualquier organismo que reúna todas las características siguientes:

a) que se haya creado específicamente para satisfacer necesidades de interés general que no tengan carácter industrial o mercantil;

b) que esté dotado de personalidad jurídica propia, y

c) que esté financiado mayoritariamente por el Estado, las autoridades regionales o locales, u otros organismos de Derecho público, o cuya gestión esté sujeta a la supervisión de dichas autoridades u organismos, o que tenga un órgano de administración, de dirección o de supervisión, en el que más de la mitad de los miembros sean nombrados por el Estado, las autoridades regionales o locales, u otros organismos de Derecho público.

Sin embargo, se establecen algunas excepciones.

NO se aplica a los siguientes sitios web y aplicaciones móviles

Artículo 1.3

3. La presente Directiva no se aplica a los siguientes sitios web y aplicaciones para dispositivos móviles:

a) sitios web y aplicaciones para dispositivos móviles de prestadores del servicio público de radiodifusión y sus filiales, así como los de otros organismos o sus filiales que cumplan un mandato de servicio público de radiodifusión;

b) sitios web y aplicaciones para dispositivos móviles de ONG que no presten servicios esenciales a los ciudadanos ni servicios que traten específicamente las necesidades de las personas con discapacidad o estén diseñados para ello.

Artículo 1.5

5. Los Estados miembros podrán excluir del ámbito de aplicación de la presente Directiva los sitios web y las aplicaciones para dispositivos móviles de escuelas, jardines de infancia o guarderías, excepto en lo relativo a las funciones administrativas esenciales en línea.

(33) Las funciones administrativas esenciales en línea de escuelas, jardines de infancia y guarderías deben ser accesibles. Cuando ese contenido esencial se proporcione de manera accesible en otro sitio web, no debe ser necesario que también sea accesible en la página web del centro de que se trate.

A pesar de ello, la directiva anima a los estados a ampliar el ámbito de aplicación de la Directiva:

(34) […] debe animarse a los Estados miembros a que amplíen la aplicación de la presente Directiva a las entidades privadas que ofrezcan instalaciones y servicios abiertos al público o de uso público, entre otros en los ámbitos de la asistencia sanitaria, la asistencia infantil, la inclusión social y la seguridad social, así como en el sector del transporte y la electricidad, el gas, la calefacción, el agua, las comunicaciones electrónicas y los servicios postales

(35) Si bien la presente Directiva no se aplica a los sitios web ni a las aplicaciones para dispositivos móviles de las instituciones de la Unión, se anima a estas a cumplir los requisitos de accesibilidad de la presente Directiva.

La legislación española ya obliga a las empresas privadas de más de 100 trabajadores o que facturen más de 6 millones de euros a tener sitios web accesibles, especialmente a las empresas «de los sectores de mayor incidencia en la actividad económica, entre otras, compañías dedicadas al suministro de electricidad, agua y gas, telecomunicaciones, entidades financieras, aseguradoras, grandes superficies, transportes, agencias de viaje” (Ley 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información).

Habrá que esperar a la transposición de la directiva para ver si se mantienen estas exigencias extras de la actual legislación española. Esperemos que sí.

¿A qué tipo de contenidos afecta?

Se aplica al contenido de sitios web y a las aplicaciones para dispositivos móviles, cuyo alcance se concreta detalladamente en la directiva:

Artículo 3.2)

2) «aplicaciones para dispositivos móviles»: las aplicaciones informáticas diseñadas y desarrolladas por organismos del sector público o por su cuenta, para ser usadas por el público en general en dispositivos móviles, como teléfonos inteligentes y tabletas. No incluyen el software que controla dichos dispositivos (sistemas operativos para dispositivos móviles) ni el equipo informático;

EEE (Punto 19)

(19) El contenido de los sitios web y de las aplicaciones para dispositivos móviles incluye la información tanto textual como no textual, los documentos y formularios que se pueden descargar, así como las formas de interacción bidireccional, como el tratamiento de formularios digitales y la cumplimentación de los procesos de autenticación, identificación y pago.

Por tanto, por si quedaba alguna duda, los PDF u otros archivos que se pueden descargar de una web deben ser también accesibles.

La directiva establece una serie de exclusiones, algunas temporales y otras permanentes, e indica que «esas exclusiones deben volver a valorarse en el contexto del examen de la presente Directiva a la luz de los futuros avances de la tecnología».

Otras medidas para fomentar la accesibilidad

En la directiva se tratan también otras medidas:

  • fomentar y facilitar programas de formación sobre cómo crear, gestionar y actualizar contenidos de sitios web y aplicaciones para dispositivos móviles accesibles,
  • medidas de concienciación,
  • consultas periódicas por parte de los Estados miembros a las organizaciones que representan los intereses de las personas con discapacidad y personas de edad avanzada,
  • la promoción por parte de los Estados miembros del uso de determinadas herramientas de autor que permitan una mejor aplicación de los requisitos de accesibilidad,
  • la cooperación entre los Estados miembros para intercambiar buenas prácticas, o revisar el mercado o la evolución de la tecnología en materia de accesibilidad web.

 

Antes de finalizar, os dejo un resumen de las fechas importantes a tener en cuenta.

Esquema de la directiva

Año 2016 – Se aprueba y entra en vigor la directiva

  • 26 de octubre: Se aprueba la directiva
  • 2 de diciembre: Se publica en el Diario Oficial de la Unión Europea. (DOUE)
  • 22 de diciembre: entra en vigor.

 

Año 2018 – Fecha límite para la transposición nacional de la directiva

  • 23 de septiembre: transposición nacional
  • 23 de diciembre: La Comisión proporcionará modelo de declaración de conformidad, la metodología para el seguimiento y las disposiciones paera la presentación de informes.
  • Ese mismo día, los estados comunicarán el organismo de la aplicación de la directiva y del seguimiento y la presentación de informes.

Año 2019 – Obligación para los sitios web nuevos

  • 23 de septiembre: Deberán ser accesibles los sitios publicados después del 23 de septiembre de 2018

Año 2020 – Obligación para todos los sitios web

  • 23 de septiembre: Deberán ser accesibles todos los sitios web.

Año 2021 – Obligación para las apps

  • 23 de junio: deberán ser accesibles las app
  • 23 de diciembre: los estados presentarán su primer informe

 

Accesibilidad web: Cómo trabajar los textos alternativos en las imágenes

En esta entrada voy a hablar de uno de los principales problemas de accesibilidad web que hay. Aún habrá muchas personas que no lo sepan, así que no viene mal recordarlo: Los textos alternativos en las imágenes.

Accesibilidad web: Cómo trabajar los textos alternativos para las imágenes

Textos alternativos en las imágenes

Uno de los errores más habituales es que se encuentran textos alternativos que no son los adecuados. Porque a veces no se tiene en cuenta el contexto o la función de la imagen.

Para identificar más fácilmente cuál es la función de las imágenes, hay que pararse a pensar en las características del criterio 1.1.1 de las WCAG 2.0.

Por lo tanto, vamos a definir las diferentes opciones o posibilidades que se pueden dar a la hora de analizar una imagen.

¿La imagen es o forma parte de un enlace o botón?

Sí, la imagen es el único elemento dentro del enlace o es un mapa de imagen o un botón de tipo imagen:

  • Si la imagen es un logo, o es un icono, imagen o botón de tipo imagen en el que la imagen no tiene texto (por ejemplo un icono de una lupa) se debe añadir a la imagen o al botón de imagen el atributo alt, en el cual se indique la función de la imagen. Por ejemplo: alt="Buscar" (para el icono de una lupa) o alt="Página principal de la web de Mª Carmen de Alba (para el logotipo)
  • Si es un icono, imagen o botón de tipo imagen en el que la imagen tiene texto (como por ejemplo una imagen, o un botón de tipo imagen, con un sobre y el texto «Enviar»), se debe añadir a la imagen (o al botón de tipo imagen) el atributo alt, en el cual se indique la función de la imagen que normalmente será su texto (por ejemplo: alt="Enviar")
  • Si es un mapa de imagen (por ejemplo un mapa de España), a la imagen se debe añadir un atributo alt que identifique el contenido y su función (por ejemplo alt="Mapa de España. Seleccione una Comunidad Autónoma para acceder a su información turística") y a las áreas del mapa se les debe añadir el atributo alt identificando cada área (por ejemplo, alt="Galicia"). Con la técnica H24 puedes ampliar información sobre esta característica.

O por el contrario:

No, la imagen no es el único elemento dentro del enlace, ni es un mapa de imagen ni un botón de tipo imagen:

  • Si la imagen aporta información adicional al texto del enlace, y por tanto complementa la información del texto del enlace (por ejemplo un enlace que incluye el texto «Ponencia WordCamp Chiclana 2017» seguido de un icono de fichero PDF), se debe incluir a la imagen un atributo alt con la información adicional que transmite la imagen (por ejemplo alt="en formato PDF").
  • Si la imagen no aporta información adicional, es solo decorativa (por ejemplo el icono de una casa delante del enlace «Home») tendrá el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío), o bien la imagen se definirá en la CSS, por ejemplo con background-image.

 

¿La imagen es decorativa, invisible o no proporciona información adicional? (y no es un enlace)

  • Si, la imagen es decorativa, invisible y no aporta información adicional.

Por ejemplo un icono de advertencia que va seguido de un texto que ya comienza por «¡Advertencia!». La imagen deberá tener el atributo alt vacío (y no debe incluirse el atributo title, a menos que también esté vacío) o bien se deberá definir la imagen en la CSS, por ejemplo mediante background-image.

  • No, la imagen aporta información y apoya al contenido.

En este caso hay que comprobar si se trata es un cuadro o crea una experiencia sensorial.

Si se trata de un cuadro, se incluirá el atributo alt indicando el nombre de la obra comúnmente aceptado (si lo tiene, por ejemplo alt="Las meninas de Velázquez") o una breve descripción que identifique el contenido.

Las meninas de Velázquez
No, no es un cuadro. Aquí debes incluir el atributo alt a la imagen.
El texto alternativo proporcionado por este atributo debe ser una breve descripción que identifique el contenido. (por ejemplo, en el caso de una escultura de arena, alt="Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano.")

Gran escultura de arena en una playa. Representa un rostro furioso de hombre hundido en la arena por una mano

Si es posible o útil se puede incluir un texto descriptivo adicional, por ejemplo si existe alguna razón especial por la cual se ha incluido dicha imagen en la página.

¿La imagen es parte de una prueba o test que queda invalidado si se describe la imagen? (y no es un enlace)

  • Si es una prueba o test visual (por ejemplo un test lógico de formas o un test de daltonimo) se incluirá a la imagen el atributo alt con una breve descripción que identifique el contenido (por ejemplo alt="Test visual de daltonismo")

 

test visual de daltonismo

  • Si se trata de un CAPTCHA, una prueba para comprobar si el usuario es una persona o una máquina, se incluirá a la imagen un atributo alt que indique el propósito del CAPTCHA (por ejemplo alt="Introduce este texto en el campo 'Captcha'. Si no puedes ver la imagen pulsa el botón 'Audio' disponible tras la imagen.") y también es necesario ofrecer otro CAPTCHA alternativo en una modalidad sensorial diferente, por ejemplo auditiva.

Captcha

¿La imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta?

  • , la imagen forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta

Por ejemplo, en una puntuación de 5 estrellas, formada con cinco imágenes de estrellas contiguas, tres en amarillo y dos en blanco, el alt de la primera imagen será: alt="Puntuación: tres estrellas de cinco", y el resto de las imágenes tendrán texto alternativo nulo, alt="".

No, la imagen no forma parte de una serie de imágenes contiguas que transmiten una información de forma conjunta.

  • Si la imagen solo tiene texto se incluirá el atributo alt con el texto de la imagen (por ejemplo, para una imagen con el texto «5 años de garantía» se incluirá alt="5 años de garantía") Es preferible usar texto con el estilo deseado definido en la CSS en vez de una imagen de texto.
  • Si la imagen incluye texto no decorativo (por ejemplo la imagen de un gráfico con el texto de la leyenda y el título incluidos como parte de la imagen, se incluirá el atributo alt con la información que transmite la imagen y que debe incluir el texto. Por ejemplo, alt="Venta de comida. Gráfico circular: Sandwich=20%, Ensaladas=15% Sopas=25% Bebidas=22% y Postres=18%"

Como recomendación, usa texto y no imágenes de texto siempre que sea posible.

Gráfico

 

  • Si la imagen no contiene texto, incluye un atributo alt con la información que transmite la imagen. Por ejemplo, un icono de advertencia, seguido de un párrafo de texto «Tu sesión está a punto de expirar» tendrá como texto alternativo alt="¡Advertencia!". O por ejemplo, una imagen de los jugadores del Real Madrid levantando la Copa de Europa tendrá como texto alternativo alt="Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros"

 

Sergio Ramos, capitán del Real Madrid levantando la Copa de Europa acompañado de sus compañeros

 

Texto alternativo en imágenes complejas

Si la imagen es compleja tendrá un atributo alt que identifique el contenido o que proporcione una breve descripción del mismo. Además deberá tener una descripción larga que puede proporcionarse por medio de diferentes técnicas:

  • En otra página: se debe incluir el enlace a esta página adyacente a la imagen, inmediatamente antes o después de la misma.
  • En la misma página, a continuación de la imagen: incluir en el alt una referencia a la ubicación de la descripción larga.
  • En la misma página, lejos de la imagen: se debe incluir un enlace (un ancla) a la zona de la descripción. Este enlace debe estar inmediatamente antes o después de la imagen.
  • Mediante el atributo LONGDESC, siempre que no sobrepase los 150 caracteres.

 

¿A quién beneficia?

  • A las personas con dificultades para percibir el contenido visual (personas con ceguera, baja visión, sordo-ciegas) o con dificultades de comprensión del contenido visual. La información contenida en el texto se puede presentar al usuario de la manera que mejor se adapte a sus necesidades: en braille, leída en voz alta o presentarla visualmente.
  • A las personas que por limitaciones técnicas no pueden acceder al contenido visual: navegan con las imágenes deshabilitadas por tener una conexión lenta o para ahorrar costes en la tarifa por datos, hay un problema en el servidor y no se están sirviendo las imágenes o alguna de estas ya no está disponible. También pueden estar usando un navegador solo-texto.
  • A los buscadores web, pues se basan en el contenido textual para indexar los contenidos.