La página web del Senado de España: Una nueva esperanza

He realizado un nuevo vídeo, La página web del Senado de España: Una nueva esperanza, Este vídeo forma parte de la serie de vídeos, y ya van cinco, sobre la falta de accesibilidad en la página web del Senado.

Pido perdón por levantar la voz en algunos momentos del vídeo: había una mosca volando que me estaba molestando y me estaba enfadando.



El vídeo es accesible, incluye subtítulos. Además, a continuación incluyo la transcripción completa del audio.

Transcripción del audio:


Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante. Con este vídeo simplemente quiero recordar que la página web del Senado de España sigue sin ser accesible. Sin embargo, en el horizonte se ve llegar una nueva esperanza.
Hoy, 14 de julio de 2012, la página web del Senado de España sigue siendo esto, más o menos, la misma página que llevamos viendo más de 10 años. Poco ha cambiado la página web del Senado de España desde el año 1998 hasta ahora.
Pero lo grave de la página web del Senado de España no es que siga siendo la misma después de tanto tiempo.
Lo grave es que no es accesible.
En enero de 2011, realice un análisis de la accesibilidad de la página web del Senado de España que publiqué en mi sitio web sobre accesibilidad.
Este análisis lo complementé con la publicación de tres vídeos en los que explicaba los principales problemas de accesibilidad que presentaba, y sigue presentando, la página web del Senado de España.
Los tres vídeos los puedes encontrar en mi canal personal en YouTube.
El resumen de mi análisis es que la página web del Senado de España no es accesible y que, lo más grave, debido a ello, incumple una serie de leyes que fueron creadas por el propio Senado para asegurar el acceso a la Sociedad de la Información de todos los ciudadanos.
¿Y cómo es esto posible?
Bueno, ya se sabe que en España todo es posible. Tan posible, como tener una Diputada del Partido Popular llamada Andrea Fabra que le grita “¡qué se jodan!” a los parados o a los Diputados del PSOE (siempre nos quedará la duda de a quién le gritaba), y no pasa nada.
O tan posible como que Celia Villalobos Talero, antigua alcaldesa de Málaga, actual Diputada por el PP, por el Partido Popular, en el Congreso y Vicepresidenta primera del Congreso de los Diputados de España, se refiriese a los discapacitados como los “tontitos” por dos veces en el Palacio del Congreso de los Diputados en el año 2011.
José Bono, presidente del Congreso de los Diputados por aquel entonces, le pidió a Celia Villalobos que cambiara de término y dejara de referirse a los afectados de deficiencias físicas o psíquicas como "tontitos". A lo que la diputada del Partido Popular respondió que hablaba "de forma coloquial, como se habla en mi tierra".
La cosa no acabó ahí. Posteriormente, la Diputada del Partido Popular Celia Villalobos se refirió a José Bono, recordemos que, por aquel entonces, presidente del Congreso de los Diputados, como “fascista”. ¿Y qué le pasó a la Diputada del Partido Popular Celia Villalobos?
Pues que se volvió a presentar, volvió a ser elegida Diputada y además, en la actualidad, ostenta el cargo de Vicepresidenta primera del Congreso de los Diputados de España. ¡Olé!
La lección que podemos aprender de todo esto es “Insulta, y llegarás lejos”. Pero…
¿Qué me pasaría a mí, si llamase mentecato, inútil, descerebrado o mentiroso a un político?
Teniendo a estos políticos que tenemos, con esta sensibilidad y preocupación por los “tontitos”, no es de extrañar que la página web del Senado de España no sea accesible. Sin embargo, no todo está perdido.
Música. Ya, ya lo sé, sin la banda sonora de “La guerra de las galaxias” no queda igual, queda muy patético, pero George Lucas, John Williams y la SGAE me denunciarían por derechos de autor si la utilizo.
Episodio V
UNA NUEVA ESPERANZA
Nos encontramos en un período de revuelta civil. Las redes sociales rebeldes atacando desde una base oculta, han logrado su primera victoria sobre el malvado Imperio P2.
Durante la batalla, los espías rebeldes han conseguido apoderarse de los planos secretos del arma total y definitiva del Imperio:
¿Cuál será?
¡La nueva página web del Senado de España! ¿Qué es esto?
Resulta que hace unos días se celebró en Madrid el primer Congreso Internacional en Comunicación Política y Estrategias de Campaña.
Gracias al soplo de un colaborador de las fuerzas rebeldes, me pasaron un tuit en el que aparecía una fotografía de la nueva web del Senado de España que en pocos meses estará operativa.
Según parece, la nueva web la presentó José Ángel Alonso, Jefe del Área de Desarrollo del Senado.
Desgraciadamente, me sorprendió negativamente esta noticia ya que ponía que estará operativa en pocos meses. ¿Por qué me sorprende?
Recordemos lo que conté en mi último vídeo sobre la página web del Senado.
El 22 de diciembre de 2010, se publicó en la página web del Senado de España un procedimiento abierto para la renovación del sitio web del Senado.
Según el pliego de cláusulas administrativas particulares de este procedimiento, en la cláusula 6 se indica que el presupuesto máximo de licitación para la página web es de 310 mil euros.
Y en la cláusula 24 Ejecución del contrato, se indica que el plazo de ejecución de la página web es de 6 meses, se supone que a partir de la firma del contrato.
El contrato de la página web se adjudicó a la empresa VASS CONSULTORÍA DE SISTEMAS S.L. y fue firmado el 14 de julio de 2011, por lo que 6 meses después, el 14 de enero de 2012, el nuevo sitio web del Senado de España ya tendría que haberse puesto en funcionamiento.
Sin embargo, hoy es 14 de julio de 2012, ya han pasado 6 meses desde la fecha prevista de finalización, y seguimos teniendo esto.
Y con esto finaliza este video en el que he explicado por qué debemos tener la esperanza de que en poco tiempo tendremos la nueva página web del Senado de España.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@arroba@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.

Consejo 18: Utiliza los colores con precaución

Consejo: utiliza combinaciones de colores que tengan suficiente contraste y que no produzcan confusión entre los usuarios con ceguera al color (daltonismo). Por ejemplo, en el vídeo Errores web: El País, se muestra un ejemplo de lo que pasa cuando se emplean combinaciones de colores sin el suficiente contraste.

Cómo lo hago: existen numerosas herramientas que permiten comprobar si una combinación de colores (color principal y color de fondo) presentan un contraste suficiente. Además, también hay herramientas para simular los diferentes tipos de ceguera al color. En Herramientas para trabajar con el color puedes encontrar una lista con numerosas herramientas de este tipo.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial aquellos que tengan problemas de visión, se benefician del uso de combinaciones de colores adecuadas. Y es evidente que los usuarios con ceguera al color se beneficiarán si se evitan situaciones en las que se transmita información únicamente con el color. Además, todos los usuarios se pueden beneficiar cuando las condiciones de visualización de una página web no son las correctas, como por ejemplo, la visualización de una página web en la calle a plena luz del sol.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Acorn Media Player, reproductor de vídeo HTML5

Si HTML5 va a sustitur a Adobe Flash (y al resto de tecnologías similares como Microsoft Silverlight u Oracle/Sun Java) en el desarrollo web, una de las cosas más importantes que debe solucionar es la reproducción de vídeos. Cómo ya expliqué en el artículo Accesibilidad de los vídeos en HTML5, la nueva etiqueta video de HTML5 tiene en cuenta la accesibilidad web, pero todavía hay algunos problemas que se tienen que resolver, como los subtítulos en los vídeos en HTML5.

Acabo de encontrar el proyecto Acorn Media Player - HTML5 media player. Este reproductor es un plugin de jQuery que implementa un reproductor de vídeo de HTML5 personalizado que presta especial atención a la accesibilidad y la personalización.

Sus características accesibles son:

• Control por teclado completo.
• Soporte de subtítulos, pero no nativo de HTML, sino propio con archivos externos SRT.
• Transcripción dinámica generada a partir de los subtítulos.
• Otras características interesantes, como personalización y soporte de temas, lo que permite su adaptación para usuarios con visión reducida.

En Dev Opera hay dos artículos que explican los aspectos técnicos de este reproductor:

• Building a custom HTML5 video player with CSS3 and jQuery
• A more accessible HTML5 player

Y si no te convence porque todavía hay muchos navegadores que no soportan el reproductor de vídeo de HTML5, utiliza Video for Everybody!, que proporciona un método fallback para ofrecer una solución alternativa basada en Flash cuando el reproductor HTML5 no es soportado.

