Análisis de accesibilidad y usabilidad en webs de medios de comunicación

A continuación vamos a analizar la experiencia del usuario, la usabiliad, la accesibilidad y el análisis de composición y validación de estándares de tres sitios web pertenecientes a los medios de comunicación que ya habíamos analizado previamente con otros criterios. Estos medios son:

*  Web de televisión de ” TVE”

http://www.rtve.es/television/

*  Web de radio “Onda Cero”

http://www.ondacero.es/OndaCero/

* Web del diario “El País”

http://www.elpais.com/

 

Análisis web TVE

logotve

A continuación vamos a analizar la web de TVE en relación al análisis global de la experiencia del usuario, análisis de usabilidad, análisis de accesibilidad y análisis de composición y valoración de estándares.

Análisis global de experiencia del usuario

En este apartado vamos a analizar la página en cuestión atendiendo a la utilidad, a lo utilizable de la misma, a lo deseada, a lo valiosa, a lo encontrable, a lo creíble y a lo accesible según los siete parámetros de Morville.

Considero que la página de TVE es bastante útil ya que posee una gran cantidad de información que al usuario puede resultarle de gran interés.

Es bastante utilizable ya que sus contenidos se encuentran organizados correctamente de manera que cualquiera puede acceder a ellos y buscar la información de su agrado de manera sencilla y directa.

Es deseable ya que el sitio en cuestión ofrece gran cantidad de contenidos mutimedia (videos, audios, etc.) que son buscados y visionados por una gran cantidad de personas.

Es valiosa porque poseee, por ejemplo, una videoteca de programas, series, reportajes y noticias emitidas recientemente, lo que amplía su valor.

Es encontrable ya que el acceso al sitio es muy sencillo (se encuentra correctamente indexada en google y se puede acceder de forma sencilla desde este buscador).

Es una página creible por su presentación y organización de contenidos.

Es accesible puesto que su diseño así lo permite.

Análisis de usabilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Disable”, “Cookies”, “CSS”, “Forms”, “Images”, “Miscelaneous -> Linenariza page”, “Miscellaneous -> Small Screen Rendering” y “Resize”.

DISABLE

Utilizando esta herramienta de la “Web developer toolbar” podemos ver que la web en cuestión solamente sufre cambios cuando desactivamos la función “Disable Page Colors”, quedando su fondo en blanco y desapareciendo algunos pequeños detalles como podrían ser las tablas de programación de televisión y su fondo de la página de inicio. Lo mismo pasaría en la sección de “TVE a la CARTA”, donde vemos que el color negro del fondo desaparece.

COOKIES

La página no sufre ningún cambio cuando utilizamos estas opciones, además podemos ver como la web no dispone de cookies guardadas.

CSS

Cuando desactivamos todos los estilos CSS de la página de RTVE, la página cambia completamente. Se pierde la estructura de la web y con ella, mucha información. El menú ya no se visualiza en flash sino en html y en una columna vertical a la izquierda de la página. Los contenidos se disponen unos bajo otros sin formato (tablas, estructura, etc.). Los formatos de los programas de televisión también desaparecen así como el formato de la programación de televisión que pierde su estructura, organización y color de fondo. Las imágenes se mantienen intactas pero sin respetar su organización normal dentro de la página (aparecen desordenadas).

tve_sincss

Lo mismo ocurre si marcamos la opción “Display CSS by Media Type -> Handhled”

FORMS

Al marcar la opción de “Forms -> Display form details” aparecen trozos del código en algunos bloques de información, por ejemplo en la caja de buscador de la página que se encuentra arriba a la derecha y en la caja dedicada a encuestas para el publico.

IMAGES

Cuando marcamos “Images -> Disable images”, desaparecen todas las imágenes.  Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes.

MISCELLANEOUS-> LINENARIZE PAGE

Al usar esta función toda la información de la página se dispone de manera vertical en una columna orientada a la izquierda de la página.

tveizq

MISCELLANEOUS -> SMALL SECREEN RENDERING

La función resulta parecida a la anterior aunque la única diferencia es que la columna de información de la izquierda es mucho más pequeña.

RESIZE

Mediante “Resize -> Display Window Size” se nos muestra el tamaño de la ventana. Si marcamos “Resize Window”podemos redimensionar estas dimensiones.

Análisis de Accesibilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Information -> Abreviations”, “Tab Index”, “Docuement Outline”, “Images -> Display Atributes” y tambien se validará el sitio con la herramienta “Tools -> Validate WAI”.

