Aná lisis de lá áccesibilidád del sitio web de...

Aná lisis de lá áccesibilidád del sitio web de Renfe

Sergio Luján Mora

[email protected]

@sergiolujanmora

23/7/2015

2

Contenido Resumen ........................................................................................................................................ 6

Introducción .................................................................................................................................. 7

Objetivo ..................................................................................................................................... 7

Fundamentos de derecho ......................................................................................................... 8

Análisis previos .......................................................................................................................... 9

Criterio de evaluación ............................................................................................................... 9

Alcance de la evaluación ......................................................................................................... 10

Fecha de realización ................................................................................................................ 11

Autor ....................................................................................................................................... 11

Herramientas utilizadas .......................................................................................................... 11

Información adicional .............................................................................................................. 11

Compra de un billete ................................................................................................................... 12

Introducción de los datos iniciales .......................................................................................... 13

Disponibilidad .......................................................................................................................... 30

Tarifas ...................................................................................................................................... 43

Identificación ........................................................................................................................... 51

Pago ......................................................................................................................................... 55

Cambio de un billete ................................................................................................................... 57

Anulación de un billete ............................................................................................................... 66

Registro de usuario ..................................................................................................................... 74

Otros problemas de accesibilidad ............................................................................................... 82

Anexo 1: Página principal ............................................................................................................ 89

Anexo 2: Disponibilidad............................................................................................................. 103

Anexo 3: Tarifas ......................................................................................................................... 122

Anexo 4: Identificación .............................................................................................................. 131

3

Figura 1: Página principal de Renfe ............................................................................................... 8

Figura 2: Pasos en el proceso de compra de un billete ............................................................... 12

Figura 3: Página principal de Renfe ............................................................................................. 13

Figura 4: Código fuente de la página principal - selección de idioma ......................................... 26

Figura 5: Código fuente de la página principal - uso de fieldset y legend .................................. 27

Figura 6: Código fuente de la página principal - enlaces partidos .............................................. 28

Figura 7: Código fuente de la página principal - listas con un único elemento .......................... 29

Figura 8: Página web "Disponibilidad" ........................................................................................ 30

Figura 9: Lista de enlaces de la página web "Disponibilidad" - enlaces con un mismo texto ..... 31

Figura 10: Lista de enlaces de la página web "Disponibilidad" - enlaces con un mismo texto .. 32

Figura 11: Código fuente de la página "Disponibilidad" - encabezado “Selección de Idiomas” . 32

Figura 12: Lista de encabezados de la página web "Disponibilidad" .......................................... 33

Figura 13: Código fuente de la página web "Disponibilidad" - encabezado no cerrado ............. 34

Figura 14: Código fuente de la página web "Disponibilidad" - encabezado no cerrado ............. 34

Figura 15: Encabezados de la página web "Disponibilidad" ....................................................... 35

Figura 16: Fragmento de la página web "Disponibilidad" ........................................................... 36

Figura 17: Página web "Tarifa" .................................................................................................... 43

Figura 18: Código fuente de la página "Tarifas" .......................................................................... 43

Figura 19: Lista de encabezados de la página web "Tarifas" ...................................................... 44

Figura 20: Código fuente de la página web "Tarifas" - encabezado no cerrado ......................... 45




Figura 24: Encabezados de la página web "Tarifas" .................................................................... 47

Figura 25: Fragmento de la página web "Tarifas" ....................................................................... 47

Figura 26: Solicitud del servicio Atendo ...................................................................................... 49

Figura 27: Solicitud del servicio Atendo ...................................................................................... 49

Figura 28: Formulario para la solicitud del servicio Atendo........................................................ 49

Figura 29: Código fuente de la página “Tarifas” - trampa de teclado ......................................... 50

Figura 30: Página web "Identificación" ....................................................................................... 51

Figura 31: Encabezados de la página web "Identificación" ......................................................... 52



Figura 34: Formulario en la página web "Identificación" ............................................................ 53

Figura 35: Mensaje de error en la página web "Identificación" ................................................. 54

Figura 36: Página web "Pago" ..................................................................................................... 55

Figura 37: Página web con aviso de cambio a la entidad bancaria ............................................. 56

Figura 38: Página web con mensaje de error en el pago ............................................................ 56

Figura 39: Página principal con enlace "Cambios" ...................................................................... 57

Figura 40: Página web para realizar un cambio de billete .......................................................... 58

Figura 41: Código fuente de la página web para realizar un cambio de billete - título de la

página .......................................................................................................................................... 59

Figura 42: Código fuente de la página web para realizar un cambio de billete .......................... 59

Figura 43: Código fuente de la clase "oculto" ............................................................................. 60

4

Figura 44: Código fuente de la página web para realizar un cambio de billete - encabezado sin

contenido .................................................................................................................................... 60

Figura 45: Encabezados confusos en la página para realizar un cambio de billete .................... 61

Figura 46: Encabezados confusos en la página para realizar un cambio de billete .................... 61

Figura 47: Código fuente de la página web para realizar un cambio de billete - encabezado no

cerrado ........................................................................................................................................ 62

Figura 48: Código fuente de la página web para realizar un cambio de billete - asignación

incorrecta de <label>................................................................................................................... 62

Figura 49: Código fuente de la página web para realizar un cambio de billete - asignación

incorrecta de <label>................................................................................................................... 63

Figura 50: Imagen con contenido textual representado en forma de gráfico ............................ 63

Figura 51: Código fuente de la página web para realizar un cambio de billete - alternativa

textual incorrecta ........................................................................................................................ 64

Figura 52: Mensaje de error en la página web para realizar un cambio de billete..................... 64

Figura 53: Página principal con enlace "Anulaciones" ................................................................ 66

Figura 54: Página web para realizar una anulación de billete .................................................... 66

Figura 55: Código fuente de la página web para realizar una anulación de billete - título de la

página .......................................................................................................................................... 67

Figura 56: Código fuente de la página web para realizar una anulación de billete .................... 68


Figura 58: Código fuente de la página web para realizar una anulación de billete - encabezado

sin contenido ............................................................................................................................... 69

Figura 59: Encabezados confusos en la página para realizar una anulación de billete .............. 69

Figura 60: Encabezados confusos en la página para realizar una anulación de billete .............. 70




Figura 64: Imagen con contenido textual representado en forma de gráfico ............................ 72


Figura 66: Mensaje de error en la página web para realizar una anulación de billete ............... 73

Figura 67: Página principal con enlace "Mi Cuenta" ................................................................... 74

Figura 68: Página con enlace "Registrar" .................................................................................... 74

Figura 69: Página web para realizar un registro como nuevo usuario ........................................ 75

Figura 70: Código fuente de la página web para realizar un registro como nuevo usuario ....... 76



Figura 73: Casilla de verificación ................................................................................................. 77






Figura 79: Mensaje de error en la página web para realizar un registro como nuevo usuario .. 80

Figura 80: Imagen sin texto alternativo ...................................................................................... 82

Figura 81: Página web “Reputación Corporativa” ....................................................................... 82

5

Figura 82: Código fuente de la página “Reputación Corporativa” .............................................. 83

Figura 83: Foco en el enlace "Welcome" .................................................................................... 87

Figura 84: Foco en el botón "Buscar" .......................................................................................... 87

Figura 85: Foco en el cuadro de texto "Origen" .......................................................................... 88

6