Consejo 17: Sitúa el contenido principal al principio de la página

Consejo: sitúa el contenido principal al principio de la página.

Cómo lo hago: escribe el contenido principal de la página al principio de la página y a continuación el resto del contenido de la página que se repite de una página a otra, como por ejemplo, las migas de pan o el menú principal. Utiliza CSS para situarlo visualmente en la posición que quieras en la página. Al aplicar este consejo ya no es necesario aplicar el consejo 5 Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial aquellos que no utilicen un navegador web visual, se benefician ya que el contenido principal aparece al principio de la página y no necesitan realizar desplazamiento (scroll).

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Respuesta: ¿Un buen semáforo?

El otro día escribí la entrada Pregunta: ¿Un buen semáforo? en el que preguntaba si el siguiente rediseño de un semáforo era bueno:

El problema de este semáforo es que una persona con ceguera al color o daltonismo no sabrá cuándo el semáforo está en rojo o en verde, ya que estas personas tienen dificultades para distinguir estos dos colores (en realidad, hay distintos tipos de daltonismo, pero el rojo/verde es el más común).

Con los semáforos tradicionales no existe este problema, ya que por la posición del foco iluminado se puede saber en qué estado está el semáforo. Con los semáforos horizontales, no muy comunes en España, también puede existir el mismo problema, ya que en algunos países la secuencia es rojo-ámbar-verde, mientras que en otros países es verde-ámbar-rojo.

Por cierto, la imagen la saqué de Accessibility Trumping Design, artículo en el que explican el problema de accesibilidad de este semáforo "molón".

Consejo 16: Haz que las tablas sean accesibles

Consejo: haz que las tablas sean accesibles mediante información adicional que defina el significado de cada parte de la tabla.

Cómo lo hago: utiliza el atributo summary para proporcionar un resumen del contenido de la tabla. Utiliza la etiqueta caption para definir el título de la tabla. Utiliza la etiqueta th para definir los encabezados de columna y de fila. Utiliza los atributos scope, headers e id para definir encabezados complejos. En Tablas: Facilite la lectura línea a línea - Resuma, Puedes encontrar ejemplos de uso de todas estas etiquetas y atributos.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician de las tablas correctamente etiquetadas para que sean accesibles, ya que los lectores de pantalla reconocen las características de accesibilidad de las tablas y las comunican a los usuarios.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Investigadores de la Universidad Autónoma de Barcelona desarrollan un GPS para ciegos

Según la noticia Researchers Create the First GPS for the Blind (21/6/2012), un grupo de investigadores de la Universidad Autónoma de Barcelona ha desarrollado el primer GPS para ciegos.

El sistema, llamado OnTheBus, es una aplicación Android para viajar alrededor de las grandes ciudades. OnTheBus cuenta con una brújula y un acelerómetro, y soporte para GPS, reconocimiento de voz, redes 3G y wi-fi.

El funcionamiento es muy sencillo: la aplicación proporciona una lista de rutas óptimas, el usuario selecciona una y, a continuación, la aplicación guía al usuario hasta la parada de autobús más cercana e indica la cantidad de tiempo que hay que esperar hasta que llegue el próximo autobús. Una vez en el autobús, la aplicación informa al usuario del número de paradas hasta el destino, avisa de cuando hay que pulsar el botón de "parada" y sigue guiando al usuario hasta su destino.

Por cierto, lo de "el primer GPS para ciegos" es relativo, porque he encontrado la noticia La ONCE participa en el proyecto HaptiMap para hacer accesibles mapas y GPS en dispositivos móviles, que habla de un proyecto similar y está fechada el 27 de febrero de 2012.

Consejo 15: Usa las tablas sólo para mostrar datos tabulados

Consejo: usa las tablas sólo para mostrar datos tabulados, es decir, datos o información que se puede organizar por filas y columnas. No utilices las tablas para maquetar, es decir, para definir la presentación visual del contenido de la página.

Cómo lo hago: cuando tengas datos tabulados, muéstralos mediante tablas. Para maquetar utiliza CSS, nunca las tablas. Por ejemplo, si quieres disponer un contenido como un texto en varias columnas, utiliza las nuevas propiedades de CSS3 column-count, column-gap y column-rule (importante: estas propiedades no están soportadas por todos los navegadores, así que por ahora su uso es limitado).

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician del empleo de las tablas para los datos tabulados, ya que los lectores de pantalla proporcionan mecanismos específicos de navegación por las tablas, como por ejemplo, anunciar la posición (fila/columna) y la posibilidad de desplazarse por filas o por columnas en la tabla.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 14: Proporciona un título significativo para cada parte individual de una página

Consejo: aunque se desaconseja su uso, una página puede estar compuestas de marcos, ya sea de tipo frame o iframe. Para cada marco (parte), debes proporcionar un título significativo y representativo, es decir, un título que ayuda al usuario a entender el contenido, propósito o función de ese marco sin tener que visitar la página. Cada marco en una página debe tener un título único.

Cómo lo hago: en la definición del marco, ya sea en la etiqueta frame o iframe, debes incluir el atributo title (no confundir con la etiqueta title) para proporcionar una descripción del contenido del marco.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician ya que los lectores de pantalla proporcionan algunas ayudas, como la "lista de marcos de la página" (y se muestra el título de cada marco) que les ayuda a moverse de un marco a otro en el navegador web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 13: Proporciona un título significativo para cada página

Consejo: proporciona un título significativo y representativo para cada página de tu sitio web, es decir, un título que ayuda al usuario a entender el contenido, propósito o función de una página web sin tener que visitar la página. Cada página debería tener un título único.

Cómo lo hago: el título de una página se define con el elemento (etiqueta) title en el head. El elemento title es obligatorio: una página sin este elemento no es válido.

Cómo se benefician los usuarios: todos los usuarios se benefician de un título correcto, ya que el título se emplea en varios contextos (visiona mi vídeo Errores web: El título de la página). Por ejemplo, el título de la página se emplea para visualizar los resultados de una búsqueda. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que los lectores de pantalla proporcionan algunas ayudas, como la "lista de ventanas abiertas" (y se muestra el título de cada página en cada ventana) que les ayuda a cambiar de una página a otra en el navegador web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 12: Especifica el idioma del contenido de cada parte de la página

Consejo: especifica el idioma principal de la página web y de las distintas partes de la página cuando exista un cambio en el idioma.

Cómo lo hago: utiliza el atributo lang para indicar el idioma de las diferentes partes de una página web. Si lo colocas en la etiqueta html, estarás definiendo el idioma principal de la página. Cuando se produzca un cambio de idioma, por ejemplo en un párrafo, puedes añadir el atributo lang a la etiqueta de inicio del párrafo. Si el cambio de produce en un fragmento de texto, puedes utilizar la etiqueta span con el atributo lang para marcar ese cambio.

El valor del atributo lang debe ser un código de idioma definido en IANA Language Subtag Registry, como por ejemplo "es" para el español o "en" para el inglés.

Cómo se benefician los usuarios: muchos buscadores actuales permiten realizar búsquedas selectivas en función del idioma. Para ello, los buscadores pueden autodetectar el idioma de una página, pero algunas veces se equivocan. Con el empleo del atributo lang se mejora la indexación de las páginas web en los buscadores. Además, los usuarios que utilicen un lector de pantallas, se benefician enormemente, ya que los lectores de pantalla pueden detectar el atributo lang y lo pueden emplear para leer con la pronunciación adecuada un texto.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Aplicación con inteligencia artificial para ayudar a las personas ciegas

La Imagine Cup 2012 que organiza Microsoft está dando muy buenos resultados en cuanto a la accesibilidad y las personas con discapacidad. Y bueno, quizás sea por el tema que tenía este año: Imagina un mundo en el que la tecnología ayuda a resolver los problemas más difíciles.

Hace unos días escribí la entrada Guantes que traducen la lengua de signos en habla en la que me hacía eco de los ganadores de la competición que habían inventado un guante que traduce la lengua de signos en habla.

Ahora acabo de leer el artículo Artificial intelligence app helps blind people en el que se comenta que uno de los finalistas, un grupo de estudiantes de la Universidad de Auckland y la Universidad Tecnológica de Auckland (Australia), han desarrollado un aplicación para teléfonos móviles inteligentes (smarphones) que permite a las personas ciegas percibir lo que tienen alrededor.