INFORMATION>ABREVIATIONS

No sucede nada en la página al marcar esta opción.

TAB INDEX

No sucede nada en la página al marcar esta opción.

DOCUMENT OUTLINE

Podemos ver el contenido al que tenemos acceso offline. Nos aparece una lista de links entre los que podemos elegir.

docouttve

IMAGES -> DISPLAY ALT ATRIBUTES

Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes.

VAIDACIÓN DE A PÁGINA CON “TOOLS ->VALIDATE WAI”

Podemos encontrarnos una tabla en la que se nos indican varios errores de la página.

Análisis de composición y valoración de estándares

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Outline-> Frames”, “Outline -> Tables”, “Outline -> Block Level Elements”, además de validarse las hojas de estilo con la herramienta “Tools -> Validate CSS”, validar el HTML con la herramienta “Tools -> Validate HTML” y validar los Feed con la herramienta “Tools -> Validate Feed”.

OUTLINE -> FRAMES

No sucede nada en la página al marcar esta opción.

OUTLINE -> TABLES

No sucede nada en la página al marcar esta opción.

OUTLINE BLOCK LEVEL ELEMENTS

Al marcarlo, las cajas de la página aparecen con un borde de marco de color azul o rojo.

tvecajas

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE HTML”

Podemos encontrarnos una tabla en la que se nos indican varios errores del código html de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE CSS”

Podemos encontrarnos una tabla en la que se nos indican varios errores de CSS de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE FEED”

Podemos encontrarnos una tabla en la que se nos indican varios errores de la página

Análisis web Onda Cero

logonda-copia

A continuación vamos a analizar la web de Onda Cero en relación al análisis global de la experiencia del usuario, análisis de usabilidad, análisis de accesibilidad y análisis de composición y valoración de estándares.

Análisis global de experiencia del usuario

En este apartado vamos a analizar la página en cuestión atendiendo a la utilidad, a lo utilizable de la misma, a lo deseada, a lo valiosa, a lo encontrable, a lo creíble y a lo accesible que es la página según los siete parámetros de Morville.

Considero que la página de Onda Cero es bastante poco útil ya que posee poca cantidad de información que al usuario podría resultarle de interés.

Su utilización deja bastante que desear ya que sus contenidos se encuentran organizados de forma confusa de manera que alguien que acceda a ella tendrá problemas para poder acceder a la información que quiere.

Es deseable ya que el sitio en cuestión ofrece cantidad de contenidos mutimedia (audios, etc.), sin embargo, aún deja bastante que desear ya que se echa de menos más variedad de los mismos y una mayor calidad.

No es muy valiosa aunque podría valorarse su parte de audio en diferido.

Es encontrable ya que el acceso al sitio es muy sencillo (se encuentra correctamente indexada en google y se puede acceder de forma sencilla desde este buscador).

Es una página no creible por su presentación y organización de contenidos.

No es muy accesibe ya que el acceso a los contenidos es bastante problemático.

Análisis de usabilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Disable”, “Cookies”, “CSS”, “Forms”, “Images”, “Miscelaneous -> Linenariza page”, “Miscellaneous -> Small Screen Rendering” y “Resize”.

DISABLE

Utilizando esta herramienta podemos ver que la web, al igual  que la anterior analizada, solamente sufre cambios cuando desactivamos la función “Disable Page Colors”, quedando su fondo en blanco y desapareciendo algunos pequeños detalles aunque ninguno que impida la comprensión de información.

ondacolor

COOKIES

La página no sufre ningún cambio cuando utilizamos estas opciones, además podemos ver como la web tampoco dispone de cookies guardadas.

CSS

Cuando desactivamos todos los estilos CSS de la página de Onda Cero, la página cambia completamente, prácticamente lo mismo que en el caso anterior. Se pierde la estructura de la web y con ella, mucha información. El menú ya no se visualiza en flash sino en html y en una columna vertical a la izquierda de la página. Los contenidos se disponen unos bajo otros sin formato (tablas, estructura, etc.). Los fromatos de los programas de radio también desaparecen así como el formato de las tablas que pierden estructura, organización y color de fondo. Las imágenes se mantienen intactas pero sin respetar su organización normal dentro de la página (aparecen desordenadas).

Lo mismo ocurre si marcamos la opción “Display CSS by Media Type -> Handhled”

FORMS

Al marcar la opción de “Forms -> Display form details” aparecen trozos del código en algunos bloques de información, por ejemplo en la caja de buscador de la página que se encuentra arriba en el centro, en la caja de resultados de fútbol y en los bloques de audios, podcast y tu frecuencia.

