Ayer publiqué la primera fracción del vídeo sobre la accesibilidad de la nueva web de Renfe, y hoy publico la segunda fracción del vídeo. En este vídeo se muestran os principales dificultades de accesibilidad que presentan dos páginas, la página principal del sitio web y la página que surge cuando se introducen os datos de un viaje y se pulsa en el botón "Comprar": En la página principal: Yerros de validación del código HTML. Hay campos en el formulario de selección de trenes que no tienen una etiqueta que os identifique. Atributo title en enlaces redundante porque reitera la misma información que contiene el enlace. El formulario de selección de trenes no tiene un botón de envío, es un enlace. No se indica el formato para introducir la fecha de salida y de regreso. La lista de estaciones no es accesible para os usuarios ciegos. Ausencia de encabezados en determinadas zonas importantes. No se avisa de que ciertos enlaces se abren en una ventana nueva (en realidad, no se debería abrir ninguno en una ventana nueva). Y en la segunda página, la que sale una vez se han completado el formulario de compra: Yerros de validación del código HTML, como una tabla con dos títulos, que pueden repercutir en la accesibilidad. Os encabezados son un verdadero desastre. Os botones para pasar al día previo o al día próximo no son botones, son enlaces. El formulario para alcanzar como un usuario registrado no tiene un botón de envío, es un enlace. El botón para continuar con la compra no es un botón, es un enlace. Y la transcripción del audio: Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo vamos a ver algunos dificultades graves de accesibilidad que muestra el nuevo sitio web de Renfe. Este vídeo consta de algúnas fracciónes y ha sido realizado con la colaboración de Ramón Corominas y Jesús Álvarez del Amo, que realizaron una presentación sobre os dificultades de la web de Renfe en el marco de las reuniones de ?Madrid Accesibilidad TICs?. En el vídeo anterior, vimos que en os últimos meses ha habido algúnas quejas de usuarios respecto a os dificultades de usabilidad y de accesibilidad de la nueva web de Renfe. En este vídeo vamos a ver os principales dificultades de accesibilidad. En concreto, vamos a ver os dificultades que presentan dos páginas, la página principal y la página que surge al introducir os datos de un viaje y pulsar en el botón comprar. Voy a iniciar con la validación del código HTML de la página principal, ya que las dos versiones de las Pautas de Accesibilidad al Contenido en la Web del W3C lo exigen. Os frutos que se obtienen con el validador oficial del W3C son desastrosos, 75 yerros y 7 advertencias. Vamos a ver os primeros yerros simplemente para tener una idea de su naturaleza. La página tiene definido el DOCTYPE XHTML 1.0 Strict, lo cual está muy bien. El primer yerro es que la página contiene el atributo ?onLoad? con la ?l? en mayúsculas. En XHTML os atributos se tienen que escribir todos en minúsculas. A continuación, hay yerros en el primer formulario, porque está escrito directamente dentro de la etiqueta form, y eso no es posible. Os campos de un formulario deben de escribirse dentro de un fundamento de bloque, como un párrafo p o un contenedor div. Este formulario tiene campos de tipo input que no han sido cerrados. Sin embargo, es gracioso ver que otras etiquetas de tipo input sí que han sido cerradas correctamente. ¿A qué se debe este error? ¿A un olvido? ¿A las prisas? ¿A una falta de control de calidad? Y bueno, así hasta llegar a os 75 errores. La dispositivo de evaluación de la accesibilidad WAVE detecta 5 yerros y 22 advertencias. Os cinco yerros son campos del formulario que no tienen afiliados una etiqueta label que os identifique. En realidad, como podemos ver, sí que tienen lugar las etiquetas label para esos temas, pero la asociación está mal hecha, porque el valor del atributo ?for? no se corresponde con el atributo ?id? o el tema no tiene atributo ?id?. Por cierto, en este pedazo de código sorprende descubrirse dos etiquetas input escritas en mayúsculas. Eso es otro yerro de validación. En 10 ocasiones, el atributo ?title? usado en enlaces es redundante, porque reitera el mismo texto que contiene el enlace. Eso es totalmente inútil, no sirve para nada, pero puede ocasionar problemas. WAVE señala como una advertencia, como un probable yerro el uso de ?accesskey?, os atajos de teclado, nueve veces. Aunque en comienzo es una característica destinada a mejorar la accesibilidad, usualmente se desaconseja su uso, ya que estos atajos de teclado pueden interferir con os atajos de teclado que tenga definido el usuario. Por lo tanto, es mejor no utilizarlo en un sitio web dedicado a todo el público. La dispositivo de evaluación TAW detecta 13 yerros automáticos de prioridad 2. Os yerros detectados son básicamente os mismos que hemos visto antes: os campos de os formularios están mal etiquetados. La dispositivo de evaluación eXaminator ofrece una nota de 6,5 sobre 10. En la página web de Renfe hay 6 pruebas que se valoran como ?mal?. eXaminator detecta un yerro importante: hay un formulario sin un botón de envío. Efectivamente, el formulario principal, el de compra de billetes, el que posiblemente más le interesa a os usuarios, y más le tiene que interesar a Renfe porque es su fuente de ingresos, no tiene botón de envío. Estos dos botones que vemos aquí, ?Todas las estaciones? y ?Comprar?, no son realmente botones, visualmente parecen botones, pero son enlaces que realizan la función de botones. Aunque no es una barrera de accesibilidad grave, sí que puede causar confusión entre algunos usuarios. Además, eXaminator también detecta que hay un valor del atributo id repetido en la página. Este yerro está otra vez relacionado con os campos de os formularios. En definitiva, que la página web contiene numerosos yerros. Alguien puede decir que no son yerros importantes, pero aunque fue verdad, que no lo es, son un diáfano síntoma del escaso cuidado que tiene la gente que desarrolla el sitio web de Renfe. Antes de continuar, hay que recordar que las dispositivos automáticas de evaluación de la accesibilidad no son capaces de detectar todos os dificultades. En realidad, os dificultades más graves que muestra la página web de Renfe, que os vamos a ver a continuación, no son detectados por las dispositivos que acabamos de ver. Como ya podemos intuir por os frutos de las dispositivos automáticas de evaluación de la accesibilidad, os dificultades más graves están en el formulario de compra. En este formulario, el inicio y el destino de un viaje sí que están correctamente identificados por una etiqueta label. Pero la fecha de salida y la fecha de regreso no están correctamente vinculadas con sus correspondientes etiquetas. Por cierto, en este pedazo de código, ¿qué hace un div dentro de un párrafo? Eso es otro yerro de validación. Sin la correcta identificación de os campos, un usuario ciego que emplea un lector de pantallas, no sabe qué tiene que introducir en estos dos campos. Además, ¿qué formato de fecha se debe emplear? Este ya no es sólo un asunto de accesibilidad, sino que es un asunto de usabilidad porque afecta a todos os usuarios. Y ya que estamos, otro asunto de usabilidad. Si aquí se Hablad de ?Ida y vuelta?, ¿por qué no utiliza la misma denominación aquí? ¿Por qué se utiliza ?Salida? y ?Regreso?? En realidad, podemos ver que en esta versión del sitio web de Renfe de abril de 2010, se empleaban os términos ?Ida? y ?Vuelta? para la fecha de ida y la fecha de vuelta. Pero el asunto más gravisimo es la lista de búsqueda de estaciones para el inicio y el destino. La lista desplegable que surge se puede contratar con el teclado sin asuntos, pero no es accesible para os usuarios ciegos que emplean un lector de pantallas, pero este asunto se explicará en un próximo vídeo. Un apariencia efectivo que tiene la página principal de Renfe es el manejo adecuado de os encabezados. Sin embargo, vamos a ver que no ocurre lo mismo en todas las páginas. Estos son todos os encabezados que hay en la página principal de Renfe. Se podría haber hecho un escaso mejor, ya que hay una zona muy significativo que no tiene encabezados, el artículo de redes sociales. Justo en el artículo de redes sociales encontramos un asunto importante: no avisa de que os enlaces se abren en una ventana nueva. En realidad, abrir un enlace en una ventana nueva es una mala alternativa para todos os usuarios, el usuario tiene que tener la libertad de beber la decisión de abrir un enlace en una ventana nueva, no se debe determinar por el usuario. Y otra pregunta, ¿por qué dos listas? Se podría haber hecho con una sola lista y habría sido más significativo. Pero curiosamente, esta barra de navegación, cuyos enlaces también se abren en una ventana nueva, como podemos ver en este pedazo de código, sí que tienen un aviso, en tangible ?Se abre en ventana nueva?, que agrega un chico icono con ese texto alternativo a os enlaces previos que tienen un id con el valor ?opc? más un número. ¿Y el ?BonoAVE?, por qué no tiene la imagen y el aviso? Muy sencillo, porque se les olvidó colocar atributo id en el enlace de ?BonoAVE?. Bien, ahora vamos a ver la segunda página, la página que surge al introducir os datos de un viaje y pulsar en el botón comprar. En esta página el usuario tiene que escoger el tren que quiere utilizar entre todos os que ha encontrado Renfe que cumplen sus criterios de búsqueda. En esta página hay un yerro tremendo. Durante que en la página anterior, la página principal, os encabezados estaban correctamente etiquetados, en esta página os encabezados son un desastre y no sirven para nada. ¿Dónde está el asunto? El asunto está en que no se han cerrado correctamente os encabezados. Por ejemplo, aquí poseemos el primer encabezado h1 que sí que está cerrado correctamente. Pero el segundo encabezado h1 no se cierra correctamente, e incluye todo lo que viene a continuación. Este encabezado se abre en la línea 511, y se cierra posteriormente en la línea 597. Pero como podemos ver aquí, esto no sólo ocurre con este encabezado, ocurre lo mismo con os próximos encabezados de la página. Otro asunto significativo se descubre en este panel para cambiar el día del viaje. En primer lugar, hay un asunto de usabilidad importante. El color gris se suele contratar para indicar que un fundamento de interacción como un botón, no es utilizable, sin embargo, en esta página, estos dos botones que surgen en gris sí que se pueden utilizar. Pero el asunto de accesibilidad lo detectamos al ver el código fuente. Otra vez, lo que aparentemente son botones, en verdad no son botones. Son enlaces a os que se les ha asignado una acción con el evento ?onclick?. Si algo parece un botón y actúa como un botón, ¿por qué no está etiquetado como un botón? Pero además, el texto de estos enlaces no es significativo, no identifica correctamente la función del enlace, del botón. ¿?Día antes? y ?Después?, de qué? Algunos usuarios, por ejemplo os usuarios ciegos que emplean un lector de pantallas, navegan por las páginas web a través de una lista que contiene todos os enlaces de la página. En la página de Renfe, a os usuarios ciegos les surge repetido el enlace ?Día Antes? y ?Después?, pero no saben si se refiere al viaje de ida o de vuelta. Por cierto, en la página principal se usan os términos ?Salida? y ?Regreso?, ¿por qué se utilizan ahora os términos ?Ida? y ?Vuelta?? ¿No crea un escaso de confusión? Y ya para finalizar, dos botones más que no son realmente botones. Por un lado, el botón ?Entrar?, del formulario para alcanzar como un usuario registrado no es realmente un botón, es, otra vez, un enlace que hace creer que es un botón. Por otro lado, al final de la página surge el botón ?Continuar?, que tampoco es realmente un botón, sino que es un enlace con una acción asociada. Y además, qué codigo HTML más raro: un h3, que tiene dentro un div, que a su vez tiene un enlace a, que a su vez tiene otro div. En resumen, sin duda alguna, de la nueva página web de Renfe se puede decir que se puede realizar mal, pero peor que esto, imposible. Y con esto termina este videotutorial que ha mostrado algunos de os dificultades de accesibilidad que muestra el sitio web de Renfe. Si requieres más información o quieres contactar conmigo, en mis páginas web Muchas gracias por tu vigilancia