La aplicación permite tomar una fotografía y mediante inteligencia artificial se intenta reconocer lo que contiene la fotografía, como formas, colores, texturas y objetos. En aquellos casos en que la inteligencia artificial no sea capaz de reconocer la fotografía, se la envía a un amigo o un voluntario para que realice la descripción de forma manual.

Máster en Tecnologías de Apoyo, Accesibilidad y Diseño para Todos

La Universidad Carlos III de Madrid organiza una nueva edición del Máster en Tecnologías de Apoyo, Accesibilidad y Diseño Para Todos. El máster se compone de dos cursos de especialización que se pueden realizar por separado o de forma conjunta:

• Especialista en tecnologías de subtitulado y audiodescripción
• Experto en tecnologías de accesibilidad web

La información disponible es un poco confusa porque, por ejemplo, aparece fecha de comienzo del programa el 15 de noviembre de 2011, pero es de esperar que actualicen la página web en poco tiempo.

Pregunta: ¿Un buen semáforo?

¿Qué opinas? ¿Te parece un buen rediseño este semáforo? Déjame un comentario con tu opinión o con algún ejemplo de otro sistema que presente el mismo error.

Consejo 11: Emplea algunas etiquetas "olvidadas"

Consejo: emplea algunas etiquetas olvidadas de HTML para mejorar la estructura y la semántica de tus páginas web.

Cómo lo hago: existen algunas etiquetas de HTML como address, blockquote, cite, code y pre que no son muy conocidas y no se suelen emplear. Otras etiquetas que también suelen ser desconocidas, como big, dir, strike o tt no están soportadas en HTML5, así que no conviene utilizarlas (aunque esto puede cambiar en cualquier momento, ya que HTML5 todavía no es una recomendación).

Cómo se benefician los usuarios: en el futuro, cuando los buscadores incorporen más "inteligencia" y la web semántica sea una realidad, el uso de estas etiquetas puede ayudar a mejorar el resultado de las búsquedas. En la actualidad, algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de que se utilicen estas etiquetas, ya que los lectores de pantalla pueden leer el contenido etiquetado con esos elementos con un tipo de voz diferente.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Control del ordenador con gestos y una webcam

En el periódico La Vanguardia han publicado la noticia Un programa permite a discapacitados controlar el ordenador con una webcam. El sistema, llamado Switch Viacam, es descrito por sus propios autores como:

Switch Viacam (sViacam) es un emulador libre de conmutador basado en webcam. Utilizando una cámara web, puede configurar una área concreta dentro de la cual se detecta movimiento, lo que dispara un clic del ratón o la pulsación de una tecla. Al no basarse en la detección de formas o características particulares, los eventos pueden ser disparados usando casi cualquier parte del cuerpo u objeto que se mueva delante de la cámara. Actualmente permite emular hasta dos conmutadores virtuales.

El programa es gratuito y ha sido desarrollado por la Asociación de Parálisis Cerebral de Tarragona (APPC).

Y un vídeo en el que nos explican cómo se usa y los beneficios que aporta en algunos usuarios:

Guantes que traducen la lengua de signos en habla

En TechCrunch han publicado una noticia muy interesante: Ukrainian Students Develop Gloves That Translate Sign Language Into Speech (Estudiantes ucranianos desarrollan unos guantes que traducen la lengua de signos en habla). Esta noticia también acaba de aparecer en el periódico El Mundo, Ucrania gana la Imagine Cup con un guante que traduce la lengua de signos en letras.

El proyecto, llamado Enable Talk, ha sido presentado en la Imagine Cup organizada por Microsoft que se está celebrando estos días en Sidney. Los guantes están dotados de sensores flexibles, sensores de tacto, giroscopios y acelerómetros. Los guantes se conectan a un teléfono inteligente (smartphone) mediante Bluetooth. El teléfono, mediante un software text-to-speech, es capaz de convertir los gestos de la lengua de signos en habla.

Según la noticia, el coste de este sistema está sobre los $75, mientras que otros sistemas parecidos cuestan más de $1000. ¿Lo podremos comprar dentro de poco?

A continuación un vídeo en el que se explica el proyecto y se puede ver en funcionamiento:



[Actualización 16/07/2012]
Más información en App that allows deaf people to verbally communicate wins Imagine Cup.

Consejo 10: Resalta partes del texto con los elementos apropiados

Consejo: cuando quieras resaltar una parte del texto de una página, por ejemplo con un color o un tipo de letra diferente, utiliza las etiquetas de HTML disponibles para ello. No apliques simplemente un estilo visual diferente con un span y CSS.

Cómo lo hago: utiliza las etiquetas strong (mejor que b) y em (mejor que i) para resaltar aquellas partes del texto que quieras destacar. Posteriormente, con CSS, puedes aplicarles el estilo visual que desees, como cambiar el tipo de letra, el color, el estilo, etc.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de que se utilicen los elementos de HTML para resaltar partes del texto, ya que los lectores de pantalla pueden leer esas partes con otro tipo de voz para que el usuario perciba que esa parte está destacada. Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que los navegadores están preparados para aplicar unos estilos por defecto en ausencia de un CSS.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Errores web: Renfe y los encabezados

He realizado un vídeo sobre un grave error (creo que ni mis alumnos escriben un código tan malo) que existe en la página de venta de Renfe:


A continuación, la transcripción del audio:

Hola, soy Sergio Luján Mora, profesor de la Universidad de Alicante, y este videotutorial forma parte de una serie de videotutoriales dedicados a estudiar errores de diseño, de usabilidad y de accesibilidad que presentan sitios web importantes.

El sitio web que vamos a analizar a continuación es el del principal operador ferroviario de España, la compañía Renfe Operadora. En la actualidad, Renfe es la única operadora de viajeros del sector ferroviario español.
Hoy, 9 de julio de 2012, este es el aspecto que presenta la página principal del sitio web de Renfe. Podemos ver un par de referencias a la fiesta de San Fermín: muy bien, Renfe dispone de un equipo de desarrolladores web capaces de actualizar y renovar este sitio web cuando sea necesario. ¿Seguro? De esta página me interesa mucho el logotipo del Gobierno de España – Ministerio de Fomento. ¿Por qué?

Recordemos que en España, desde hace tiempo, existen diferentes leyes que establecen los niveles mínimos de accesibilidad web que deben presentar los sitios web de las administraciones públicas o que estén financiados por dinero de las administraciones públicas.

Según la Wikipedia, Renfe Operadora se configura como una entidad pública empresarial dependiente del Ministerio de Fomento.

Por tanto, el sitio web de Renfe debe ser accesible.

Pero además, en el caso de Renfe, se le debe aplicar también la LEY 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información, ya que en el artículo 2, esta ley obliga a las empresas que cumplan una serie de condiciones a satisfacer un nivel de accesibilidad en sus páginas web equivalente al nivel AA del W3C.

Entre estas empresas, figura en el apartado g “Servicios de transporte de viajeros por carretera, ferrocarril, por vía marítima, o por vía aérea, de acuerdo con lo dispuesto en la normativa específica aplicable”.

Por tanto, el sitio web de Renfe debe ser accesible por partida doble: por ser un sitio web dependiente de las administraciones públicas y por ser un sitio web de una empresa de especial trascendencia económica.

Sin embargo, el sitio web de Renfe no cumple los niveles exigidos de accesibilidad. En este vídeo vamos a ver un pequeño ejemplo de ello.

En concreto, el error que vamos a mostrar consiste en un uso incorrecto de los encabezados, es decir, de las etiquetas h1, h2, h3, etc. Los encabezados ayudan a mejorar la accesibilidad de una página web, ya que, por ejemplo, los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, pueden navegar directamente de un encabezado a otro ya que los lectores de pantalla suelen proporcionar una lista con los encabezados de la página.

En la página principal de Renfe, si utilizamos la barra de herramientas Web Developer en Mozilla Firefox para descubrir los encabezados de la página, vemos que aparentemente sólo hay un encabezado, sólo aparece resaltado un único encabezado, lo cual sería un grave error.

Sin embargo, si utilizamos el complemento HeadingsMap también para Mozilla Firefox, podemos comprobar que hay más encabezados, de nivel 1 y varios de nivel 2. ¿Cómo puede ser que Web Developer sólo nos resalte un encabezado?

Si exploramos el código fuente de la página principal encontraremos que existen varios encabezados con la clase “oculto”. ¿Puede ser que estos encabezados se estén ocultando a propósito? ¿O es esto un error?