IMAGES

Cuando marcamos “Images -> Disable images”, desaparecen todas las imágenes. Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes.

MISCELLANEOUS-> LINENARIZE PAGE

Al usar esta función toda la información de la página se dispone de manera vertical en una columna orientada a la izquierda de la página.

linenaonda

MISCELLANEOUS -> SMALL SECREEN RENDERING

La función resulta parecida a la anterior aunque la única diferencia es que la columna de información de la izquierda es mucho más pequeña.

RESIZE

Mediante “Resize -> Display Window Size”, al igual que en la web anterior se nos muestra el tamaño de la ventana. Si marcamos “Resize Window”podemos redimensionar estas dimensiones.

Análisis de Accesibilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Information -> Abreviations”, “Tab Index”, “Docuement Outline”, “Images -> Display Atributes” y tambien se validará el sitio con la herramienta “Tools -> Validate WAI”.

INFORMATION>ABREVIATIONS

No sucede nada en la página al marcar esta opción.

TAB INDEX

No sucede nada en la página al marcar esta opción.

DOCUMENT OUTLINE

Podemos ver el contenido al que tenemos acceso offline. Nos aparece una lista de links entre los que podemos elegir para acceder al contenido.

outlineonda

IMAGES -> DISPLAY ALT ATRIBUTES

Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes.

VAIDACIÓN DE A PÁGINA CON “TOOLS ->VALIDATE WAI”

Al igual que en la web anterior podemos encontrarnos una tabla en la que se nos indican varios errores de la página.

Análisis de composición y valoración de estándares

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Outline-> Frames”, “Outline -> Tables”, “Outline -> Block Level Elements”, además de validarse las hojas de estilo con la herramienta “Tools -> Validate CSS”, validar el HTML con la herramienta “Tools -> Validate HTML” y validar los Feed con la herramienta “Tools -> Validate Feed”.

OUTLINE -> FRAMES

No sucede nada en la página al marcar esta opción, así que entendemos que la página no lleva marcos.

OUTLINE -> TABLES

No sucede nada en la página al marcar esta opción.

OUTLINE BLOCK LEVEL ELEMENTS

Al marcarlo, las cajas de la página aparecen con un borde de marco de color azul, verde o rojo. Muchas de estas cajas no pueden verse o intuirse a simple vista así que estos bordes de color ocupan espacios que en principio no están destinados a cajas.

cajasonda

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE HTML”

Podemos encontrarnos una tabla en la que se nos indican varios errores del código html de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE CSS”

Podemos encontrarnos una tabla en la que se nos indican varios errores de CSS de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE FEED”

Podemos encontrarnos una tabla en la que se nos indican varios errores de la página.

Análisis web El País

logopais

A continuación vamos a analizar la web de El País en relación al análisis global de la experiencia del usuario, análisis de usabilidad, análisis de accesibilidad y análisis de composición y valoración de estándares.

Análisis global de experiencia del usuario

En este apartado vamos a analizar la página en cuestión atendiendo a la utilidad, a lo utilizable de la misma, a lo deseada, a lo valiosa, a loencontrable, a lo creíble y a lo accesiblesegún los siete parámetros de Morville.

Considero que la página de El País es bastante útil ya que posee una gran cantidad de información que al usuario puede resultarle de gran interés.

Al igual que en la página de TVE,  es bastante utilizable ya que sus contenidos se encuentran organizados correctamente de manera que cualquiera puede acceder a ellos y buscar la información de su agrado de manera sencilla y directa.

Es deseable ya que el sitio en cuestión ofrece gran cantidad de contenidos mutimedia (videos, audios, etc.) que son buscados y visionados por una gran cantidad de personas.

Es valiosa porque poseee, por ejemplo, una hemeroteca del diario impreso en la que se pueden consultar todas las portadas de todos los periódicos de “El País” impresas hasta la fecha.

Es encontrable ya que el acceso al sitio es muy sencillo (se encuentra correctamente indexada en google y se puede acceder de forma sencilla desde este buscador).

Es una página creible por su presentación y organización de contenidos.

Es accesible puesto que su diseño así lo permite, siendo sus contenidos de acceso viable.

Análisis de usabilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Disable”, “Cookies”, “CSS”, “Forms”, “Images”, “Miscelaneous -> Linenariza page”, “Miscellaneous -> Small Screen Rendering” y “Resize”.

DISABLE

