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.