Al ver la definición de la clase oculto en el CSS, comprobamos que efectivamente los encabezados de nivel 2 que llevan esta clase se han ocultado en la presentación gráfica de la página web, ya que se desplazan fuera de la ventana, y, por tanto, no son visibles, aunque están ahí. Sin embargo, para un usuario que utilice un lector de pantallas sí que estarán disponibles y les ayudarán a navegar por la página web.
Los encabezados se han ocultado correctamente: no se ha usado {display: none}, que no funciona correctamente, ya que también lo oculta a los usuarios de lectores de pantalla.

Así que, como vemos, los desarrolladores web de Renfe saben hacer las cosas bien, muy bien, y en la página principal lo han demostrado, pero como veremos a continuación, tienen mala memoria y a veces se les olvida cómo hacer las cosas bien.

En concreto, veamos la página de “Compra de billetes”, la que sin duda es la más importante para la mayoría de los usuarios que visitan este sitio web, y debería ser la más importante para Renfe, ya que es la página web con la que hace dinero.

Si en esta página, utilizamos otra vez el complemento HeadingsMap para explorar los encabezados de la página descubrimos unos encabezados muy largos y raros. ¡Raro, raro!

Y si validamos el código HTML, nos encontramos con 92 errores y 20 advertencias. ¡¡Madre mía!! ¿Qué está pasando en esta página web?

A los desarrolladores web de Renfe habría que darles un buen tirón de orejas por el código HTML que contiene esta página.

Vamos a ver el código fuente de esta página y así descubriremos el problema que hay con los encabezados.

Aquí podemos ver resaltado el código HTML de este encabezado. El segundo encabezado que vemos aquí, que aparentemente, y realmente, contiene también la barra de selección de idiomas.

Como vemos, no se ha cerrado la etiqueta h1, así que el encabezado sigue, sigue y sigue, hasta que se encuentra el inicio de otro encabezado.

Y aquí, con este encabezado se vuelve a repetir el mismo problema, se les ha olvidado cerrar esta etiqueta h3, así que el encabezado, su contenido, es esto, y esto, y esto, y esto, y todo lo que venga a continuación.

¡Mal, muy mal, fatal!

Y bueno, ya está bien de trabajar gratis para una compañía como Renfe que luego me cobra muy bien sus billetes.

Antes de finalizar este vídeo, me gustaría mandarle un afectuoso saludo a Óscar Gorri y a José María Ortiz por haberme señalado este grave error que existe en la página web de Renfe y que estropea la accesibilidad web.

Y con esto finaliza este videotutorial que ha mostrado un grave error, no sólo de accesibilidad, sino de desarrollo web, que existe en una de las páginas más importantes del sitio web de Renfe.

Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.

Consejo 9: Crea listas que realmente son listas

Consejo: crea listas que realmente sean listas. Las listas que no están etiquetadas como listas, como por ejemplo un conjunto de líneas de texto separadas con saltos de línea y con un elemento gráfico a modo de viñeta al principio de la línea dificultan la navegación por el contenido de la página.

Cómo lo hago: utiliza las etiquetas de HTML que se emplean para crear los diferentes tipos de listas: ul, ol, li, dl, dt, dd.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de las listas "de verdad", ya que pueden navegar entre sus elementos y reciben información del elemento en el que se encuentran. Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que si las listas no están correctamente etiquetadas, al eliminar el CSS desaparecerán.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 8: Crea encabezados que realmente son encabezados

Consejo: el Consejo 4: Utiliza encabezados para organizar el contenido de tu página explica que los encabezados ayudan a algunos grupos de usuarios a desplazarse de una parte a otra parte de la página saltando de encabezado a encabezado. Pero crea encabezados que realmente sean encabezados.

Cómo lo hago: los encabezados los tienes que crear con las etiquetas correspondientes de HTML: h1, h2, h3, etc. Crear encabezados con otro tipo de elementos, como divs, para luego darles un estilo especial con CSS no sirve para nada.

Cómo se benefician los usuarios: tal como se explicaba en el Consejo 4, algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, se benefician de los encabezados "de verdad". Además, también se beneficiará cualquier usuario que tenga que visualizar una página web sin CSS, ya que si los encabezados no están correctamente etiquetados, al eliminar el CSS desaparecerán.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

vozMe

vozMe es un servicio gratuito que podemos incorporar en una página web y que permite generar un fichero de audio en formato MP3 en el que se escucha todo o parte del texto que contiene la página.

Esta función, mediante otros sistemas similares, la ofrecen muchos sitios web, como el periódico El Mundo en su apartado Herramientas:

o el periódico 20 Minutos con su versión accesible ofrecida por Inclusite.

En la página Añade voz a tu web se explica cómo incorporar este servicio en los sistemas de blog más conocidos o en cualquier página web.

Consejo 7: Crea contenido para grupos específicos de usuarios

Consejo: aunque esta es una mala práctica, porque al final puedes acabar teniendo varias versiones de una misma página en una misma página (lo cual dificulta su mantenimiento), en algunas situaciones concretas puede ser necesario crear o proporcionar contenido para grupos específicos. Por ejemplo, este consejo ayuda a resolver el problema del Consejo 3: Crea enlaces significativos.

Cómo lo hago: el lenguaje HTML no proporciona un mecanismo propio para lograr este objetivo, así que se tienen que aplicar algunos trucos. Por ejemplo, para ofrecer un contenido específico a los usuarios de lectores de pantalla, no se puede emplear la propiedad de CSS {display: none}, ya que lo oculta en todas las versiones. El truco consiste en desplazar el contenido fuera de la ventana de visualización de la página web y eso se puede lograr de varias formas, cada una con sus ventajas y desventajas. Por ejemplo, una forma es utilizando las propiedades de CSS {position: absolute; left: -5000px;}.

Cómo se benefician los usuarios: se benefician todos los usuarios, ya que podemos ofrecer contenido específico para diferentes grupos.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 6: Proporciona enlaces para saltar partes de la página

Consejo: aunque el Consejo 4: Utiliza encabezados para organizar el contenido de tu página y el Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página ya proporcionan un método para saltar directamente a partes concretas de la página, proporciona también enlaces para saltar partes de la página que tengan un extensión considerable, como por ejemplo, la cabecera, el menú principal, el menú secundario contextual, el contenido principal y el pie de página.

Este consejo se puede confundir con el Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página, ya que son muy similares y se complementan. Pero mientras que el Consejo 5 sugiere colocar una lista de enlaces al principio de la página (Saltar "al" menú principal, Saltar "al" menú secundario, Saltar "al" contenido principal), este consejo sugiere colocar un enlace antes de cada parte para saltarla (Saltar "el" menú principal, Saltar "el" menú secundario, Saltar el contenido principal).

Cómo lo hago: añade un enlace antes de cada parte de la página que tenga una extensión considerable y que al usuario le pueda interesar pasar por encima sin leer su contenido. Para ello tienes que crear puntos concretos (destinos) a los que se pueda saltar en la página. Los puntos concretos los puedes identificar con el atributo id y en el enlace tienes que poner el valor del atributo id precedido por #. Si no quieres que los enlaces se vean en la presentación visual de la página web, utiliza CSS para ocultarlos, pero no utilices {display: none}, ya que lo oculta en todas las versiones. En un próximo consejo veremos cómo ocultar un contenido sólo para ciertos grupos de usuarios.

Cómo se benefician los usuarios: todos los usuarios que utilicen el teclado para manejar el ordenador se pueden beneficiar, ya que normalmente los usuarios no leen las páginas web desde el principio hasta el final, sino que realizan un proceso de exploración visual "saltando de una parte a otra parte de la página", por lo que estos enlaces les pueden ayudar a desplazarse directamente a la parte de la página que les interesa. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que así estos usuarios no tienen que escuchar todo el contenido de la página hasta llegar a la zona que les interesa.


Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 5: Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página

Consejo: aunque el Consejo 4: Utiliza encabezados para organizar el contenido de tu página ya proporciona un método para saltar directamente a partes concretas de la página, proporciona también al principio de la página enlaces para saltar directamente a partes concretas de la página, como por ejemplo, el menú principal, el menú secundario contextual, el contenido principal y el pie de página.