Utilizando esta herramienta podemos observar que la web en cuestión solamente sufre cambios cuando desactivamos la función “Disable Page Colors”, quedando su fondo en blanco y desapareciendo algunos pequeños detalles.

COOKIES

La página no sufre ningún cambio cuando utilizamos esta opción, además podemos ver como la web no dispone de cookies guardadas.

CSS

Cuando desactivamos todos los estilos CSS de la página de El País, la página cambia completamente. Se pierde la estructura de la web y con ella, mucha información. El menú ya no se visualiza en flash sino que se vuelve a mostrar en html y en una columna vertical a la izquierda de la página. Los contenidos se disponen unos bajo otros sin formato (tablas, estructura, etc.). Los formatos de los programas de televisión también desaparecen así como algunas imágenes  o videos que dejan de visualizarse.

csspais

Lo mismo ocurre si marcamos la opción “Display CSS by Media Type -> Handhled”

FORMS

Al marcar la opción de “Forms -> Display form details” aparecen trozos del código en algunos bloques de información, por ejemplo en la caja del menú principal de la página que se encuentra arriba y en la caja dedicada al tiempo.

IMAGES

Cuando marcamos “Images -> Disable images”, desaparecen casi todas las imágenes. Sólo permanecería intacta la imagen principal o la que correspondería a la noticia que podríamos llamar la más importante (aparece a la izquierda arriba).  Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes.

MISCELLANEOUS-> LINENARIZE PAGE

Al usar esta función toda la información de la página se dispone de manera vertical en una columna orientada a la izquierda de la página. Además aparece un cuadro verde en la parte superior.

MISCELLANEOUS -> SMALL SECREEN RENDERING

La función resulta parecida a la anterior aunque la única diferencia es que la columna de información de la izquierda es mucho más pequeña (también aparece un cuadro con el fondo en color verde).

smallelpais

RESIZE

Mediante “Resize -> Display Window Size” se nos muestra el tamaño de la ventana. Si marcamos “Resize Window”podemos redimensionar estas dimensiones.

Análisis de Accesibilidad

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Information -> Abreviations”, “Tab Index”, “Docuement Outline”, “Images -> Display Atributes” y tambien se validará el sitio con la herramienta “Tools -> Validate WAI”.

INFORMATION>ABREVIATIONS

Aparecen pequeños titulares sobre cada noticia y algunos otros datos de menor importancia.

TAB INDEX

No sucede nada en la página al marcar esta opción.

DOCUMENT OUTLINE

Igual que en los dos ejemplos anteriores podemos ver el contenido al que tenemos acceso offline. Nos aparece una lista de links entre los que podemos elegir.

IMAGES -> DISPLAY ALT ATRIBUTES

Al marcar “Images ->Display Alt Atributes”, aparece visible la metainformación de cada imagen o lo que se mostraría si hubiese algún problema para visualizar correctamente estas imágenes. Esta información es la misma que nos aparece cuando marcamos la opción de “Information -> abreviations”.

altpais

VAIDACIÓN DE LA PÁGINA CON “TOOLS ->VALIDATE WAI”

Podemos encontrarnos una tabla en la que se nos indican varios errores de la página.

Análisis de composición y valoración de estándares

Vamos a analizar la página en relación a las siguientes herramientas de la barra “Web Developer Toolbar”: “Outline-> Frames”, “Outline -> Tables”, “Outline -> Block Level Elements”, además de validarse las hojas de estilo con la herramienta “Tools -> Validate CSS”, validar el HTML con la herramienta “Tools -> Validate HTML” y validar los Feed con la herramienta “Tools -> Validate Feed”.

OUTLINE -> FRAMES

Se marcan en color azul algunos de los bordes de algunas tablas concretas que componen la página principal.

OUTLINE -> TABLES

No sucede nada en la página al marcar esta opción.

OUTLINE BLOCK LEVEL ELEMENTS

Al marcarlo, las cajas de la página aparecen con un borde de marco de color azul, rojo o verde. Al igual que en el ejemplo anterior muchas de estas cajas no pueden verse o intuirse a simple vista así que estos bordes de color ocupan espacios que en principio no están destinados a cajas.

alt2pais

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE HTML”

Podemos encontrarnos una tabla en la que se nos indican varios errores del código html de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE CSS”

Podemos encontrarnos una tabla en la que se nos indican varios errores de CSS de la página.

VALIDACIÓN DE LA PÁGINA CON “TOOLS – > VALIDATE FEED”

Podemos encontrarnos una tabla en la que se nos indican varios errores de la página.