Resumen A partir del 31 de diciembre de 2008, el sitio web de Renfe (http://www.renfe.com/) debía

cumplir el nivel intermedio AA de la Norma UNE 139803:2004. A partir de 2012, debía cumplir

el nivel intermedio AA de la Norma UNE 139803:2012. Sin embargo, varios análisis realizados a

lo largo de los últimos años demuestran que el sitio web de Renfe no cumple la legislación

española que impone la obligación de que su sitio web sea accesible. En el análisis que se

presenta en este documento se muestran algunos ejemplos de incumplimiento de la

obligación establecida.

Según la legislación española, esta infracción puede ser sancionada con una multa de un

máximo de 1.000.000 de euros.

http://www.renfe.com/

7

Introducción

Objetivo Este análisis se ha realizado entre los días 18 y 22 de julio de 2015. El sitio web analizado

corresponde a la empresa Renfe:


La identificación de la empresa Renfe está disponible en:

http://www.renfe.com/empresa/informacion_legal/index.html

El objetivo de este análisis no es detectar todos los errores de accesibilidad de este sitio web,

sino demostrar que no es cierto que el sitio web de Renfe es accesible e incumple la legislación

española. Para ello sólo es necesario encontrar alguna parte del sitio web que no sea accesible,

ya que un sitio web no se puede considerar que sea accesible si ciertas partes no lo son.

Renfe ha manifestado varias veces que su sitio web es accesible, tal como se puede leer en la

propuesta de resolución del Ministerio de Sanidad, Servicios Sociales e Igualdad de fecha 7 de

julio de 2015:

1. Página 1: Se recibe escrito de contestación de RENFE-OPERADORA, de fecha 22 de

mayo de 2013 (doc. 6), manifestando que la web www.renfe.es cumple con los

requisitos de accesibilidad exigidos por el Real Decreto 1494/2007 de 12 de

noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el

acceso de las personas con discapacidad a las tecnologías, productos y servicios

relacionados con la sociedad de la información y medios de comunicación social, que

tales requisitos están implantados desde la entrada en vigor de dicha norma, además

de que cuenta con la atribución “AA” o “doble A” para todos los contenidos

informativos de dicho portal, incluida la consulta de horarios.

2. Página 3: El 3 de octubre de 2014 se recibe un nuevo escrito de alegaciones de RENFE-

OPERADORA en relación con el informe de Red.es informando de que la adaptación de

toda la web, a excepción del sistema de venta, podría estar terminada en una semana.

Respecto al sistema de venta de billetes, si bien hay algunos aspectos de accesibilidad

que se pueden corregir, en ningún caso estos fallos impiden una compra accesible.

RENFE está trabajando en solucionar todas las incidencias detectadas y el plazo

barajado ronda el último trimestre del año. En cuanto a la selección gráfica de asiento,

no se dispone de una solución que traduzca la selección de asiento sobre una imagen

en texto, por lo que está barajando la posibilidad de dar al cliente una alternativa cuyo

desarrollo no es viable a medio plazo. No obstante, se está estudiando en el sistema

de venta de billetes para su futura resolución (doc. 13).

Este análisis se centra en los problemas de accesibilidad que puede experimentar un usuario

que utilice un lector de pantallas como producto de apoyo para utilizar un ordenador, como

por ejemplo los usuarios ciegos o con baja visión. No se han tenido en cuenta otros problemas

de accesibilidad que puedan afectar a otros usuarios.

En las siguientes imágenes se muestra la página en el momento de realizar este análisis:


http://www.renfe.com/empresa/informacion_legal/index.html

8

Figura 1: Página principal de Renfe

Fundamentos de derecho Renfe está obligada al cumplimiento de las normas de accesibilidad en su sitio web conforme a

lo establecido en el Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el

Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las

tecnologías, productos y servicios relacionados con la sociedad de la información y medios de

comunicación social.

Según el artículo 5 del Reglamento la información disponible en las páginas de internet de las

administraciones públicas deberá ser accesible a las personas mayores y personas con

discapacidad, con un nivel mínimo de accesibilidad que cumpla las prioridades 1 y 2 de la

Norma UNE 139803:2004. En la actualidad, esta norma ha sido actualizada a Norma UNE

139803:2012.

Además, Renfe también está obligada al cumplimiento de las normas de accesibilidad en su

sitio web conforme a lo establecido en la Ley 56/2007, de 28 de diciembre, de Medidas de

Impulso de la Sociedad de la Información. Esta Ley modifica la Ley 34/2002, de 11 de julio, de

9

servicios de la sociedad de la información y de comercio electrónico, que en su disposición

adicional quinta indica que “las páginas de Internet de las empresas que presten servicios al

público en general de especial trascendencia económica, sometidas a la obligación establecida

en el artículo 2 de la Ley 56/2007, de medidas de impulso de la sociedad de la información,

deberán satisfacer a partir del 31 de diciembre de 2008, como mínimo, el nivel medio de los

criterios de accesibilidad al contenido generalmente reconocidos”.

El artículo 2 de la Ley 56/2007 considera como “empresas que presten servicios al público en

general de especial trascendencia económica, las que agrupen a más de cien trabajadores o su

volumen anual de operaciones, calculado conforme a lo establecido en la normativa del

Impuesto sobre el Valor Añadido, exceda de 6.010.121,04 euros y que, en ambos casos,

operen en los siguientes sectores económicos”.

En el Informe anual 2013 de la empresa Renfe (URL

http://www.renfe.com/docs/Informe_anual_2013.pdf) se indica que en el año 2013 poseía

14.785 empleados (página 10) y el total de ingresos fue de 2.817,2 millones de euros.

Entre los sectores económicos indicados figura “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 último, según el Real Decreto Legislativo 1/2013, de 29 de noviembre, por el que se

aprueba el Texto Refundido de la Ley General de derechos de las personas con discapacidad y

de su inclusión social, las infracciones en materia de accesibilidad web pueden ser sancionadas

con multas de hasta un máximo de 1.000.000 de euros.

Análisis previos Varios análisis realizados con anterioridad demuestran la falta de accesibilidad del sitio web de

Renfe:

- Análisis de la accesibilidad de Renfe (09/07/2012):

http://accesibilidadweb.dlsi.ua.es/?menu=ej-analisis-renfe


http://accesibilidadweb.dlsi.ua.es/?menu=ej-analisis-renfe-2013-06-05



Criterio de evaluación Verificación de la Norma Española UNE 139803:2012 Requisitos de accesibilidad para

contenidos en la Web. Según la legislación española, la accesibilidad de un sitio web está

garantizada cuando se satisfacen todos los criterios de conformidad de nivel A (Tabla 1) y de

nivel AA (Tabla 2) que están basados en Web Content Accessibility Guidelines 2.0,

recomendación del World Wide Web Consortium (W3C) del 11 de diciembre de 2008. Por

tanto, el incumplimiento de un solo criterio de conformidad impide afirmar que un sitio web es

accesible.

http://www.renfe.com/docs/Informe_anual_2013.pdf

http://accesibilidadweb.dlsi.ua.es/?menu=ej-analisis-renfe



10

Tabla 1: Lista de criterios de conformidad de nivel A

Identificador Título

1.1.1 Contenido no textual

1.2.1 Sólo audio y sólo vídeo (grabado)

1.2.2 Subtítulos (grabados)

1.2.3 Audiodescripción o Medio Alternativo (grabado)

1.3.1 Información y relaciones

1.3.2 Secuencia significativa

1.3.3 Características sensoriales

1.4.1 Uso del color

1.4.2 Control del audio

2.1.1 Teclado

2.1.2 Sin trampas para el foco del teclado

2.2.1 Tiempo ajustable

2.2.2 Poner en pausa, detener, ocultar

2.3.1 Umbral de tres destellos o menos

2.4.1 Evitar bloques

2.4.2 Titulado de páginas

2.4.3 Orden del foco

2.4.4 Propósito de los enlaces (en contexto)

3.1.1 Idioma de la página

3.2.1 Al recibir el foco

3.2.2 Al recibir entradas

3.3.1 Identificación de errores

3.3.2 Etiquetas o instrucciones

4.1.1 Procesamiento

4.1.2 Nombre, función, valor

Tabla 2: Lista de criterios de conformidad de nivel AA

Identificador Título

1.2.4 Subtítulos (en directo)

1.2.5 Audiodescripción (grabado)

1.4.3 Contraste (mínimo)

1.4.4 Cambio de tamaño del texto

1.4.5 Imágenes de texto

2.4.5 Múltiples vías

2.4.6 Encabezados y etiquetas

2.4.7 Foco visible

3.1.2 Idioma de las partes

3.2.3 Navegación coherente

3.2.4 Identificación coherente

3.3.3 Sugerencias ante errores

3.3.4 Prevención de errores (legales, financieros, datos)

Alcance de la evaluación Las secciones que han sido evaluadas son:

Compra de un billete.

11

Cambio de un billete.

Anulación de un billete.

Registro de usuario.

Fecha de realización Del 18 al 23 de julio de 2015.

Autor Sergio Luján Mora, ingeniero en informática y doctor en informática por la Universidad de

Alicante. Profesor titular de la Universidad de Alicante, adscrito al Departamento de Lenguajes

y Sistemas Informáticos.

Herramientas utilizadas Sistemas operativos:

Microsoft Windows 8.

Navegadores:

Google Chrome 43.

Microsoft Internet Explorer 11.

Mozilla Firefox 39.

Herramientas automáticas de evaluación de la accesibilidad web:

AChecker.

eXaminator.

TAW.

WAVE.

Lectores de pantalla:

Google Chromevox 45.

JAWS 15.

NVDA 2015.2.

Emuladores de lectores de pantalla:

Claws.

Fangs.

Información adicional En la siguiente dirección se puede encontrar información adicional sobre este informe

(capturas de pantalla, capturas de código fuente, grabaciones de audio de lector de pantallas):



12

Compra de un billete El proceso de compra de un billete se compone de seis pasos:

1. Disponibilidad.

2. Tarifas.

3. Identificación.

4. Pago.

5. Selección de asiento.

6. Billete.

Figura 2: Pasos en el proceso de compra de un billete

En este análisis se han analizado los siguientes pasos:

- Introducción de los datos iniciales del viaje.

- Disponibilidad.

- Tarifas.

- Identificación.

- Pago.

El resto de pasos no se ha analizado porque requieren la realización del pago de un billete.

13

Introducción de los datos iniciales La introducción de los datos iniciales se ha realizado en la página principal de Renfe que se muestra en la Figura 3, disponible en la URL http://www.renfe.com/.

Figura 3: Página principal de Renfe

El análisis se ha realizado mediante el lector de pantalla NVDA. Se ha realizado una exploración y uso de la página web en las mismas condiciones que un usuario que utilice

un lector de pantalla. Este tipo de análisis es el más realista, ya que detecta los verdaderos problemas de accesibilidad que va a experimentar un usuario.

En el Anexo 1 se recoge la transcripción completa de la verbalización realizada por NVDA.

En la siguiente tabla se recoge el resultado del análisis realizado. Cada fila recoge el resultado de analizar una parte de la página comenzando desde el principio de la

página. La tabla se ha organizado en tres columnas:

- Fragmento de captura de pantalla de la página: imagen de la parte analizada. En unos pocos casos no hay imagen porque el contenido que se está analizando está

oculto y no se visualiza en la página.

- Fragmento de código HTML: código HTML que representa la parte de la página analizada.

- Fragmento de la lectura del lector de pantalla: representación textual de la salida sonora que produce el lector de pantalla para la parte de la página analizada.


14

Fragmento de captura de pantalla de la página

Fragmento de código HTML Fragmento de la lectura del lector de pantalla

Inicio de la navegación, introducción de la URL de Renfe. Página de inicio de Mozilla Firefox - Mozilla Firefox Barra de herramientas de navegación barra de herramientas Término de búsqueda o dirección cuadro combinado Contraído edición tiene auto completado en blanco Término de búsqueda o dirección www.renfe.com

<title>Renfe</title> Renfe - Mozilla Firefox Renfe

 <div id="cabecera"> <h1 class="oculto">Renfe</h1>

encabezado nivel 1 Renfe

La cabecera gráfica que se ve es una imagen puesta como fondo en el CSS: #cabecera { margin: 0 auto 0 auto; padding: 20px 0 0 0; width: 1000px; background: #fff; height: 135px; background-image: url(../img/maquetacion/cabecera09.jpg); background-repeat: no-repeat; } La clase “oculto” oculta correctamente el contenido, visualmente no se ve, pero para el lector de pantallas sí que existe: .oculto { position: absolute; left: -9999px; overflow: hidden; }

<h1 class="oculto">Renfe</h1>  <h2 class="oculto">Selección de Idiomas</h2> <div id="nav_rec"> <ul id="seleccionIdiomas">

encabezado nivel 2 Selección de Idiomas lista con 7 elementos Bienvenido enlace

15

<li class="primero">Bienvenido</li> <li class="link"><a lang="en-UK" xml:lang="en-US" href="/EN/viajeros/index.html" title="English">Welcome</a></li> <li><a lang="fr-FR" xml:lang="fr-FR" href="/FR/viajeros/index.html" title="Français">Bienvenue</a></li> <li class="link"><a lang="ca-ES" xml:lang="ca-ES" href="/CA/viajeros/index.html" title="Català">Benvingut (C)</a></li> <li><a lang="eu-ES" xml:lang="eu-ES" href="/EU/viajeros/index.html" title="Euskera">Ongi etorri</a></li> <li class="link"><a lang="gl-ES" xml:lang="gl-ES" href="/GA/viajeros/index.html" title="Galego">Benvido</a></li> <li><a lang="ca-ES" xml:lang="ca-ES" href="/VA/viajeros/index.html" title="Valencià">Benvingut (V)</a></li> </ul> </div>

Welcome enlace Bienvenue enlace Benvingut (C) enlace Ongi etorri enlace Benvido enlace Benvingut (V) fuera de lista

Para el código de idioma es mejor usar el código de dos letras (en, fr, ca), el código ampliado con el país (en-UK, fr-FR, ca-ES) puede causar problemas (Figura 4). En “Benvingut (V)” el lector de pantallas lee “V” como cinco, como si fuera un número romano.

 <div id="nav_ppal"> <ul> <li class="primero"><a href="/empresa/index.html" title="Información corporativa de Renfe">La Empresa</a> <span class="nav_ppal_txt"> | </span></li> <li><a href="/viajeros/index.html" title="Ir a Viajar con Renfe">Viajeros</a></li> </ul> </div> 

lista con 2 elementos enlace La Empresa | enlace Viajeros fuera de lista

 <div id="buscador"> <form method="get" action="http://buscador.renfe.com/search" class="formcab"> <fieldset class="fieldset"> <legend class="hidden">Buscar en renfe.com</legend> <label for="busqueda" class="hidden">Texto a buscar</label> <input class="campo" name="q" id="busqueda" type="text" /> <input class="boton" src="img/maquetacion/bt_buscar.gif" value="Buscar" alt="Buscar" title="Buscar" type="image" /> <input type="hidden" name="client" value="default_frontend"/> <input type="hidden" name="output" value="xml_no_dtd"/> <input type="hidden" name="proxystylesheet" value="default_frontend"/> </fieldset> </form> </div> 

Buscar en renfe.com Texto a buscar edición tiene auto completado botón Buscar

En vez de usar <fieldset> con <legend> habría sido mejor utilizar <h2> como en la selección de idiomas (Figura 5).

16

La clase “hidden” es igual que la clase “oculto”, es curioso que existan dos clases exactamente iguales: .hidden { position: absolute; left: -9999px; overflow: hidden; }

 <div id="nav_rec2"> <ul> <li><a href="/empresa/comunicacion/incidencias.html" class="incidencias">Avisos</a></li> <li><a href="/empresa/atencion_cliente/index.html" class="clientes">Atención al cliente</a></li> <li><a href="/empresa/comunicacion/index.html" class="gab_prensa">Gabinete de Prensa</a></li> </ul> </div> 

lista con 3 elementos enlace Avisos enlace Atención al cliente enlace Gabinete de Prensa fuera de lista

<div class="comprabilletes"> <h2 class="oculto">Compra de Billetes</h2>

encabezado nivel 2 Compra de Billetes

<h3 class="oculto">Acceso a Más Servicios Viajes y Mi Cuenta</h3> <div class="misviajes" onclick="window.open('https://venta.renfe.com/vol/inicioCompra.do?icid=HMasServicios&Idioma=es&Pais=ES&inirenfe=SI', 'popupwindow', ''); return false;"><a href="https://venta.renfe.com/vol/inicioCompra.do?Idioma=es&Pais=ES&inirenfe=SI" onclick="window.open(this.href, 'popupwindow', ''); return false;" id="opc1">Más<br /> Servicios</a> </div> <div class="micuenta" onclick="window.open('https://venta.renfe.com/vol/login.do?Idioma=es&Pais=ES&inirenfe=SI', 'popupwindow', ''); return false;"><a href="https://venta.renfe.com/vol/login.do?Idioma=es&Pais=ES&inirenfe=SI" onclick="window.open(this.href, 'popupwindow', ''); return false;" id="opc2">Mi<br /> Cuenta</a> </div>

encabezado nivel 3 Acceso a Más Servicios Viajes y Mi Cuenta Se puede hacer clic enlace Más enlace Servicios gráfico Se abre en ventana nueva Se puede hacer clic enlace Mi enlace Cuenta gráfico Se abre en ventana nueva

El empleo del evento onclick en el <div> contenedor está mal. Se debería emplear la etiqueta <button> para que todo fuese un botón. Los saltos de línea en los enlaces “Más Servicios” y “Mi Cuenta” produce que se dividían y que parezcan enlaces separados: “Más”, “Servicios”, “Mi”, “Cuenta” (Figura 6). Mediante código se añade el siguiente fragmento de código HTML dentro de los enlaces “Más Servicios” y “Mi Cuenta” para indicar que se abren en una ventana nueva: <img src="img/maquetacion/newwin.png" alt="Se abre en ventana nueva" title="Se abre en nueva ventana" class="border">

17

<legend class="oculto">Compra de Billetes</legend> <h3 class="oculto">Selección de Origen, Destino, fechas de salida y regreso y hora.</h3> <p><label for="IdOrigen" class="labelhome">Origen :</label> <input type='text' id='IdOrigen' name='IdOrigen' onClick="javascript:this.value=''" class="caja_textood" /></p> <p><label for="IdDestino" class="labelhome">Destino :</label> <input type='text' id='IdDestino' name='IdDestino' onClick="javascript:this.value=''" class="caja_textood" /></p> <p><label for="FechaIdaSel" class="labelhomeSal">Salida :</label> <input type="text" class="caja_textofechaSal" id="FechaIdaSel" name="FechaIdaSel" onChange="javascript:formateaFecha(this)" value="" title="Introduzca la fecha de salida en formato día/mes/año" /> <label for="HoraIdaSel" class="oculto">Seleccione la hora de salida</label> <select id="HoraIdaSel" name="HoraIdaSel" class="caja_textohoraSal"> <option value = "00:00">00:00</option> </select></p> <p> <label for="FechaVueltaSel" id="divFechaVuelta">Regreso :</label> <input type="text" id="FechaVueltaSel" class="caja_textofechaReg" name="FechaVueltaSel" onChange="javascript:formateaFecha(this)" title="Introduzca la fecha de regreso en formato día/mes/año" /> <label for="HoraVueltaSel" class="oculto">Seleccione la hora de regreso</label> <select id="HoraVueltaSel" name="HoraVueltaSel" class="caja_textohoraReg"> <option value = "00:00">00:00</option> </select></p>

Compra de Billetes encabezado nivel 3 Selección de Origen, Destino, fechas de salida y regreso y hora. Origen : edición Destino : edición Salida : edición tiene auto completado gráfico Se puede hacer clic Seleccione una fecha Seleccione la hora de salida cuadro combinado Contraído 00:00 Regreso : edición tiene auto completado gráfico Se puede hacer clic Seleccione una fecha Seleccione la hora de regreso cuadro combinado Contraído 00:00

La etiqueta <legend> repite “Compra de Billetes” que ya se ha anunciado previamente con <h2>, lo cual puede causar confusión. Los cuadros de texto (edición) para introducir el origen y destino del viaje tienen asociado el evento onclick que borra su contenido. Esto es un error grave para todos los usuarios. No hay ninguna indicación para saber que en el cuadro de texto (edición) se debe introducir la fecha del viaje. No hay ninguna indicación del formato que se debe emplear. Mediante código se añade el siguiente fragmento de código HTML para seleccionar la fecha del viaje: <img class="ui-datepicker-trigger" src="img/bs_calendar2.gif" alt="Seleccione una fecha" title="Seleccione una fecha">

<h3 class="oculto">Seleccione nº de viajeros</h3> <div class="labelhomev1"><label for="adultos_">Adultos</label><br /> <select id="adultos_" name="adultos_" class="caja_np1"> <option value="0">0</option> </select></div>

encabezado nivel 3 Seleccione nº de viajeros Adultos

18

<div class="labelhomev2"><label for="ninos_">Niños 4-13</label><br /> <select id="ninos_" name="ninos_" class="caja_np2"> <option value="0" selected="selected">0</option> </select></div> <div class="labelhomev3"><label for="ninosMenores">Niños <4 </label><br /> <select id="ninosMenores" name="ninosMenores" class="caja_np3"> <option value="0" selected="selected">0</option> </select> </div> <div class="oculto"><input type="hidden" id="adultos" name="adultos" value="1" /></div> <h3 class="oculto">Selección de Tarjeta +Renfe Joven o Dorada</h3> <div class="tarjetas"> <p><input name="tarjetaJoven" type="checkbox" class="buttom" value="TJ" id="tarjetaJoven" /><label for="tarjetaJoven">+Renfe Joven</label> <input name="tarjetaDorada" type="checkbox" class="buttom2" value="TD" id="tarjetaDorada" /><label for="tarjetaDorada" class="buttom3">Tarjeta Dorada</label></p> </div> <div class="linea"></div> <h3 class="oculto">Indique su Código Promocional</h3> <div class="cod_promocion"> <label for="codPromocional" id="codPromocional" class="labelhomecp">Cod. Promocional :</label> <input type="text" name="codPromocional" id="codPromocional" value="" class="caja_textofechaAC" /> </div> <div class="botones"> <div><input type="submit" onclick="doSubmitTrayectos(); return false;" class="btn_buscar" value="Comprar" title="Comprar" /></div>

cuadro combinado Contraído 1 Niños 4-13 cuadro combinado Contraído 0 Niños <4 cuadro combinado Contraído 0 encabezado nivel 3 Selección de Tarjeta +Renfe Joven o Dorada casilla de verificación no marcado +Renfe Joven casilla de verificación no marcado Tarjeta Dorada encabezado nivel 3 Indique su Código Promocional Cod. Promocional : edición tiene auto completado botón Comprar

“Niños 4-13” se lee como “niños cuatro menos trece”, es mejor cambiarlo por “Niños de 4 a 13 años”. “Niños <4” se lee como “niños cuatro”, es mejor cambiarlo por “Niños hasta 3 años”.

<div class="btn_estaciones"><a href="javascript:estacionesAccesibles();">Todas las estaciones</a></div> <div class="btn_facturas"><a href="http://www.renfe.com/viajeros/info/factura.html">Factura on line</a></div> <h3 class="oculto">Compra Múltiple </h3> <div class="btn_multiple" onclick="window.open('https://venta.renfe.com/vol/inicioVtm.do?Idioma=es&Pais=ES&inirenfe=SI', 'popupwindow', ''); return false;"> <a href="https://venta.renfe.com/vol/inicioVtm.do?Idioma=es&Pais=ES&inirenfe=SI" onclick="window.open(this.href, 'popupwindow', ''); return false;">Compra Múltiple</a> </div> <div class="clearb"></div>

enlace Todas las estaciones enlace Factura on line encabezado nivel 3 Compra Múltiple Se puede hacer clic enlace Compra Múltiple encabezado nivel 3 Cambios y Anulaciones Se puede hacer clic

19

<h3 class="oculto">Cambios y Anulaciones</h3> <div class="btn_cambios" onclick="window.open('https://venta.renfe.com/vol/accesoCambio.do?Idioma=es&Pais=ES&inirenfe=SI', 'popupwindow', ''); return false;"><a href="https://venta.renfe.com/vol/accesoCambio.do?Idioma=es&Pais=ES&inirenfe=SI" onclick="window.open(this.href, 'popupwindow', ''); return false;" id="opc3">Cambios</a> </div> <div class="btn_anulaciones" onclick="window.open('https://venta.renfe.com/vol/inicioAnulacion.do?Idioma=es&Pais=ES&inirenfe=SI', 'popupwindow', ''); return false;"><a href="https://venta.renfe.com/vol/inicioAnulacion.do?Idioma=es&Pais=ES&inirenfe=SI" onclick="window.open(this.href, 'popupwindow', ''); return false;" id="opc4">Anulaciones</a> </div> </div>

enlace Cambios gráfico Se abre en ventana nueva Se puede hacer clic enlace Anulaciones gráfico Se abre en ventana nueva

El empleo del evento onclick en el <div> contenedor está mal. Se debería emplear la etiqueta <button> para que todo fuese un botón. Mediante código se añade el siguiente fragmento de código HTML dentro de los enlaces “Cambios” y “Anulaciones” para indicar que se abren en una ventana nueva: <img src="img/maquetacion/newwin.png" alt="Se abre en ventana nueva" title="Se abre en nueva ventana" class="border">

<h3 class="oculto">Enlace a Horarios Generales y de Feve</h3> div class="horariosizq">HORARIOS</div> <div class="cercanias" onclick="window.location='/viajeros/cercanias/index.html';return false;"><a href="/viajeros/cercanias/index.html" title="Ir a Cercanías">Cercanías</a></div> <div class="feve" onclick="window.location='/viajeros/feve/index.html';return false;"><a href="/viajeros/feve/index.html" title="Ir a Feve">Feve</a></div>

encabezado nivel 3 Enlace a Horarios Generales y de Feve HORARIOS Se puede hacer clic enlace Cercanías Se puede hacer clic enlace Feve

El empleo del evento onclick en el <div> contenedor está mal. Se debería emplear la etiqueta <button> para que todo fuese un botón.

20

<h3 class="oculto">Más Operaciones</h3> <div class="masservicios">MÁS OPERACIONES</div> <div class="lista_servicios"> <ul> <li><a href="https://venta.renfe.com/vol/formViajes.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc5">Mis Viajes - Imprimir billetes</a></li>  <li><a href="https://venta.renfe.com/vol/indiceAbonos.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc6">Abonos y BonoAVE</a></li> <li><a href="https://venta.renfe.com/vol/menuTarjeta.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc7">Tarjeta +Renfe Joven</a></li> <li><a href="https://venta.renfe.com/vol/index2.jsp?U=SP2S" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc8">Renfe Spain Pass</a></li> <li><a href="https://venta.renfe.com/vol/prod_oper_internac.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc9">InterRail</a></li> <li><a href="https://venta.renfe.com/vol/inicioVtm.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc10">Compra Múltiple</a></li> <li><a href="https://venta.renfe.com/vol/infoPuntualidadTrenes.do?Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc11">InfoTrenes</a></li> <li><a href="https://venta.renfe.com/vol/index2.jsp?U=EQUIPAJES&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc12">Equipajes Puerta a Puerta</a></li> <li><a href="/viajeros/movilidad/index.html">Movilidad-Billete en el móvil</a></li> <li><a href="https://venta.renfe.com/vol/trenesTuriIni.do?cdgoIdentificador=OCNT&Idioma=es&Pais=ES&inirenfe=SI" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc13">Ocio en Tren</a> <img src="/img/maquetacion/hico16_nuevo.png" alt="nuevo" /></li> </ul> </div> </div>

encabezado nivel 3 Más Operaciones MÁS OPERACIONES lista con 10 elementos enlace Mis Viajes - Imprimir billetes gráfico Se abre en ventana nueva enlace Abonos y BonoAVE gráfico Se abre en ventana nueva enlace Tarjeta +Renfe Joven gráfico Se abre en ventana nueva enlace Renfe Spain Pass gráfico Se abre en ventana nueva enlace InterRail gráfico Se abre en ventana nueva enlace Compra Múltiple gráfico Se abre en ventana nueva visitado enlace InfoTrenes gráfico Se abre en ventana nueva enlace Equipajes Puerta a Puerta gráfico Se abre en ventana nueva enlace Movilidad-Billete en el móvil enlace Ocio en Tren gráfico Se abre en ventana nueva gráfico nuevo fuera de lista

Se repite dos veces el texto “Más operaciones”. No se ha indicado el cambio de idioma para el texto “Renfe Spain Pass”.

21

El texto alternativo “Nuevo” podría ser “Nuevo servicio” o “Nuevo producto” para ayudar a entender mejor su significado.

<h2 class="oculto">Asistente Virtual</h2> <div class="Irene"> <a href="/asistente.html" onClick="window.open(this.href, 'popupwindow', 'scrollbars,resizable'); return false;" title="Soy Irene. ¿Necesitas ayuda? :: Se abre nueva ventana"><img src="img/maquetacion/hu_irene_es.png" alt="Soy Irene. ¿Necesitas ayuda? :: Se abre nueva ventana"/></a> </div>

encabezado nivel 2 Asistente Virtual enlace gráfico Soy Irene. ¿Necesitas ayuda? :: Se abre nueva ventana

<h2 class="oculto">Banner Publicitario</h2> <div class="contenedor_publi"> <div class="sliderkit newslider-horizontal"> <div class="sliderkit-nav"> <div class="sliderkit-nav-clip"> <ul> <li><a href="#"><span class="titulo">Viajar en Familia</span></a></li> <li><a href="#"><span class="titulo">Agosto tiene un Secreto</span></a></li> <li><a href="#"><span class="titulo">Tren del Peregrino</span></a></li> <li><a href="#"><span class="titulo">Equipajes Puerta a Puerta</span></a></li> <li><a href="#"><span class="titulo">Nuestras Promociones</span></a></li> </ul> </div> </div>

encabezado nivel 2 Banner Publicitario lista con 5 elementos Se puede hacer clic enlace Viajar en Familia Se puede hacer clic enlace Agosto tiene un Secreto Se puede hacer clic enlace Tren del Peregrino Se puede hacer clic enlace Equipajes Puerta a Puerta Se puede hacer clic enlace Nuestras Promociones fuera de lista

<div class="sliderkit-panels"> <div class="sliderkit-panel"> <div class="sliderkit-news"> <a href="/viajeros/viajarenfamilia/index.html?icid=HViajarenFamilia2015"><img src="img/renfeviajes/b740x450_viajarenfamilia.jpg" alt="Viajar en Familia"/></a> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <a href="/ofertas/AgostoSecreto.html?icid=HAgostoSecreto2015"><img src="img/renfeviajes/b740x450_Home_secreto.jpg" alt="Agosto tiene un secreto en: Madrid, Barcelona, Valencia, Zaragoza, Córdoba y Sevilla" /></a> </div> </div>

enlace gráfico Viajar en Familia enlace gráfico Agosto tiene un secreto en: Madrid, Barcelona, Valencia, Zaragoza, Córdoba y Sevilla enlace gráfico Tren del Peregrino. Una forma diferente de recorrer el Camino de Santiago enlace gráfico Este verano te dejamos las maletas en la puerta enlace

22

<div class="sliderkit-panel"> <div class="sliderkit-news"> <a href="/ofertas/TrenPeregrino.html?icid=HTrenPeregrino2015"><img src="img/renfeviajes/740x450_trenperegrino2015.jpg" alt="Tren del Peregrino. Una forma diferente de recorrer el Camino de Santiago"/></a> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <a href="https://venta.renfe.com/vol/index2.jsp?U=EQUIPAJES&cid=HEquipajesPuertaaPuerta" target="_blank" title="Equipajes Puerta a Puerta :: Se abre nueva ventana"><img src="img/renfeviajes/b740x450_equipaje_verano.jpg" alt="Este verano te dejamos las maletas en la puerta"/></a> </div> </div> <div class="sliderkit-panel"> <div class="sliderkit-news"> <a href="/WebOfertaComercial/jsp/homeOfertaComercial.jsp?destacado=S&icid=HNuestrasPromociones"><img src="img/renfeviajes/b740x450_nuestraspromociones02.jpg" alt="Nuestras Promociones"/></a> </div> </div> </div> </div>  </div

gráfico Nuestras Promociones

<h2 class="oculto">Menú rápido</h2> <div class="fondo_varios"> <div class="infoviajar infoviajar_background" onClick="window.location='/viajeros/info/index.html';return false;"> <ul> <li><a href="/viajeros/info/index.html" title="Información para viajar. Equipajes, bicicletas y más"><span class="str_tit">INFORMACIÓN ÚTIL</span><br />para tu viaje</a></li> </ul> </div> <div class="horariosg horariosg_background" onClick="window.location='/viajeros/index.html';return false;"> <ul> <li><a href="/viajeros/index.html" title="Horarios y Precios. AVE, LD, Avant y MD"><span class="str_tit">HORARIOS Y PRECIOS</span><br />AVE, LD, Avant y MD</a></li> </ul> </div> <div class="tempo tempo_background" onClick="window.location='/viajeros/tarjetas/index.html';return false;">

encabezado nivel 2 Menú rápido Se puede hacer clic lista con 1 elementos enlace INFORMACIÓN ÚTIL enlace para tu viaje fuera de lista Se puede hacer clic lista con 1 elementos visitado enlace HORARIOS Y PRECIOS visitado enlace AVE, LD, Avant y MD fuera de lista Se puede hacer clic

23

<ul> <li><a href="/viajeros/tarjetas/index.html" title="Tarjeta +Renfe"><span class="str_tit">TARJETA</span> <span class="resaltado">+Renfe</span><br />La mejor compañera de viaje</a></li> </ul> </div> <div class="TrenesTuristicos TrenesTuristicos_background" onClick="window.location='/trenesturisticos/index.html';return false;"> <ul> <li><a href="/trenesturisticos/index.html" title="Trenes Turísticos"><span class="str_tit">TRENES TURÍSTICOS</span><br />Cuando el viaje es el tren</a></li> </ul> </div> </div>

lista con 1 elementos enlace TARJETA +Renfe enlace La mejor compañera de viaje fuera de lista Se puede hacer clic lista con 1 elementos enlace TRENES TURÍSTICOS enlace Cuando el viaje es el tren fuera de lista

No tiene sentido que cada enlace esté situado en una lista independiente, se tendría que haber realizado una lista única con todos los enlaces de este panel (Figura 7). El empleo del evento onclick en el <div> contenedor está mal. Se debería emplear la etiqueta <button> para que todo fuese un botón. Los saltos de línea en los enlaces producen que se dividan y que parezcan enlaces separados.

<div class="enlaces"> <h2 class="oculto">Información para viajar</h2> <div class="MasBuscado">Lo más visto</div>

encabezado nivel 2 Información para viajar Lo más visto

El encabezado <h2> podría ser directamente “Lo más visto”.

<div class="paraviajar"> <p>General</p> <ul> <li><a href="/viajeros/atendo/index.html">Atendo <img src="/img/maquetacion/hico16_atendo.png" alt="Logo Atendo" class="border" /></a></li> <li><a href="/viajeros/tarifas/index.html">Tarifas y descuentos</a></li> <li><a href="/viajeros/tarifas/grupos.html">Grupos<img src="/img/maquetacion/hico16_grupos.png" alt="Logo Grupos" class="border" /></a></li> <li><a href="/viajeros/info/maquinas_autocheckin.html">Máquinas Autoventa</a></li> <li><a href="/viajeros/info/index.html">Información para viajar</a></li> <li><a href="https://agencias.renfe.com/vol/agencias.do" onClick="window.open(this.href, 'popupwindow', ''); return false;" id="opc14" title="Renfe Agencias :: Se abre nueva ventana">Renfe Agencias</a></li> </ul> </div>

General lista con 6 elementos enlace Atendo gráfico Logo Atendo enlace Tarifas y descuentos enlace Grupos gráfico Logo Grupos enlace Máquinas Autoventa enlace Información para viajar enlace Renfe Agencias gráfico Se abre en ventana nueva fuera de lista

“General” se podría haber etiquetado como un encabezado <h3>.

24

El texto alternativo “Logo Atendo” no es descriptivo y no transmite la información que se obtiene de forma visual. Un texto más útil podría ser “Atención a las personas con necesidades especiales”.

<div class="internacional"> <p>Internacional</p> <ul> <li><a href="/viajeros/viajes_internacionales/index.html">Viajes Internacionales</a></li> <li><a href="/viajeros/viajes_internacionales/spainpass/index.html" >Renfe Spain Pass</a></li> <li><a href="/viajeros/viajes_internacionales/interrail.html">Interrail</a></li> <li><a href="/viajeros/viajes_internacionales/eurail.html">Eurail</a></li> <li><a href="/viajeros/viajes_internacionales/railplus.html">Rail Plus</a></li> <li><a href="/viajeros/viajes_internacionales/puntosventa_internacional.html">Puntos de Venta Internacional</a></li> </ul> </div>

Internacional lista con 6 elementos enlace Viajes Internacionales enlace Renfe Spain Pass enlace Interrail enlace Eurail enlace Rail Plus enlace Puntos de Venta Internacional fuera de lista

“Internacional” se podría haber etiquetado como un encabezado <h3>. No se ha indicado el cambio de idioma para el texto “Renfe Spain Pass”.

<div class="servicios"> <p>Empresa</p> <ul> <li><a href="/empresa/empleo_y_formacion/index.html">Empleo y Formación</a> <img src="/img/maquetacion/hico16_nuevo.png" alt="nueva Oferta de Empleo" /></li> <li><a href="/empresa/mercancias/index.html">Mercancías</a></li> <li><a href="/empresa/integria/index.html">Fabricación y Mantenimiento</a></li> <li><a href="/empresa/LaMecaMedina/index.html" title="Proyecto AV Meca-Medina">Proyecto AV Meca-Medina</a></li> <li><a href="/empresa/informacion_legal/accesibilidad_web.html" title="Accesiblidad web" id="opc15" onClick="window.open(this.href, 'popupwindow', ''); return false;">Accesibilidad</a></li> <li><a title="Información Legal :: Se abre nueva ventana" id="opc16" href="/empresa/informacion_legal/index.html" onClick="window.open(this.href, 'popupwindow', ''); return false;">Información Legal</a></li> </ul> </div>

Empresa lista con 6 elementos enlace Empleo y Formación gráfico nueva Oferta de Empleo enlace Mercancías enlace Fabricación y Mantenimiento enlace Proyecto AV Meca-Medina enlace Accesibilidad gráfico Se abre en ventana nueva visitado enlace Información Legal gráfico Se abre en ventana nueva fuera de lista

“Empresa” se podría haber etiquetado como un encabezado <h3>.

<div id="cookies"> <h2 class="oculto">Política de Cookies</h2> <div class="cookies">Renfe.com utiliza cookies propias y de terceros para mejorar su experiencia de usuario y

encabezado nivel 2 Política de Cookies Renfe.com utiliza cookies propias y de terceros para mejorar su experiencia de

25

ofrecer contenidos adaptados a sus intereses. <br /> Si sigue navegando sin cambiar la configuración, consideramos que aceptas su uso. <a href="/empresa/informacion_legal/politica_cookies.html">Ver nuestra política de cookies</a> </div> </div>

usuario y ofrecer contenidos adaptados a sus intereses. Si sigue navegando sin cambiar la configuración, consideramos que aceptas su uso. enlace Ver nuestra enlace política de cookies

<div id="pie"> <div id="pie_home"> <p class="logo_ministerio"><a href="http://www.fomento.es/MFOM/LANG_CASTELLANO/" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Enlace al ministerio de Fomento :: Se abre nueva ventana"> <img src="img/ministeriodeformento_02.gif" alt="Ministerio de Fomento" /></a></p>

enlace gráfico Ministerio de Fomento

El lector de pantallas no lee que el enlace se abre en una ventana nueva.

<div class="redessociales"> <ul> <li><a href="https://www.facebook.com/Renfe" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Renfe en Facebook :: Se abre nueva ventana"><img src="img/maquetacion/redes_facebook01.png" alt="Facebook" /></a></li> <li><a href="http://www.youtube.com/Renfe" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Renfe en Youtube :: Se abre nueva ventana"><img src="img/maquetacion/redes_youtube01.png" alt="Youtube" /></a></li> <li><a href="https://twitter.com/renfe" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Renfe en Twitter :: Se abre nueva ventana"><img src="img/maquetacion/redes_twitter01.png" alt="Twitter" /></a></li> <li><a href="http://www.flickr.com/photos/renfeoperadora/" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Renfe en Flicker :: Se abre nueva ventana"><img src="img/maquetacion/redes_flickr01.png" alt="Flickr" /></a></li> <li><a href="http://blog.renfe.com/" onclick="window.open(this.href, 'popupwindow', ''); return false;" title="Blog de Renfe :: Se abre nueva ventana"><img src="img/maquetacion/redes_blog01.png" alt="Blog de Renfe" /></a></li> <li><a href="/mapa.html" class="link">Mapa Web</a> | © Renfe</li> </ul> </div>

lista con 6 elementos enlace gráfico Facebook enlace gráfico Youtube enlace gráfico Twitter enlace gráfico Flickr enlace gráfico Blog de Renfe enlace Mapa Web | © Renfe

No se identifica que comienza la sección de enlaces a las redes sociales. El lector de pantallas no lee que el enlace se abre en una ventana nueva.

26

Figura 4: Código fuente de la página principal - selección de idioma

27

Figura 5: Código fuente de la página principal - uso de fieldset y legend

28

Figura 6: Código fuente de la página principal - enlaces partidos

29

Figura 7: Código fuente de la página principal - listas con un único elemento

Disponibilidad El primer paso del proceso de compra está disponible en la dirección URL:

https://venta.renfe.com/vol/buscarTren.do


Figura 8: Página web "Disponibilidad"

Criterio de conformidad 2.4.4 Propósito de los enlaces (en contexto): El propósito de cada

enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace

sumado al contexto del enlace determinado por software, excepto cuando el propósito del

enlace resultara ambiguo para los usuarios en general.

Este criterio se incumple en esta página. Como se puede ver en la Figura 9 en la que se puede

ver la lista de enlaces en NVDA, la pareja de enlaces “Día Antes” y “Día Después” aparece

repetida dos veces. Esto causa una gran confusión e imposibilita su uso, ya que el usuario no

puede saber si se refiere al “Día Antes” y al “Días Después” para la ida o la vuelta.


31

Figura 9: Lista de enlaces de la página web "Disponibilidad" - enlaces con un mismo texto

El problema de los enlaces ambiguos y el incumplimiento del criterio de conformidad 2.4.4 se

repite con otros enlaces, tal como se puede ver en la Figura 10 que muestra la lista de enlaces

en NVDA. En este caso, el enlace que se repite es “Ver prestaciones del tren: Se abre nueva

ventana”.

32

Figura 10: Lista de enlaces de la página web "Disponibilidad" - enlaces con un mismo texto

El lector de pantallas anuncia “Selección de Idiomas”, pero esa opción no existe en la página,

tal como se puede ver en la Figura 11.

Figura 11: Código fuente de la página "Disponibilidad" - encabezado “Selección de Idiomas”

33

Este encabezado causa confusión, ya que el encabezado aparece en la lista de encabezados de

NVDA, tal como se puede ver en la Figura 12, pero no tiene sentido porque ese apartado no

existe realmente en la página.

Figura 12: Lista de encabezados de la página web "Disponibilidad"

El mayor problema en esta página, que supone una gran barrera para su uso, es la existencia

de dos encabezados <h2> sin cerrar:

- <h2 id="HorariosIda">, como se puede ver en la Figura 13.

- <h2 id="Horarios Vuelta">, como se puede ver en la Figura 14.

34

Figura 13: Código fuente de la página web "Disponibilidad" - encabezado no cerrado

Figura 14: Código fuente de la página web "Disponibilidad" - encabezado no cerrado

Este error genera que los encabezados incluyan casi todo el contenido de la página web, tal

como se puede ver en la Figura 15.

35

Figura 15: Encabezados de la página web "Disponibilidad"

36

Este error provoca graves dificultades para navegar por la tabla de tarifas y disponibilidad

horaria, comprender su contenido y poder usarla correctamente, ya que los encabezados son

siempre verbalizados por el lector de pantalla.

Por ejemplo, en la Figura 16 se muestra el primer tren disponible para realizar un viaje. Este

tren dispone de cuatro tarifas para turista y cinco tarifas para preferente.

Figura 16: Fragmento de la página web "Disponibilidad"

Cuando el lector de pantallas verbaliza las tarifas para este tren, como no se ha cerrado el

encabezado <h2>, el lector de pantallas pronuncia “encabezado nivel 2” cada vez que hay un

cambio de celda o de línea en el contenido, tal como se puede ver a continuación:

visitado enlace

AVE 05063

encabezado nivel 2

encabezado nivel 2

Salida columna 2

06.15

encabezado nivel 2

Llegada columna 3

08.42

encabezado nivel 2

Duración columna 4

2 h. 27 min.

encabezado nivel 2

Turista columna 5

Clase Turista

encabezado nivel 2

lista con 1 elementos

botón de opción no marcado

38,95

37

gráfico

Promo:

encabezado nivel 2

gráfico

Eleccion de asiento - No

encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

encabezado nivel 2


42,20

gráfico

Promo +:

encabezado nivel 2

gráfico

Elección de asiento - Sí

encabezado nivel 2

gráfico

Excepto en trenes con enlace

38

encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

encabezado nivel 2


51,90

gráfico

Tarifa Ida y Vuelta:

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


64,90

gráfico

Flexible:

encabezado nivel 2

gráfico

39

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 5%

fuera de lista

encabezado nivel 2

Turista Plus columna 6

encabezado nivel 2

Preferente columna 7

Clase Preferente

encabezado nivel 2



43,75

gráfico

Tarifa 4 Mesa:4 plazas enfrentadas con o sin mesa

encabezado nivel 2

gráfico

No admite cambio

encabezado nivel 2

gráfico

Anulaciones 50%

encabezado nivel 2


65,65

gráfico

40

Promo:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

encabezado nivel 2


71,10

gráfico

Promo +:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico


41

encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

encabezado nivel 2


87,50

gráfico


encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


109,40

gráfico

Flexible:

encabezado nivel 2

gráfico

Cambios 0%

42

encabezado nivel 2

gráfico

Anulaciones 5%

fuera de lista

Además de hacer que la lectura de la página dure más porque el lector de pantallas pronuncia

numerosas veces “encabezado nivel 2”, este error impide la correcta asimilación de las

diferentes ofertas de la disponibilidad.

43

Tarifas El segundo paso del proceso de compra está disponible en la dirección URL:

https://venta.renfe.com/vol/reservar.do


Figura 17: Página web "Tarifa"

El lector de pantallas anuncia “Selección de Idiomas”, pero esa opción no existe en la página,

tal como se puede ver en la Figura 18.

Figura 18: Código fuente de la página "Tarifas"


44

Este encabezado causa confusión, ya que el encabezado aparece en la lista de encabezados de

NVDA, tal como se puede ver en la Figura 19, pero no tiene sentido porque ese apartado no

existe realmente en la página.

Figura 19: Lista de encabezados de la página web "Tarifas"

El mayor problema en esta página, que supone una gran barrera para su uso, es la existencia

de tres encabezados <h2> sin cerrar, como se puede ver en la Figura 20, Figura 21 y Figura 22.

45

Figura 20: Código fuente de la página web "Tarifas" - encabezado no cerrado


46


Además, también existe un encabezado <h3> sin cerrar, tal como se puede ver en la Figura 23.


Este error genera que los encabezados incluyan casi todo el contenido de la página web, tal

como se puede ver en la Figura 24.

47

Figura 24: Encabezados de la página web "Tarifas"

Este error provoca graves dificultades para navegar por el contenido de la página web, para

comprender su contenido y poder usarla correctamente, ya que los encabezados son siempre

verbalizados por el lector de pantalla.

Por ejemplo, en la Figura 25 se muestra un fragmento de la página web “Tarifas”.

Figura 25: Fragmento de la página web "Tarifas"

El lector de pantallas verbaliza esa parte de la página web de la siguiente forma; se puede

notar que el lector de pantallas repite numerosas veces “encabezado nivel 3”:

encabezado nivel 3

gráfico

Pictograma Solicitar plaza de movilidad reducida

48

Si selecciona la opción movilidad reducida se le

encabezado nivel 3

asignará una plaza adaptada para que pueda viajar con su propia silla.

encabezado nivel 3

gráfico

Pictograma Solicitud Atendo

ATENDO: Servicio de Atención y Asistencia a viajeros con movilidad

encabezado nivel 3

reducida para facilitar el acceso y tránsito en estaciones y trenes.

encabezado nivel 3

gráfico

Pictograma Selección de Asiento

La selección de asiento se presentará una vez introducida la forma

encabezado nivel 3

de pago.

encabezado nivel 3

gráfico

Pictograma Acompañamiento de Mascotas

Viajar con animales domésticos tiene un incremento en el

encabezado nivel 3

precio. Asegúrese de que recalcula el importe total de la compra.

encabezado nivel 3

enlace

Volver

encabezado nivel 3

enlace

Continuar

La opción para solicitar la asistencia del servicio Atendo no es accesible (Figura 26). Al activar el

botón “Solicitar Asistencia” (Figura 27) se muestra un formulario que estaba oculto (Figura 28).

La aparición de este formulario no se anuncia, por lo que su existencia pasa desapercibida para

un usuario de lector de pantallas.

49

Figura 26: Solicitud del servicio Atendo

Figura 27: Solicitud del servicio Atendo

Figura 28: Formulario para la solicitud del servicio Atendo

Criterio de conformidad 2.1.2 Sin trampas para el foco del teclado: Si es posible mover el

foco a un componente de la página usando una interfaz de teclado, entonces el foco se

puede quitar de ese componente usando sólo la interfaz de teclado y, si se requiere algo más

que las teclas de dirección o de tabulación, se informa al usuario el método apropiado para

mover el foco.

50

En el formulario para solicitar el servicio Atendo (Figura 28) existe una trampa de teclado en el

campo “Teléfono”. Tal como se puede ver en la Figura 29, este cuadro de texto tiene asociado

el evento “onkeypress”, este evento impide el correcto funcionamiento de la tecla de

tabulación (Tab). Cuando este control recibe el foco, es imposible salir de él únicamente con el

teclado.

Figura 29: Código fuente de la página “Tarifas” - trampa de teclado

51

Identificación El segundo paso del proceso de compra está disponible en la dirección URL:

https://venta.renfe.com/vol/datosComprador.do


Figura 30: Página web "Identificación"

En esta página existen algunos errores que ya se han comentado en las páginas anteriores:

- Apartado “Selección de Idiomas” que no existe.

- Encabezados <h2> sin cerrar, como se puede ver en la Figura 31, Figura 32 y Figura 33.

Este error provoca graves dificultades para navegar por el contenido de la página web,

para comprender su contenido y poder usarla correctamente, ya que los encabezados

son siempre verbalizados por el lector de pantalla.


52

Figura 31: Encabezados de la página web "Identificación"


53


En el Anexo 4 se encuentra la verbalización completa que realiza NVDA.

Las instrucciones para rellenar el formulario (Figura 34), “Los campos marcados con (*) son

obligatorios”, se encuentran después del formulario y lejos del mismo, lo cual dificulta su

interpretación.

Figura 34: Formulario en la página web "Identificación"

El mensaje de aviso que se muestra cuando hay un error en el formulario no es accesible

(Figura 35), no se anuncia mediante el lector de pantallas, por lo que si el usuario que utiliza un

lector de pantallas comete un error, es muy difícil que sea capaz de detectar y solucionar el

error.

54

Figura 35: Mensaje de error en la página web "Identificación"

55

Pago El cuarto paso del proceso de compra está disponible en la dirección URL:


La página web de “Pago” (Figura 36) presenta algunos de los problemas que existen en las

páginas ya analizadas.

Figura 36: Página web "Pago"

Si se realiza el pago mediante tarjeta bancaria, desde esta página web se realiza la conexión

con la entidad bancaria correspondiente. El mensaje de aviso en el que se explica lo que está

ocurriendo (Figura 37) no es leído por el lector de pantallas.

Un usuario que utilice un lector de pantallas puede experimentar muchos problemas de

orientación y navegación, ya que lo más probable es que no sea consciente de lo que está

pasando.


56

Figura 37: Página web con aviso de cambio a la entidad bancaria

Si se produce un error en el proceso de pago, el aviso que visualiza la página web de Renfe

(Figura 38) no es leído por el lector de pantallas.

Figura 38: Página web con mensaje de error en el pago

57

Cambio de un billete A la página web para realizar un cambio de billete se accede desde la página principal a través

del enlace “Cambios” (Figura 39):

Figura 39: Página principal con enlace "Cambios"

La URL de destino es:

https://venta.renfe.com/vol/accesoCambio.do?Idioma=es&Pais=ES&inirenfe=SI

La página web para realizar un cambio de billete presenta un formulario con dos cuadros de

texto (Figura 40):

https://venta.renfe.com/vol/accesoCambio.do?Idioma=es&Pais=ES&inirenfe=SI

58

Figura 40: Página web para realizar un cambio de billete

Algunos de los criterios de conformidad que se incumplen en esta página son:

Criterio de conformidad 2.4.1 Evitar bloques: Existe un mecanismo para evitar los bloques de

contenido que se repiten en múltiples páginas web.

No existe un mecanismo (enlaces “saltar a”) para saltar entre las distintas partes de la página.

Criterio de conformidad 2.4.2 Titulado de páginas: Las páginas web tienen títulos que

describen su temática o propósito.

El título de la página es “Renfe - Inicio Compra” (Figura 41), no indica que el propósito de esta

página es cambiar un billete ya comprado.

59

Figura 41: Código fuente de la página web para realizar un cambio de billete - título de la página

Criterio de conformidad 2.4.6 Encabezados y etiquetas: Los encabezados y etiquetas

describen el tema o propósito.

Existe un encabezado con el texto “Selección de Idiomas” (Figura 42), pero no existe esa parte

en la página web. Este encabezado posee la clase “oculto” (Figura 43), que desplaza el

encabezado fuera del área de visualización de la página web, lo que causa el efecto de estar

oculto para un usuario con visión. Sin embargo, para un usuario que utilice un lector de

pantallas este encabezado sí que se muestra, lo que crea confusión.

Figura 42: Código fuente de la página web para realizar un cambio de billete

60

Figura 43: Código fuente de la clase "oculto"

Existe un encabezado sin texto (Figura 44) que sin embargo se le va a mostrar a un usuario que

utilice un lector de pantallas.

Figura 44: Código fuente de la página web para realizar un cambio de billete - encabezado sin contenido

El contenido de varios encabezados es completamente confuso (Figura 45 y Figura 46) porque

existen etiquetas de encabezado <h2> que no se han cerrado correctamente (Figura 47).

61

Figura 45: Encabezados confusos en la página para realizar un cambio de billete

Figura 46: Encabezados confusos en la página para realizar un cambio de billete

62

Figura 47: Código fuente de la página web para realizar un cambio de billete - encabezado no cerrado

Criterio de conformidad 3.3.2 Etiquetas o instrucciones: Se proporcionan etiquetas o

instrucciones cuando el contenido requiere la introducción de datos por parte del usuario.

El cuadro de texto correspondiente a “Localizador” no tiene asignada correctamente una

etiqueta mediante la etiqueta <label> (Figura 48).

Figura 48: Código fuente de la página web para realizar un cambio de billete - asignación incorrecta de <label>

El cuadro de texto correspondiente a “Número de Billete” no tiene asignada correctamente

una etiqueta mediante la etiqueta <label> (Figura 49).

63

Figura 49: Código fuente de la página web para realizar un cambio de billete - asignación incorrecta de <label>

Criterio de conformidad 1.1.1 Contenido no textual: Todo contenido no textual que se

presenta al usuario tiene una alternativa textual que cumple el mismo propósito.

Existe una imagen (Figura 50) con contenido textual representado en forma de gráfico, por lo

que realmente es un contenido no textual. Esta imagen tiene definido como alternativa textual

el texto “Imagen publicitaria” (Figura 51), que no es una alternativa que cumpla el mismo

propósito.

Figura 50: Imagen con contenido textual representado en forma de gráfico

64

Figura 51: Código fuente de la página web para realizar un cambio de billete - alternativa textual incorrecta

Criterio de conformidad 3.3.1 Identificación de errores: Si se detecta automáticamente un

error en la entrada de datos, el elemento erróneo es identificado y el error se describe al

usuario mediante un texto.

El mensaje de error que se muestra cuando hay un error en los datos del formulario no es

leído por un lector de pantallas (Figura 52).

Figura 52: Mensaje de error en la página web para realizar un cambio de billete

Criterio de conformidad 2.1.1 Teclado: Toda la funcionalidad del contenido es operable a

través de una interfaz de teclado sin que se requiera una determinada velocidad para cada

pulsación individual de las teclas, excepto cuando la función interna requiere de una entrada

65

que depende del trayecto de los movimientos del usuario y no sólo de los puntos inicial y

final.

La ventana flotante con el mensaje de error que se muestra cuando hay un error en los datos

del formulario sólo se puede cerrar desde teclado navegando con el tabulador hasta llegar al

botón con el aspa “X”, no se proporciona un mecanismo directo de cierre desde el teclado

(Figura 52).

66

Anulación de un billete A la página web para realizar una anulación de billete se accede desde la página principal a

través del enlace “Anulaciones” (Figura 53):

Figura 53: Página principal con enlace "Anulaciones"


https://venta.renfe.com/vol/inicioAnulacion.do?Idioma=es&Pais=ES&inirenfe=SI

La página web para realizar una anulación de billete presenta un formulario con dos cuadros

de texto (Figura 54):

Figura 54: Página web para realizar una anulación de billete

https://venta.renfe.com/vol/inicioAnulacion.do?Idioma=es&Pais=ES&inirenfe=SI

67





Criterio de conformidad 2.4.2 Titulado de páginas: Las páginas web tienen títulos que

describen su temática o propósito.

El título de la página es “Renfe - Inicio Compra” (Figura 55), no indica que el propósito de esta

página es anular un billete ya comprado.

Figura 55: Código fuente de la página web para realizar una anulación de billete - título de la página








68

Figura 56: Código fuente de la página web para realizar una anulación de billete




69

Figura 58: Código fuente de la página web para realizar una anulación de billete - encabezado sin contenido

El contenido de varios encabezados es completamente confuso (Figura 59 y Figura 60) porque

existen etiquetas de encabezado <h2> que no se han cerrado correctamente (Figura 61).

Figura 59: Encabezados confusos en la página para realizar una anulación de billete

70

Figura 60: Encabezados confusos en la página para realizar una anulación de billete




El cuadro de texto correspondiente a “Localizador” no tiene asignada correctamente una

etiqueta mediante la etiqueta <label> (Figura 62).

71


El cuadro de texto correspondiente a “Número de Billete” no tiene asignada correctamente



Criterio de conformidad 1.1.1 Contenido no textual: Todo contenido no textual que se


Existe una imagen (Figura 64) con contenido textual representado en forma de gráfico, por lo

que realmente es un contenido no textual. Esta imagen tiene definido como alternativa textual

el texto “Imagen publicitaria” (Figura 65), que no es una alternativa que cumpla el mismo

propósito.

72

Figura 64: Imagen con contenido textual representado en forma de gráfico







73

Figura 66: Mensaje de error en la página web para realizar una anulación de billete





final.



botón “Cerrar”, no se proporciona un mecanismo directo de cierre desde el teclado (Figura

66).

74

Registro de usuario A la página web para registrarse como un nuevo usuario se accede desde la página principal a

través del enlace “Mi Cuenta” (Figura 67):

Figura 67: Página principal con enlace "Mi Cuenta"

Y a continuación el enlace “Registrar” (Figura 68):

Figura 68: Página con enlace "Registrar"


https://venta.renfe.com/vol/datosUsuario.do

https://venta.renfe.com/vol/datosUsuario.do

75

La página para registrarse como un nuevo usuario presenta un formulario dividido en varios

apartados (Figura 69):

7. Datos generales.

8. Datos del registro.

9. Datos personales.

10. Contacto.

11. Datos fiscales.

12. Conformidad.

Figura 69: Página web para realizar un registro como nuevo usuario












76

Figura 70: Código fuente de la página web para realizar un registro como nuevo usuario




77




La casilla de verificación correspondiente a “Marque esta casilla en caso de que NO desee

recibir comunicaciones publicitarias de RENFE-Operadora” no tiene asignada correctamente


Figura 73: Casilla de verificación

En el código fuente se puede comprobar que no se ha utilizado la etiqueta <label> para definir

la etiqueta de la casilla de verificación (Figura 74).

78


La casilla de verificación correspondiente a “Marque esta casilla si desea solicitar factura de los

billetes” no tiene asignada correctamente una etiqueta mediante la etiqueta <label> (Figura

75).




79


La casilla de verificación correspondiente a “Marque esta casilla si desea solicitar factura de los

billetes” no tiene asignada correctamente una etiqueta mediante la etiqueta <label> (Figura

77).




80







Figura 79: Mensaje de error en la página web para realizar un registro como nuevo usuario




81


final.



botón con forma de aspa “X”, no se proporciona un mecanismo directo de cierre desde el

teclado (Figura 79).

82

Otros problemas de accesibilidad Criterio de conformidad 1.1.1 Contenido no textual: Todo contenido no textual que se


Existen imágenes que transmiten información pero que no posee una alternativa textual que

cumple el mismo propósito. Por ejemplo, en la página “Reputación Corporativa” (URL:

http://www.renfe.com/empresa/RSE/index.html) la imagen de la Figura 80 que se puede ver

en la Figura 81 no posee un texto alternativo, tal como se puede ver en el fragmento de código

fuente que se muestra en la Figura 82, por lo que no se puede saber que Renfe es una empresa

asociada a “Centre for Reputation Leadership”.

Figura 80: Imagen sin texto alternativo

Figura 81: Página web “Reputación Corporativa”

http://www.renfe.com/empresa/RSE/index.html

83

Figura 82: Código fuente de la página “Reputación Corporativa”

Otro ejemplo se puede encontrar

85

Sin embargo, en otras páginas sí que se define el texto alternativo. Los desarrolladores de

Renfe parece que sí que saben hacer las cosas bien, pero no muestran interés en ello, ya que

omiten lo que deben hacer en algunas partes.

Además, en esta página se emplea una práctica muy mala y antigua que es el uso de imágenes

vacías a modo de relleno para realizar el diseño.

86

Criterio de conformidad 2.4.7 Foco visible: Cualquier interfaz de usuario operable por

teclado tiene una forma de operar en la cual el indicador del foco del teclado resulta visible.

El foco no se destaca en los elementos de la interfaz de las diferentes páginas del sitio web.

Por ejemplo, en la página principal (URL: http://www.renfe.com/):

13. En la Figura 83: Foco en el enlace "Welcome"Figura 83, el enlace “Welcome” posee el

foco, pero la línea punteada que dibuja automáticamente el navegador web es muy

difícil de ver.

14. En la Figura 84, el botón “Buscar” posee el foco, pero la línea punteada que dibuja

automáticamente el navegador web es muy difícil de ver.

15. En la Figura 85, el cuadro de texto “Origen” posee el foco, pero no se muestra ningún

indicador especial que señale que ese cuadro de texto posee el foco, sólo se muestra

el carácter del cursor (una línea vertical).


87

Figura 83: Foco en el enlace "Welcome"

Figura 84: Foco en el botón "Buscar"

88

Figura 85: Foco en el cuadro de texto "Origen"

89

Anexo 1: Página principal Transcripción de la verbalización realizada por NVDA 2015.2 de la URL http://www.renfe.com/:

encabezado nivel 1

Renfe

encabezado nivel 2

Selección de Idiomas


Bienvenido

visitado enlace

Welcome

enlace

Bienvenue

enlace

Benvingut (C)

enlace

Ongi etorri

enlace

Benvido

enlace

Benvingut (V)

fuera de lista



90

visitado enlace

La Empresa

|

visitado enlace

Viajeros

fuera de lista

Buscar en renfe.com

Texto a buscar

edición tiene auto completado

botón

Buscar


visitado enlace

Avisos

enlace

Atención al cliente

visitado enlace

Gabinete de Prensa

fuera de lista

encabezado nivel 2

Compra de Billetes

encabezado nivel 3

Acceso a Más Servicios Viajes y Mi Cuenta

Se puede hacer clic

enlace

Más

91

enlace

Servicios

gráfico

Se abre en ventana nueva

Se puede hacer clic

visitado enlace

Mi

visitado enlace

Cuenta

gráfico


Compra de Billetes

encabezado nivel 3

Selección de Origen, Destino, fechas de salida y regreso y hora.

Origen :

edición

Destino :

edición

Salida :


gráfico Se puede hacer clic

Seleccione una fecha

Seleccione la hora de salida

cuadro combinado Contraído

00:00

Regreso :

92


gráfico Se puede hacer clic

Seleccione una fecha

Seleccione la hora de regreso


00:00

encabezado nivel 3

Seleccione nº de viajeros

Adultos


1

Niños 4-13


0

Niños <4


0

encabezado nivel 3

Selección de Tarjeta +Renfe Joven o Dorada

casilla de verificación no marcado

93

+Renfe Joven


Tarjeta Dorada

encabezado nivel 3

Indique su Código Promocional

Cod.

Promocional :


botón

Comprar

enlace

Todas las estaciones

enlace

Factura on line

encabezado nivel 3

Compra Múltiple

Se puede hacer clic

enlace

Compra Múltiple

encabezado nivel 3

Cambios y Anulaciones

Se puede hacer clic

visitado enlace

Cambios

gráfico

94


Se puede hacer clic

visitado enlace

Anulaciones

gráfico


encabezado nivel 3

Enlace a Horarios Generales y de Feve

HORARIOS

Se puede hacer clic

visitado enlace

Cercanías

Se puede hacer clic

enlace

Feve

encabezado nivel 3

Más Operaciones

MÁS OPERACIONES


enlace

Mis Viajes - Imprimir billetes

gráfico


enlace

Abonos y BonoAVE

gráfico


enlace

Tarjeta +Renfe Joven

95

gráfico


enlace

Renfe Spain Pass

gráfico


enlace

InterRail

gráfico


enlace

Compra Múltiple

gráfico


visitado enlace

InfoTrenes

gráfico


enlace

Equipajes Puerta a Puerta

gráfico


enlace

Movilidad-Billete en el móvil

enlace

Ocio en Tren

gráfico


96

gráfico

nuevo

fuera de lista

encabezado nivel 2

Asistente Virtual

enlace

gráfico

Soy Irene. ¿Necesitas ayuda?

:: Se abre nueva ventana

encabezado nivel 2

Banner Publicitario


Se puede hacer clic

enlace

Viajar en Familia

Se puede hacer clic

enlace

Agosto tiene un Secreto

Se puede hacer clic

enlace

Tren del Peregrino

Se puede hacer clic

enlace

Equipajes Puerta a Puerta

Se puede hacer clic

enlace

Nuestras Promociones

fuera de lista

enlace

97

gráfico

Viajar en Familia

enlace

gráfico

Agosto tiene un secreto en: Madrid, Barcelona, Valencia, Zaragoza, Córdoba y Sevilla

enlace

gráfico

Tren del Peregrino.

Una forma diferente de recorrer el Camino de Santiago

enlace

gráfico

Este verano te dejamos las maletas en la puerta

enlace

gráfico

Nuestras Promociones

encabezado nivel 2

Menú rápido

Se puede hacer clic


enlace

INFORMACIÓN ÚTIL

enlace

para tu viaje

fuera de lista

Se puede hacer clic


visitado enlace

HORARIOS Y PRECIOS

98

visitado enlace

AVE, LD, Avant y MD

fuera de lista

Se puede hacer clic


enlace

TARJETA +Renfe

enlace

La mejor compañera de viaje

fuera de lista

Se puede hacer clic


enlace

TRENES TURÍSTICOS

enlace

Cuando el viaje es el tren

fuera de lista

encabezado nivel 2

Información para viajar

Lo más visto

General


enlace

Atendo

gráfico

Logo Atendo

99

enlace

Tarifas y descuentos

enlace

Grupos

gráfico

Logo Grupos

enlace

Máquinas Autoventa

enlace

Información para viajar

enlace

Renfe Agencias

gráfico


fuera de lista

Internacional


enlace

Viajes Internacionales

enlace

Renfe Spain Pass

enlace

Interrail

enlace

Eurail

enlace

Rail Plus

enlace

Puntos de Venta Internacional

100

fuera de lista

Empresa


enlace

Empleo y Formación

gráfico

nueva Oferta de Empleo

enlace

Mercancías

enlace

Fabricación y Mantenimiento

enlace

Proyecto AV Meca-Medina

enlace

Accesibilidad

gráfico


visitado enlace

Información Legal

gráfico


fuera de lista

encabezado nivel 2

Política de Cookies

Renfe.com utiliza cookies propias y de terceros para mejorar su experiencia de usuario y ofrecer

contenidos adaptados a sus intereses.

Si sigue navegando sin cambiar la configuración, consideramos que aceptas su uso.

101

enlace

Ver nuestra

enlace

política de cookies

enlace

gráfico

Ministerio de Fomento


enlace

gráfico

Facebook

enlace

gráfico

Youtube

enlace

gráfico

Twitter

enlace

gráfico

Flickr

enlace

gráfico

Blog de Renfe

enlace

103

Anexo 2: Disponibilidad Transcripción de la verbalización realizada por NVDA 2015.2 de la URL

https://venta.renfe.com/vol/buscarTren.do (no se incluye la transcripción completa porque es

muy extensa):

encabezado nivel 1

Renfe Compra de Billetes

encabezado nivel 2



visitado enlace

Inicio Compra

visitado enlace

Inicio Renfe

fuera de lista


enlace

FAQ

gráfico


enlace

Asistente

gráfico


enlace

Movilidad

gráfico



104

visitado enlace

Atendo

gráfico


visitado enlace

Avisos

gráfico


fuera de lista

encabezado nivel 2

Pasos de la Compra: DISPONIBILIDAD


DISPONIBILIDAD

TARIFAS

IDENTIFICACIÓN

PAGO

SELECCIÓN DE ASIENTO

BILLETE

fuera de lista


Origen :

Alicante/Alacant

Destino :

Madrid (*)

fuera de lista


105

Ida :

visitado enlace

Día Antes

31/07/2015

visitado enlace

Día Después

Vuelta :

visitado enlace

Día Antes

07/08/2015

visitado enlace

Día Después

fuera de lista


Adultos:

1

Niños 4-13:

0

Niños <4:

0

fuera de lista

encabezado nivel 2

Identificación

Mi Cuenta

Usuario:


Contraseña:

edición contraseña

Se puede hacer clic

106

visitado enlace

Entrar

Los precios están expresados en euros , puede consultar a Irene para realizar

la

enlace

conversión a otra

enlace

moneda.

gráfico



Precios más económicos

encabezado nivel 2

Ida

encabezado nivel 2

tabla con 14 filas y 7 columnas

fila 1 columna 1

Tren

encabezado nivel 2

columna 2

Salida

encabezado nivel 2

columna 3

Llegada

encabezado nivel 2

columna 4

Duración

encabezado nivel 2

107

columna 5

Turista

encabezado nivel 2

columna 6

Turista Plus

encabezado nivel 2

columna 7

Preferente

encabezado nivel 2

fila 2 Tren columna 1

visitado enlace

gráfico

Ver prestaciones del tren:Se abre nueva ventana

visitado enlace

AVE 05063

encabezado nivel 2

encabezado nivel 2

Salida columna 2

06.15

encabezado nivel 2

Llegada columna 3

08.42

encabezado nivel 2

Duración columna 4

2 h. 27 min.

encabezado nivel 2

Turista columna 5

Clase Turista

108

encabezado nivel 2



38,95

gráfico

Promo:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

encabezado nivel 2


42,20

gráfico

109

Promo +:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

encabezado nivel 2


51,90

gráfico


encabezado nivel 2

gráfico

Cambios 0%

110

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


64,90

gráfico

Flexible:

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 5%

fuera de lista

encabezado nivel 2


encabezado nivel 2


Clase Preferente

encabezado nivel 2



111

43,75

gráfico


encabezado nivel 2

gráfico

No admite cambio

encabezado nivel 2

gráfico

Anulaciones 50%

encabezado nivel 2


65,65

gráfico

Promo:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

112

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

encabezado nivel 2


71,10

gráfico

Promo +:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

113

encabezado nivel 2


87,50

gráfico


encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


109,40

gráfico

Flexible:

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 5%

114

fuera de lista

encabezado nivel 2


visitado enlace

gráfico


visitado enlace

AVE 05073

encabezado nivel 2

encabezado nivel 2

Salida columna 2

07.20

encabezado nivel 2

Llegada columna 3

09.32

encabezado nivel 2

Duración columna 4

2 h. 12 min.

encabezado nivel 2

Turista columna 5

Clase Turista

encabezado nivel 2



45,45

gráfico

115

Promo:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

encabezado nivel 2


48,70

gráfico

Promo +:

encabezado nivel 2

gráfico


116

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

encabezado nivel 2


51,90

gráfico


encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


117

64,90

gráfico

Flexible:

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 5%

fuera de lista

encabezado nivel 2


encabezado nivel 2


Clase Preferente

encabezado nivel 2



43,75

gráfico


encabezado nivel 2

gráfico

118

No admite cambio

encabezado nivel 2

gráfico

Anulaciones 50%

encabezado nivel 2


65,65

gráfico

Promo:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios - No

encabezado nivel 2

gráfico

Anulaciones - No

encabezado nivel 2

gráfico

Sala Club - No

119

encabezado nivel 2


71,10

gráfico

Promo +:

encabezado nivel 2

gráfico


encabezado nivel 2

gráfico


encabezado nivel 2

gráfico

Cambios 20%

encabezado nivel 2

gráfico

Anulaciones 30%

encabezado nivel 2


87,50

gráfico


120

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 40%

encabezado nivel 2


109,40

gráfico

Flexible:

encabezado nivel 2

gráfico

Cambios 0%

encabezado nivel 2

gráfico

Anulaciones 5%

fuera de lista

encabezado nivel 2


visitado enlace

121

gráfico


visitado enlace

AVE 05083

encabezado nivel 2

encabezado nivel 2

Salida columna 2

08.40

encabezado nivel 2

Llegada columna 3

11.07

encabezado nivel 2

Duración columna 4

2 h. 27 min.

Duración

Duración

2 h. 27 min.

11.07

encabezado nivel 2

Duración columna 4

122

Anexo 3: Tarifas Transcripción de la verbalización realizada por NVDA 2015.2 de la URL

https://venta.renfe.com/vol/reservar.do:

encabezado nivel 1


encabezado nivel 2



visitado enlace

Inicio Compra

visitado enlace

Inicio Renfe

fuera de lista


enlace

FAQ

gráfico


enlace

Asistente

gráfico


enlace

Movilidad

gráfico



123

visitado enlace

Atendo

gráfico


visitado enlace

Avisos

gráfico


fuera de lista

encabezado nivel 2

Pasos de la Compra: TARIFAS


DISPONIBILIDAD

TARIFAS

IDENTIFICACIÓN

PAGO


BILLETE

fuera de lista


Origen :

Alicante/Alacant

Destino :

Madrid-Puerta De Atocha

fuera de lista


Ida :

124

31/07/2015

Vuelta :

07/08/2015

fuera de lista


Adultos:

1

Niños 4-13:

0

Niños <4:

0

fuera de lista

encabezado nivel 2

Identificación

Mi Cuenta

Usuario sin identificar


fila 1 columna 1

Ida

enlace

AVE 05063

columna 2

Salida: 06:15

columna 3

columna 4

Llegada: 08:42

columna 5

fuera de tabla


125

fila 1 columna 1

Viajero

columna 2

Clase

columna 3

Precio €

columna 4

Tarifas y Descuentos disponibles

fila 2 Viajero columna 1

1

Clase columna 2

Turista

Precio € columna 3

38,95

Tarifas y Descuentos disponibles columna 4


Promo


fila 1 columna 1


- - Descuento F.Numerosa

columna 2

fuera de tabla

fuera de tabla

Total: 38,95


fila 1 columna 1

Vuelta

126

enlace

AVE 05072

columna 2

Salida: 07:45

columna 3

columna 4

Llegada: 10:10

columna 5

fuera de tabla


fila 1 columna 1

Viajero

columna 2

Clase

columna 3

Precio €

columna 4

Tarifas y Descuentos disponibles

fila 2 Viajero columna 1

1

Clase columna 2

Turista

Precio € columna 3

45,45

Tarifas y Descuentos disponibles columna 4


Promo


127

fila 1 columna 1


- - Descuento F.Numerosa

columna 2

fuera de tabla

fuera de tabla

Total: 45,45

Importe total de la compra: 84,40 €

enlace

Recalcular el precio de la compra

Solicita coche en silencio en la IDA


Solicita coche en silencio en la VUELTA


encabezado nivel 1

gráfico


encabezado nivel 1

Viaja en su propia silla de ruedas para la IDA


Solicitar plaza H

encabezado nivel 1

gráfico


encabezado nivel 1

Viaja en su propia silla de ruedas para la VUELTA


128

Solicitar plaza H

gráfico


Solicitud ATENDO: Personas con movilidad reducida

enlace

Solicitar Asistencia

encabezado nivel 2

gráfico


encabezado nivel 2

Selección de Asiento

encabezado nivel 2


Tras introducir su forma de pago, al final del proceso se presentará un

esquema de los asientos

encabezado nivel 2

disponibles para su selección.

encabezado nivel 2

encabezado nivel 2

gráfico


encabezado nivel 2

Animales Domésticos

encabezado nivel 2

enlace

Billete para Mascotas

encabezado nivel 2

129

encabezado nivel 3

gráfico


Si selecciona la opción movilidad reducida se le

encabezado nivel 3

asignará una plaza adaptada para que pueda viajar con su propia silla.

encabezado nivel 3

gráfico


ATENDO: Servicio de Atención y Asistencia a viajeros con movilidad

encabezado nivel 3

reducida para facilitar el acceso y tránsito en estaciones y trenes.

encabezado nivel 3

gráfico


La selección de asiento se presentará una vez introducida la forma

encabezado nivel 3

de pago.

encabezado nivel 3

gráfico


Viajar con animales domésticos tiene un incremento en el

encabezado nivel 3

precio. Asegúrese de que recalcula el importe total de la compra.

encabezado nivel 3

enlace

Volver

encabezado nivel 3

enlace

131

Anexo 4: Identificación Transcripción de la verbalización realizada por NVDA 2015.2 de la URL

https://venta.renfe.com/vol/datosComprador.do:

encabezado nivel 1


encabezado nivel 2



visitado enlace

Inicio Compra

visitado enlace

Inicio Renfe

fuera de lista


enlace

FAQ

gráfico


visitado enlace

Asistente

gráfico


enlace

Movilidad

gráfico



132

visitado enlace

Atendo

gráfico


visitado enlace

Avisos

gráfico


fuera de lista

encabezado nivel 2

Pasos de la Compra: IDENTIFICACIÓN


DISPONIBILIDAD

TARIFAS

IDENTIFICACIÓN

PAGO


BILLETE

fuera de lista


Origen :

Alicante/Alacant

Destino :

Elda-Petrer

fuera de lista


Ida :

133

31/07/2015

fuera de lista


Adultos:

1

Niños 4-13:

0

Niños <4:

0

fuera de lista

encabezado nivel 2

Identificación

Mi Cuenta

Usuario sin identificar

Importe total de la compra: 9,50 €

encabezado nivel 2

Identificación de los viajeros:

encabezado nivel 2

Para completar su compra, por favor, rellene los siguientes datos y le avisaremos en caso de

encabezado nivel 2

cualquier novedad que se pudiera producir antes del viaje.

encabezado nivel 2

encabezado nivel 2

encabezado nivel 2

Viajero 1 : Ida

encabezado nivel 2


fila 1 columna 1

Tren

134

encabezado nivel 2

columna 2

Salida

encabezado nivel 2

columna 3

Llegada

encabezado nivel 2

columna 4

Clase Precio (€)

encabezado nivel 2

columna 5

Tarifa

encabezado nivel 2


enlace

gráfico


TALGO 01102

encabezado nivel 2

Salida columna 2

08:00

encabezado nivel 2

Llegada columna 3

08:27

encabezado nivel 2

Clase Precio (€) columna 4

Turista : 9,50 €

encabezado nivel 2

135

Tarifa columna 5

Promo+

fuera de tabla

encabezado nivel 2

Datos Nominativos

encabezado nivel 2

Tipo documento

encabezado nivel 2

encabezado nivel 2


DNI

encabezado nivel 2

Documento

encabezado nivel 2

encabezado nivel 2

edición

encabezado nivel 2

Nombre (*)

encabezado nivel 2

encabezado nivel 2

edición

encabezado nivel 2

Apellido 1 (*)

encabezado nivel 2

encabezado nivel 2

edición

encabezado nivel 2

Apellido 2

encabezado nivel 2

136

encabezado nivel 2

edición

encabezado nivel 2

encabezado nivel 2

encabezado nivel 2

Email

encabezado nivel 2

encabezado nivel 2

edición

encabezado nivel 2

Teléfono

encabezado nivel 2

encabezado nivel 2

edición

encabezado nivel 2

Identificación del Comprador:

encabezado nivel 2

Datos Personales

encabezado nivel 2

Correo electrònico :

encabezado nivel 2


encabezado nivel 2

encabezado nivel 2

Prefijo :

encabezado nivel 2


+34

encabezado nivel 2

137

encabezado nivel 2

encabezado nivel 2

Teléfono Móvil :

encabezado nivel 2


encabezado nivel 2

encabezado nivel 2

encabezado nivel 2


encabezado nivel 2

Marque esta casilla en caso de que NO desee recibir comunicaciones publicitarias de

encabezado nivel 2

RENFE-Operadora.

encabezado nivel 2

encabezado nivel 2

gráfico

Imagen publicitaria

encabezado nivel 2


Los campos marcados (*) son obligatorios.

encabezado nivel 2

encabezado nivel 2

Renfe usará esta información cuando, por necesidades del servicio, tenga que ponerse en contacto

encabezado nivel 2

con usted.

encabezado nivel 2

encabezado nivel 2

Todos los datos se acogen a la Política de Privacidad de Datos, consulte la Información Legal.

fuera de lista

Aná lisis de lá áccesibilidád del sitio web de...

Documents

Transcript of Aná lisis de lá áccesibilidád del sitio web de...