Cómo lo hago: crea una lista de enlaces al principio de la página con destinos a puntos concretos de la página (enlaces intradocumentales). Los puntos concretos los puedes identificar con el atributo id y en el enlace tienes que poner el valor del atributo id precedido por #. Si no quieres que los enlaces se vean en la presentación visual de la página web, utiliza CSS para ocultarlos, pero no utilices {display: none}, ya que lo oculta en todas las versiones. En un próximo consejo veremos cómo ocultar un contenido sólo para ciertos grupos de usuarios.


Cómo se benefician los usuarios: todos los usuarios que utilicen el teclado para manejar el ordenador se pueden beneficiar, ya que normalmente los usuarios no leen las páginas web desde el principio hasta el final, sino que realizan un proceso de exploración visual "saltando de una parte a otra parte de la página", por lo que estos enlaces les pueden ayudar a desplazarse directamente a la parte de la página que les interesa. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que así estos usuarios no tienen que escuchar todo el contenido de la página hasta llegar a la zona que les interesa.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Taller de expertos "Accesibilidad Cognitiva"

El CENTAC, el Centro Nacional de Tecnologías de la Accesibilidad, ha publicado el vídeo del taller de expertos (¡casi 2 horas, por favor, la próxima vez organizarlo en varios vídeos!) Accesibilidad Cognitiva:



Se puede encontrar más información en la página web del taller y en la nota de prensa.

Consejo 4: Utiliza encabezados para organizar el contenido de tu página

Consejo: una página web se compone de diferentes partes (componentes, paneles, secciones, widgets, divs o como las quieras llamar). A cada parte significativa debes ponerle un título que la identifique y debes etiquetar ese título con las etiquetas de encabezado. No utilices las etiquetas de encabezado simplemente para resaltar algún texto de tu página web.

Cómo lo hago: debes emplear las etiquetas de encabezado h1, h2, h3, etc. para ponerle un título a cada parte significativa de tu página. Empieza siempre desde h1 para el título de la página y desciende por la jerarquía de encabezados sin dar saltos (por ejemplo, no saltes de  h2 a h4 sin antes haber utilizado h2). Si alguno de los títulos no quieres que aparezca en la presentación normal de la página, utiliza CSS para esconderlo.

Cómo se benefician los usuarios: todos los usuarios se pueden beneficiar, ya que algunos navegadores como Opera permiten desplazarse en una página web entre los encabezados de la página. Sin embargo, está opción es desconocida por la mayor parte del público. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que los lectores de pantalla suelen proporcionar una lista con los encabezados de la página para que el usuario pueda navegar directamente a ellos.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Consejo 3: Crea enlaces significativos

Consejo: crea enlaces con texto significativo, es decir, con un texto que debe permitir al usuario entender el destino o la función del enlace si el enlace es leído de forma independiente, sin el contexto en el que está situado. Si el enlace está formado por una imagen, entonces el texto alternativo de la imagen debe ser significativo. En una misma página no deben existir enlaces con el mismo texto pero con destinos diferentes.

Cómo lo hago: no hace falta utilizar ningún tipo de marcado de HTML especial, sólo hay que pensar mejor el texto de los enlaces. En última instancia, se puede emplear el atributo title para proporcionar información adicional que ayude a entender el destino o la función del enlace, pero es mejor no abusar de este atributo. Para comprobar la calidad del texto de los enlaces se pueden emplear varias herramientas, como Opera o Fangs, que proporcionan una lista con los enlaces de la página.

Cómo se benefician los usuarios: todos los usuarios se pueden beneficiar, ya que normalmente los usuarios no leen las páginas web desde el principio hasta el final, sino que realizan un proceso de exploración visual "saltando de una parte a otra parte de la página", por lo que muchas veces leen los enlaces de forma aislada. En especial, se benefician los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que los lectores de pantalla suelen proporcionar una lista con los enlaces de la página para que el usuario pueda navegar directamente a ellos.


Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Chrome Daltonize!

El daltonismo o ceguera al color es un defecto genético que afecta principalmente a los hombres y que produce como resultado una incapacidad para distinguir algunos colores entre sí. Aunque el problema principal y más conocido es la imposibilidad para distinguir el rojo y el verde, también existen otros tipos de combinaciones, aunque mucho más raras.

Chrome Daltonize! es una excelente extensión para el navegador Google Chrome que permite simular diferentes tipos de daltonismo sobre la página web que se está visualizando. Ofrece un menú muy sencillo en el que se puede seleccionar el tipo de ceguera al color y si se desea que se simule esa ceguera o si se desea que se filtren los colores para que una persona con esa deficiencia los pueda distinguir correctamente.

Por ejemplo, aquí tenemos la página del periódico El Mundo, con "la roja", y la bandera de Italia que es muy apropiada para comprobar el daltonismo, ya que tiene rojo y verde:

Cuando se simula el daltonismo, se obtiene este imagen:

El cambio es evidente: en la bandera de Italia es imposible distinguir el rojo y el verde, y "la roja", ya no es "la roja". Este simulador no logra cambiar todos los colores de la página, parece que sólo actúa sobre las imágenes.

Además, tiene un modo para ayudar a las personas daltónicas a distinguir mejor los colores que les puede producir confusión. Por ejemplo, esta es la misma página con los colores rojo y verde diferenciados para una persona daltónica:

Consejo 2: Proporciona un texto alternativo para cada zona sensible en un mapa de imagen

Consejo: cuando utilices un mapa de imagen (también llamado mapa sensible), por ejemplo para crear una botonera, una barra de menú o simplemente un mapa para seleccionar una zona en el mapa, debes proporcionar un texto alternativo para cada zona sensible en el mapa de imagen.

Cómo lo hago: debes proporcionar un texto alternativo con el atributo alt en la imagen del mapa (etiqueta img) y en la definición del mapa (etiqueta map) en cada zona sensible del mapa (etiqueta area). Este texto alternativo debe ser significativo y debe poder sustituir a la imagen en igualdad de condiciones.

Cómo se benefician los usuarios: sólo se benefician los usuarios que utilicen un navegador en modo texto o los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que el lector de pantallas lee el texto alternativo de cada zona sensible en el mapa de imagen.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Sistema para controlar un ordenador con la mente de la Universidad de Maastricht

El tema del control del ordenador con la mente aparece muy a menudo en los medios de comunicación. Seguramente será porque a muchas personas les puede parecer verdadera ciencia ficción. Y aunque por ahora, sí que es verdadera ciencia ficción ir a la tienda y comprar un aparato que nos permita controlar el ordenador con el pensamiento, en los laboratorios de investigación (esos que nunca tendremos gracias a los recortes de nuestros gobernantes) ya es una realidad.

Sobre este tema he escrito muchas veces, tantas que puedes encontrar todo lo que he escrito bajo la etiqueta control mental.

Hace unos días se publicó la noticia Un dispositivo permite a personas con parálisis gestionar una conversación. En la noticia nos cuentan que un equipo de investigadores de la Universidad de Maastricht ha desarrollado un dispositivo que puede permitir a las personas que son completamente incapaces de hablar o moverse, gestionar una conversación. La clave para esta comunicación en silencio y en tiempo real, es el primer dispositivo ortográfico de escaneo cerebral en tiempo real.

Esta noticia la podemos encontrar replicada en numerosos sitios, como de costumbre, y en algunos utilizan titulares como Científicos crean primer sistema de escritura a través de nuestro pensamiento a tiempo real. Triste, muy triste, porque no es ni el primero, ni el segundo, ni el tercero, desde hace años existen sistemas que permiten escribir con la mente. Lo que sí que tiene de novedoso este sistema es que utiliza la resonancia magnética nuclear funcional, mientras que los sistemas anteriores utilizaban electroencefalogramas (EEG). Pero no me imagino un aparato de resonancia magnética nuclear de varios millones de euros en el salón de mi casa... Pero ya se sabe lo que dijo Julio Verne, "lo que un hombre imagine, otro lo construirá".

Consejo 1: Proporciona un texto alternativo para las imágenes

Consejo: cuando una imagen transmita información importante (por ejemplo, cuando la imagen contenga texto) o cuando una imagen realice una función importante (por ejemplo, cuando la imagen esté situada en un enlace) debes proporcionar un texto alternativo que pueda sustituir a la imagen en igualdad de condiciones.

Cómo lo hago: debes especificar el atributo alt en todas las imágenes (etiqueta img). Cuando una imagen no necesite un texto alternativo, debes dejar el valor del atributo alt vacío (alt=""), pero siempre debes incluir este atributo en todas las imágenes.

