Page 1

Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

Actividades Práctica: Análisis de accesibilidad de la prensa online Cada estudiante deberá evaluar los aspectos que se indican a continuación en una muestra de tres páginas de un sitio de prensa online. El informe a entregar, cuya extensión no deberá superar las 2.000 palabras, deberá recoger la muestra de páginas analizada y una descripción de los ejemplos de buenas y malas prácticas detectadas. Para detectar las barreras existentes en el sitio, los estudiantes deberán dar respuesta a las siguientes preguntas: Estructura: ¿Se respetan los niveles de encabezados? (¿La estructura se inicia con un <h1>?). ¿Las agrupaciones de enlaces (menú, por ejemplo) se marcan mediante listas? ¿Existen listas visuales que no están marcadas en el código? Nota: la estructura de encabezados y listas se puede observar con la barra AIS clicando en “estructura”. Una vez activadas las opciones correspondientes, se identificarán estos elementos mediante trozos de código: encabezados con <hn> y elementos de lista con <li>. Enlaces: ¿Tienen significado de forma autónoma? ¿Pueden percibir los usuarios que hay páginas que abren en ventana nueva o que se abrirá un documento en otro formato? Imágenes: ¿Se utiliza descripción en las imágenes? ¿Tienen las imágenes significativas una descripción alternativa? ¿El contraste de las imágenes que tienen texto impreso es adecuado?

TEMA 4 - Actividades


Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

Nota: utilizar opciones de “imágenes” y “color” de la barra AIS. Desde la opción IE de la misma barra se pueden activar y desactivar la descarga de imágenes. Formularios: ¿Los controles de formulario tienen una etiqueta visualmente asociada cercana a los mismos? ¿Existe relación entre etiqueta y control mediante el código? Nota: para que etiqueta y control estén relacionados mediante el código el valor for de la etiqueta y el valor id del control deberán ser los mismos. Puede verificarse con la barra AIS, desde “estructura”, “fieldset y label”. Más sobre accesibilidad: ¿Se utiliza código válido? ¿Se puede ampliar el tamaño de las letras? ¿Se puede visualizar la página desde navegadores distintos a Internet Explorer? Nota: existen accesos a validadores de código clicando en “validar” en la barra AIS. Se puede validar el contenido principal (HTML) y la presentación del mismo (CSS).

TEMA 4 - Actividades


Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

Características generales del sitio analizado El presente informe está centrado en el estudio de accesibilidad del periódico online “Público” cuya dirección web es http://www.publico.es/. Para dicho estudio hemos realizado una navegación estándar por el sitio web y para un análisis más exhaustivo hemos utilizado la barra de accesibilidad AIS. Los navegadores empleados para hacer el análisis han sido: Internet Explorer 8 y Mozilla Firefox 16.0. Las páginas del diario que hemos tomado como muestra han sido:  Portada: http://www.publico.es/  Sección de España: http://www.publico.es/espana  Sección de Empleo: http://empleo.publico.es/ofertas/

Valoración de la accesibilidad del sitio Análisis Estándar Nada más entrar en la portada nos encontramos con el primer obstáculo: la publicidad de la cabecera se maximiza cada cierto tiempo preestablecido impidiendo el acceso al menú principal. Dicho problema podemos observarlo en las siguientes capturas de pantalla:

TEMA 4 - Actividades


Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

Figura 1. Captura de pantalla de la portada del diario el Público con la publicidad minimizada

Figura 2. Captura de pantalla de la portada del diario el Público con la publicidad maximizada

Siguiendo con el análisis hemos utilizado las opciones del navegador para aumentar el tamaño del texto y hemos detectado que el 70% del texto de las páginas de la muestra cambian de tamaño mientras que el 30% (menú principal y columna lateral derecha) restante permanecen invariables.

TEMA 4 - Actividades


Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

La última página de la muestra (La sección de empleo) requiere un estudio más minucioso ya que es una página que contiene un formulario con controles HTML: cuadros de lista para seleccionar las características del trabajo a buscar y un botón submit para realizar la búsqueda de empleo según los parámetros seleccionados. Podemos observar a primera vista que ninguno de los cuadros de lista lleva asociado ninguna etiqueta (Sector, Provincia, Salario,…) y además con Internet Explorer aparece una lista debajo de las listas de experiencia y provincias que dificulta la identificación de éstas.

Figura 3. Captura de pantalla de formulario de búsqueda de empleo con el navegador Internet Explorer

Y si utilizamos el navegador Mozilla Firefox la apariencia de este formulario cambia, aparece un cuadro de lista nuevo (el que estaba oculto con IE), que no sabemos cuál es su funcionalidad.

Figura 4. Captura de pantalla de formulario de búsqueda de empleo con el navegador Mozilla Firefox

Podemos concluir que la página de búsqueda de empleo no es nada accesible, ni intuitiva.

Análisis Exhaustivo Para realizar el resto del análisis, nos hemos apoyado en la herramienta AIS y los resultados obtenidos son:

TEMA 4 - Actividades


Asignatura Usabilidad y accesibilidad online

Datos del alumno

Fecha

Apellidos: Arribas Arjona 22/11/12 Nombre: Ana Mª

 Con el validador de HTML del W3C se han detectado 82 errores y 76 warnings de media, obteniendo la página principal (Portada) 115 Errors y 106 warnings.  En cuanto a la maquetación de la página podemos decir que está hecha 100% con CSS, por lo tanto el contenido está separado de la apariencia.  El portal contiene varios iframes destinados a albergar publicidad y plugins de redes sociales dificultando su análisis con la herramienta AIS por lo que nos hemos visto obligados a hacer un análisis manual del código fuente de la página.  En cuanto a la estructura podemos destacar: o Que no se respetan los niveles de encabezado ya que comienzan con el encabezado H6 para el enlace Publico.es y continúan con encabezados H3-H4 para titulares de las noticias y H5 para subtitulares.  Y en cuanto a los menús y los submenús podemos afirmar que si están marcados mediante listas desordenadas, pero no se pueden acceder mediante teclas de acceso ya que carecen del atributo accesskey los enlaces del menú.  En cuanto a los enlaces podemos decir que todos los enlaces pertenecientes al menú de navegación principal tienen significado de forma autónoma y están reforzados con el atributo title. Y éstos como el resto de enlaces dentro del sitio web se aprecian cambios de color y de formato cuando nos situamos encima.  En cuanto a las imágenes podemos decir que la mayoría de éstas se utilizan como enlaces a noticias, todas ellas llevan una descripción alternativa que es el título de la noticia pero no informan de su función (leer en detalle la noticia). Sección

URL

Accesibilidad

Portada

http://www.publico.es/

Media

España

http://www.publico.es/espana

Media

Empleo

http://empleo.publico.es/ofertas/ Baja

TEMA 4 - Actividades

Accesibilidad y usabilidad del periódico el Público  

Accesibilidad y usabilidad del periódico el Público