Cómo se benefician los usuarios: todos los usuarios se pueden beneficiar cuando no se pueda visualizar una imagen, por ejemplo, porque la conexión a Internet es lenta o porque no se encuentra la imagen en la ruta indicada. En especial, se benefician los usuarios que utilicen un navegador en modo texto o que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, ya que el lector de pantallas lee el texto alternativo de cada imagen.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Julio, cada día, un consejo sobre accesibilidad web

1 de julio, el inicio de las vacaciones para muchos. Para otros, a seguir trabajando. En cualquier caso, tanto unos como otros, durante este mes podrán aprender un poco más sobre accesibilidad web gracias a un consejo que publicaré cada día a las 12 horas.

Hoy empezaremos con el consejo más conocido: el texto alternativo.

Todos los consejos (se completará conforme se publiquen los consejos):

1. Proporciona un texto alternativo para las imágenes
2. Proporciona un texto alternativo para cada zona sensible en un mapa de imagen
3. Crea enlaces significativos
4. Utiliza encabezados para organizar el contenido de tu página
5. Proporciona al principio de la página enlaces para saltar directamente a partes concretas de la página
6. Proporciona enlaces para saltar partes de la página
7. Crea contenido para grupos específicos de usuarios
8. Crea encabezados que realmente son encabezados
9. Crea listas que realmente son listas
10. Resalta partes del texto con los elementos apropiados
11. Emplea algunas etiquetas olvidadas
12. Especifica el idioma del contenido de cada parte de la página
13. Proporciona un título significativo para cada página
14. Proporciona un título significativo para cada parte individual de una página
15. Usa las tablas sólo para mostrar datos tabulados
16. Haz que las tablas sean accesibles
17. Sitúa el contenido principal al principio de la página
18. Utiliza los colores con precaución
19. Define etiquetas de verdad para los controles de los formularios
20. Establece un orden de tabulación correcto en los formularios y en toda la página
21. Proporciona información de ayuda en los controles de los formularios
22. No señales los controles con datos erróneos de un formulario sólo con el color rojo
23. Limita la longitud de las líneas de texto a 80 caracteres como máximo
24. Proporciona un método para desactivar el audio de una página web
25. Subtitula los vídeos
26. Los ficheros enlazados desde una página web también deben ser accesibles
27. Proporciona manejadores de eventos alternativos
28. Acuérdate de los usuarios que navegan con teclado
29. Utiliza las herramientas automáticas de evaluación de la accesibilidad
30. Navega por tu sitio web como si fueras un usuario con algún tipo de discapacidad
31. Realiza test de evaluación de la accesibilidad con usuarios

Si aplicas todos estos consejos tus páginas no serán 100% accesibles, pero habrás avanzado bastante por el camino de la accesibilidad.

La sordoceguera

Ayer se publicó en el periódico El País el artículo El mundo en las manos. El artículo está dedicado a Gennet Corcuera, la primera titulada universitaria sordociega de España. ¿Sordociega?

En la Wikipedia podemos encontrar la siguiente definición de sordoceguera:

La sordoceguera es una única discapacidad que combina dos deficiencias: la deficiencia visual y la deficiencia auditiva.

Esta discapacidad se caracteriza por razón de que las personas sordociegas solo conocen su entorno más próximo: el que pueden tocar, oler o sentir.

Para comunicarse, los sordociegos lo hacen a través del tacto: lengua de signos apoyada, dactilológico en palma, escritura en mayúsculas en su mano, Braille.

Si no se hace nada para evitarlo, estas personas están resignadas al aislamiento, ya que no les resulta fácil acceder a los medios de comunicación (televisión, prensa convencional o radio), por lo que la sociedad debe concienciarse con el objetivo de entender y solucionar los problemas de este colectivo.

Para comunicarse con personas que no conozcan su sistema de comunicación, se conoce la figura del guía-intérprete, que además de guiarlo en lugares no conocidos o peligrosos, interpretará las interacciones de la persona sordociega con otras personas.

¿Cómo es la vida de un sordociego? Recomiendo el visionado del vídeo La sordoceguera, según Millás (Juan José Millás, el famoso periodista y escritor). Es un vídeo que vale la pena verlo más de una vez.

Volviendo a Gennet Corcuera, la primera titulada universitaria sordociega de España, en el artículo hay varias referencias a los productos de apoyo que utiliza en su día a día:

Gennet tiene además otras cualidades. Aunque no habla —porque no oye ni puede aprender visualmente a hacerlo— Gennet maneja varios idiomas: el de signos apoyado para conversar, el Braille para leer y el alfabeto normal para escribir en el teclado de su ordenador. Sobre sus hombros su mochila siempre va llena con todos los aparatos que necesita para comunicarse: un portátil, un móvil, una línea Braille que le lee todo lo que aparece en la pantalla de ambos aparatos y una tablilla con el alfabeto en relieve por si necesita decir algo y no va acompañada de un mediador. Busca las letras con los dedos y señala “h-o-l-a” para enseñar cómo funciona. A su izquierda normalmente está Almudena.

Y lo que supone para ella el poder acceder a Internet:

Su mayor ventana al mundo, sin embargo, es Internet. “Me interesa estar conectada”. En la Red chatea, envía y recibe correos y lee. “Sé que España juega la final de la Eurocopa”, pone de ejemplo. “Y la ola de calor que estamos sufriendo me tiene muy preocupada”, añade.

¿Y qué ayudas técnicas o productos de apoyo emplean las personas sordociegas? No hay mucha información disponible en Internet sobre este tema. En la página de la ONCE Ayudas técnicas para personas con sordoceguera se muestran diversos productos que usan para todo tipo de actividades. En cuanto al manejo del ordenador, emplean un teclado y una línea braille con un lector de pantallas.

Tres consejos fáciles y efectivos para mejorar la accesibilidad de cara a los usuarios con problemas de visión

Después del pequeño repaso a la vista de los seres humanos que he realizado en la entrada anterior, aquí van tres consejos para mejorar la accesibilidad de las páginas web que ayudarán a todos los usuarios pero en particular a los que usen un lector de pantallas:

1. Texto alternativo: ¿estás escribiendo un texto alternativo adecuado en todas tus imágenes? Recuerda, no todas las imágenes necesitan un texto alternativo, depende del contexto, pero siempre tienes que poner el atributo alt, con texto o vacío (lo que han hecho en la especificación de HTML5, que ya no es obligatorio el atributo alt, no tiene nombre, en mi humilde opinión es una metedura de pata). En especial, cuida el texto alternativo de las imágenes que aparezcan en enlaces.
2. Enlaces significativos: ¿tus enlaces, ya sean textuales o con imágenes mediante su texto alternativo, se entienden por ellos mismos o dependen del contexto donde aparecen? Los enlaces tienen que ser significativos y no deben existir en una misma página enlaces con el mismo texto pero con destinos diferentes.
3. Encabezados: ¿la estructura de tus páginas es correcta? ¿Estás utilizando las etiquetas de encabezados (h1, h2, h3, etc.) de forma consistente y ayudan a navegar por la estructura de la página? No utilices las etiquetas de encabezado simplemente para resaltar algún texto de tu página web.

Si aplicas estos consejos tus páginas no serán 100% accesibles, pero habrás avanzado bastante por el camino de la accesibilidad.

La vista del ser humano

En el tren en el que viajé ayer a Barcelona para coger un avión rumbo a Polonia (no, no es para ir a la Eurocopa, es para asistir a un congreso y una reunión de trabajo) he visto un documental titulado Vista (Sight Human Body) de la serie "El cuerpo humano al límite" (Human Body Ultimate Machine).


La vista es uno de los sistemas más complejos de nuestro cuerpo, claro está, después del cerebro, que es el más complejo con diferencia.

De los 5 sentidos, la vista es el que más usamos. Debido a ello, casi un 70% de las neuronas están de un modo u otro al servicio de la vista.

La vista de los seres humanos ha evolucionado a lo largo de millones de años de evolución y en sus inicios y en realidad en la mayor parte de la historia del ser humano, porque no olvidemos que los últimos 5000 años no son más que una minúscula parte en la historia humana, era un elemento esencial en su supervivencia, primero para protegerse de los peligros de la naturaleza y luego de otros congéneres.

La vista de los humanos es capaz de realizar cosas increíbles: es capaz de enfocar de algo vago a algo concreto en cuestión de milésimas de segundo; es capaz de ver un detalle bajo los destellos del sol o en la sombra al mismo tiempo; es capaz de diferenciar unos 10 millones de colores; y es capaz de muchas otras cosas más.

Hay animales con mejores características visuales para situaciones concretas, como puede ser la visión en la oscuridad en el caso de las aves nocturnas, o la visión térmica en el caso de las serpientes, pero el ojo humano es el que mejores características tiene en general.

Intentar lograr con la visión artificial lo que ha tardado tanto tiempo en crear la naturaleza no es fácil. Es por ello que, aunque existen grandes avances, y ya existen sistemas que son capaces de responder a un CAPTCHA mejor que muchos humanos o reconocer caras entre miles o millones de caras, no existe un sistema de propósito general que pueda ganar a la visión humana.

En realidad, la clave no está en el proceso mismo de visión en sí, en la "cámara", en el proceso de captación de las imágenes, sino en el procesamiento posterior de la imagen. Ya que la visión existe gracias a lo que hace luego el cerebro con las imágenes captadas, no al ojo en sí. Es lo mismo que se suele decir del sexo: el sexo no está en los órganos genitales, sino en el cerebro.

Es por eso que existen intentos de recuperar la visión en personas que la han perdido o no la tienen por problemas en los ojos. La idea es "si hay un problema con la cámara, cambiemos la cámara".

En el año 2005, a Cheri Robertson la trepanaron, es decir, le hicieron dos agujeros en los laterales de su cabeza para implantarle dos placas con 200 electrodos y dos puntos de conexión que permiten conectar un ordenador externo que transmite señales eléctricas a los electrodos. El objetivo final es que Cheri vuelva a ver gracias a las señales que le transmita el ordenador. Desgraciadamente, por ahora los expertos sólo han activado 10 de los 200 electrodos y Cheri sólo es capaz de distinguir algunas fuentes de luz.

Otro ejemplo que aparece en el documental es el de Michael, que es ciego desde los 3 años debido a una explosión. 40 años después, una operación de sustitución de la córnea permitió a Michael recuperar la vista, pero no la visión: su cerebro no reconoce lo que ve. ¿Por qué? Bien sencillo: para poder leer un libro no basta con poder mirar, hace falta algo más.

El problema de recuperar la visión es mayor de lo que uno puede esperar. ¡No nacemos con una memoria visual! La memoria visual se va llenando conforme avanza la vida, viene dada por la experiencia. ¿Cómo se puede reconocer una sonrisa si nunca se ha visto ninguna?

Los expertos afirman que la memoria visual, nuestro archivo visual, se crea principalmente durante los 6 primeros años de vida. Durante esos años aprendemos a interpretar la profundidad, el tamaño, los colores, etc.

Michael se encuentra en el limbo entre la ceguera y la visión. Tiene que aprender a "ver": su memoria visual va creciendo día a día, pero ya se sabe que la plasticidad del cerebro no es la misma con 6 años que con 40 años y los procesos de aprendizaje son más lentos conforme uno se va haciendo mayor.

Y una palabra nueva que he aprendido gracias a este documental: sacada. La sacada es el movimiento que realiza el ojo, el salto que se produce al fijar la mirada de un punto de focalización a otro.

No dejes de leer mi próxima entrada, Tres consejos fáciles y efectivos para mejorar la accesibilidad de cara a los usuarios con problemas de visión.

[Actualización 2/7/2012]
A los pocos días de publicar esta entrada apareció la noticia Cámaras mejores que la visión humana. Sin embargo, la cámara a la que hace referencia la noticia es mejor en cuanto a resolución (cinco veces mejor que la visión humana), pero respecto a otros parámetros no dice nada.

Muy interesante también lo que dice al final: "Curiosamente, sólo alrededor del tres por ciento de la nueva cámara está hecha de elementos ópticos, mientras que el resto consiste en electrónica y procesadores". El resto, es el cerebro.

Control del ordenador con la mente para poder hablar

El tema del control del ordenador con la mente es algo que me fascina bastante y que creo que es el futuro de la interacción hombre-ordenador. Pero aunque lo podamos imaginar, falta bastante para que se convierta en una realidad diaria. Sin embargo, hay mucha gente trabajando en ello y hay interesantes propuestas, muchas de ellas orientadas a desarrollar productos de apoyo para personas con discapacidad.

Acabo de leer el artículo Stephen Hawking podría comunicarse gracias al procesamiento de sus ondas cerebrales. Resulta que Stephen Hawking, que sufre una enfermedad motoneuronal relacionada con la ELA (Esclerosis Lateral Amiotrófica) y que hace uso de un sintetizador de voz que controla con la vista para poder hablar desde hace años, está teniendo problemas para seguir utilizando su sintetizador de voz. Así que, un equipo de la Universidad de Stanford se ha propuesto trabajar en un dispostivo con el que se pueda interpretar la actividad cerebral de Hawking para hacer “hablar a un computador”.

En proyectos similares, se ha logrado que una persona pueda controlar el cursor del ratón en un ordenador, mover una silla de ruedas eléctrica o incluso escribir un correo electrónico. Pero en todos los casos, el usuario debe realizar muchos ejercicios de entrenamiento, el sistema necesita numerosos ajustes y la velocidad con la que se dan las instrucciones es muy baja.

Curso Web accesible y servicios de apoyo en la universidad para todos

Los próximos días 2, 3 y 4 de julio de 2012 la UNED organiza un año más el curso Web accesible y servicios de apoyo en la universidad para todos. Forma parte del programa de Cursos de Verano de la UNED y se celebrará por quinto año consecutivo en el Centro Asociado de Plasencia, Cáceres.


El curso tiene una duración de 20 horas y en la descripción del curso dice:

Este curso muestra las buenas prácticas para hacer que en los procesos de enseñanza y aprendizaje los servicios y contenidos web sean accesibles para todos los estudiantes, incluidos aquellos que tienen alguna discapacidad. Se hará especial hincapié en todos aquellos procesos que, relacionados con la accesibilidad a la Web y a los materiales de aprendizaje, tienen como objetivo mejorar las condiciones en las que se enseña y se aprende. Se estudiarán los servicios que son necesarios en la Universidad para garantizar dichas condiciones.

Para aquellos que no puedan asistir al curso en persona, se retransmitirá en directo por Internet con acceso restringido a todas aquellas personas matriculadas que no se desplacen a las instalaciones del Centro Asociado de Plasencia.


Gracias a Álvaro Domingo por el aviso.

Cómo ordenar las propiedades de CSS con prefijos específicos de vendedor

Hace unos meses escribí la entrada Cada vez que llamas a una característica propietaria "CSS3", un gatito muere, que recibió bastantes visitas, seguramente por lo de "un gatito muere". En esa entrada se hablaba de las propiedades de CSS con prefijos de vendedor, como -moz para Mozilla y -o para Opera, que son propietarias del vendedor, es decir, que no forman parte de la especificación oficial, pero que mucha gente cree que sí que forman parte de la especificación. La entrada terminaba con este consejo:

La regla de oro es fácil: evita por completo las características propietarias. No las uses, no las evangelices, y sin duda alguna, no dependas de ellas.

Sin embargo, hay otras propiedades de CSS que forman parte de la especificación oficial (que quizás todavía no ha alcanzado el nivel de recomendación) y aún así también se utilizan con prefijo porque algunos navegadores las soportan de forma experimental o porque no está clara cuál será la forma correcta de usarla (ya que aún no es recomendación oficial).

Cuando se usan estas propiedades, se aconseja escribirlas también sin prefijo, por compatibilidad con los navegadores futuros que sí que la soportaran. Y aquí es donde surge la duda:

¿En qué orden se deben escribir las propiedades con prefijo y sin prefijo?

Siempre he pensado que la propiedad sin prefijo debe ir la última, para que sea la que al final predomine cuando se aceptada por todos los navegadores. Pero alguna vez he discutido con alguna persona por este tema.

Ahora acabo de encontrar el artículo Ordering CSS3 Properties, del año 2010, que explica de una forma muy clara cuál es el problema de escribirlo de una forma u otra y, por tanto, señala cuál es la forma correcta: la propiedad sin prefijo debe ir siempre la última.

Por ejemplo, la forma correcta de utilizar la propiedad border-radius es:

.not-a-square {

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

}
Y si un artículo no te convence de que esta es la forma correcta, ahí va otro que dice lo mismo: Remember non-vendor-prefixed CSS 3 properties (and put them last).

Proyecto APSIS4all

El proyecto APSIS4all, de nombre impronunciable, tiene como fin el superar algunas de las barreras de accesibilidad de los dispositivos electrónicos de uso público.

APSIS4all tiene por objetivo personalizar para "todos" los usuarios los dispositivos electrónicos de uso público, como pueden ser cajeros automáticos o máquinas expendedoras de tickets y billetes de transporte.

Para asegurarse de que los servicios que se desarrollan en el proyecto APSIS4All pueden ser usados por todos, se ha creado un formulario online para recabar la opinión de los usuarios potenciales. Así será posible adaptar la tecnología a las necesidades y preferencias de las diferentes personas.

El que quiera colaborar con el proyecto se puede inscribir en el siguiente enlace: Encuesta cajeros accesibles proyecto APSIS4all.

Dyslexie, una tipografía para mejorar la accesibilidad para las personas con dislexia

La dislexia es una de esas condiciones que se engloba en el cajón de sastre de las discapacidades cognitivas o intelectuales. En la Wikipedia podemos encontrar la siguiente definición de dislexia:

Se le llama dislexia (del griego δυσ- dificultad, anomalía y λέξις habla o dicción) a la dificultad en la lectura que imposibilita su comprensión correcta. Aunque convencionalmente el término se aplique también a la dificultad para una correcta escritura, en este caso el término médico apropiado es el de disgrafía. En términos más técnicos, en psicología y psiquiatría se define la dislexia como una discrepancia entre el potencial de aprendizaje y el nivel de rendimiento de un sujeto, sin que existan cualquier tipo de problema, ya sea sensorial, físico, motor o deficiencia educativa (según el DSM-IV).

Una vez tuve una alumna que era disléxica (seguramente habré tenido más, pero pasan desapercibidos) y era realmente brillante. Y son muchos los casos de famosos que se emplean de ejemplo de disléxicos con éxito, aunque quizás en muchos casos sean "leyendas urbanas". En realidad, no creo que sea positivo realizar estas distinciones, nadie comenta que "Pepito ha tenido éxito a pesar de llevar gafas", pero bueno, ahí queda mi comentario.

El proyecto Dyslexie es una tipografía desarrollada específicamente para facilitar la lectura de textos por parte de personas con dislexia. Según la página del proyecto, estudios independientes realizados por la Universidad de Twente en los Países Bajos han demostrado que las personas con dislexia cometen menos errores al leer textos con esta tipografía.

¿Cuál es el problema con las tipografías normales? En las tipografías normales suele primar el carácter estético antes que el funcional o práctico, aunque esto último también se tiene en cuenta en muchas ocasiones con el fin de mejorar la legibilidad de los textos.

Sin embargo, en las tipografías normales muchos caracteres son muy parecidos, como las combinaciones v/w, i/j y m/n. Además, las personas con dislexia a veces manifiestan un efecto en espejo y pueden confundir letras como b/d o p/q. Y según la tipografía, también pueden confundir c/o, i/l/1, etc.

En Dyslexie, las diferencias entre las letras conflictivas se ha enfatizado, con el fin de reducir las posibles confusiones. En la página The typeface Dyslexie se explican 10 correcciones que se han realizado.

Este tipo de letra no es gratuita, pero tiene diferentes precios según el uso que se le vaya a dar (personal, educativo o empresarial).

El problema que veo en esta tipografía es que quizás pueda empeorar la experiencia de los usuarios que no sufren dislexia. Se lo preguntaré a mi amigo Daniel Rodríguez Valero, experto en tipografía digital.

Subtítulos automáticos en español en YouTube

A principios del año 2010 aparecieron los subtítulos automáticos en YouTube: mediante un sistema automático de reconocimiento del habla, YouTube es capaz de crear automáticamente los subtítulos. Este sistema no es muy fiable, depende de la calidad del audio y de la forma de hablar de las personas. Sin embargo, la segunda opción que tiene el sistema, sincronizar una transcripción que nosotros le proporcionamos con el audio, sí que es mucho más fiable. Además, una vez sincronizado, permite descargar los subtítulos con las marcas de tiempo para poderlos reutilizar en otros entornos.

Desgraciadamente, este sistema sólo estaba disponible para el inglés. Hasta ahora. YouTube acaba de anunciar en Subtítulos automáticos de YouTube ahora disponibles en español que esta opción ya está disponible para el español. En esa página se puede encontrar un vídeo de ejemplo para probar esta opción y en la página YouTube automatic captions now available in Spanish podemos encontrar otro ejemplo de vídeo, está vez de Casillas hablando de la Eurocopa.

Sí, el sistema falla mucho, pero es un gran avance (el que lo critique, que lo intente hacer mejor).

¿Por qué utilizo eXaminator para realizar análisis?

Ya son varias las personas que me han mandado un correo electrónico, o me han dejado un comentario como ayer en mi entrada Accesibilidad de los principales diarios digitales, avisándome de que quizás no sea conveniente utilizar eXaminator para realizar los análisis de accesibilidad, ya que esta herramienta se basa en WCAG 2.0.

¿Y cuál es el problema? El problema es que en España la norma que se tiene que aplicar no es esa, sino WCAG 1.0. Aunque en realidad, si fuésemos totalmente estrictos, en España tampoco se usa esa norma, sino la Norma UNE 139803:2004 y, por tanto, tampoco podríamos utilizar otras herramientas como TAW, ya que no se basan en esa norma para realizar un análisis.

Pero en realidad, ¿cuál es el problema? ¿Mi propósito era realizar un análisis para comprobar si los sitios web analizados se ajustaban a la legislación actual? No, ese no era mi propósito. Mi propósito era detectar problemas significativos de accesibilidad, y con esa herramienta los puedo detectar rápidamente.

En realidad, y si fuésemos otra vez estrictos, incluso suponiendo que en algún momento la legislación española se adaptase a WCAG 2.0, eXaminator no es una herramienta exhaustiva que verifique todo WCAG 2.0, por lo que sus resultados serían parciales. Lo podemos leer en la página principal:

El score adjudicado por eXaminator es un indicador rápido de la accesibilidad pero la evaluación automática no puede abarcar todos los criterios de conformidad de las WCAG 2.0.

eXaminator es una herramienta de evaluación automática de la accesibilidad web, como TAW, AChecker y muchas otras, y ninguna de ellas es capaz de detectar todos los problemas de accesibilidad que contiene una página web. Es más, incluso muchas veces pueden informar de errores que realmente no son errores, ya que todo depende del contexto concreto.

Todas estas herramientas son una ayuda, no son la herramienta definitiva. Pero para realizar un análisis de 5 minutos y tener una idea general de la accesibilidad de una página, son adecuadas.

[Actualización 06/05/2013]
Un artículo que defiende la idea de hacer primero una evaluación automática: Web Accessibility Testing: Do Automatic Testing First.

Accesibilidad de los principales diarios digitales

En una entrevista que me han realizado sobre los diarios digitales me han preguntado si algún medio español aprueba la asignatura de la accesibilidad web. Esta pregunta no se puede contestar sin analizar primero la accesibilidad de todos los diarios digitales. Por tanto, una respuesta de "sí o no" sería muy simplista y maniquea: para que se entienda, sería como preguntar si todos los políticos son unos corruptos... aunque quizás muchos tengamos clara la respuesta a esa pregunta.

Volviendo a los diarios digitales, he realizado una exploración (no se puede considerar un análisis) de la accesibilidad web de los principales diarios digitales en España. Para la elección de los diarios me he basado en Comparativa de periódicos de España, ya que en la web de OJD me tenía que registrar para acceder a la información (y quizás luego pagar). Los diarios que he explorado con la herramienta eXaminator son Marca, 20 Minutos, Qué, El País y El Mundo, que figuran entre los primeros en cuanto al número de lectores. Como esperaba, los resultados no son muy positivos, según eXaminator todos suspenden:

• Marca: 3,0 en modo estándar y 2,8 en modo estricto.
• 20 Minutos: 3,8 en modo estándar y 2,9 en modo estricto.
• Qué: 4,2 en modo estándar y 3,6 en modo estricto.
• El País: 3,5 en modo estándar y 3,1 en modo estricto.
• El Mundo: 4,0 en modo estándar y 3,5 en modo estricto.

Como de costumbre, estos resultados deberían de ser estudiados cuidadosamente por un experto en accesibilidad web, pero de entrada, "la cosa pinta muy mal".

A continuación, unas capturas de pantalla de los resultados que ofrece eXaminator:

Marca:

20 Minutos:

Qué:

El País:

El Mundo: