PDF de programación - USABILIDAD Y ACCESIBILIDAD WEB

USABILIDAD Y ACCESIBILIDAD

WEB (UNED 2011/2012)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jose Alberto Benítez Andrades 

71454586‐A 

Master en Lenguajes y Sistemas Informáticos: Tecnologías del Lenguaje en La Web 



 

Usabilidad y Accesibilidad Web                                    Máster: Tecnologías del Lenguaje en la Web 
Curso 2011/2012                                                                                    Jose Alberto Benítez Andrades 
 
Contenido
USABILIDAD Y ACCESIBILIDAD WEB (UNED 2011/2012) ............................................................... 3 
Práctica 1.4. Usabilidad y Accesibilidad .................................................................................... 3 
Actividad 2.1. Lectura guía Webestilo ....................................................................................... 3 
Actividad 2.2. Visita Web del CSU ............................................................................................. 7 
Actividad 2.3. Personas con Discapacidad ................................................................................ 7 
Práctica 2.2. Terminales de Acceso ......................................................................................... 12 
Práctica 2.3. Dificultades de acceso ........................................................................................ 12 
Práctica 2.4. Lectores de pantalla libres .................................................................................. 13 
Actividad 3.1. Características TAW.......................................................................................... 14 
Práctica 3.1.‐ Aplicar el Test de Accesibilidad web TAW. ........................................................ 15 
Actividad 4.1. Comparativa de herramientas y Actividad 4.2. Navegadores de acceso 
alternativo. .............................................................................................................................. 20 
Actividad 5.1 – Accesibilidad de los contenidos ...................................................................... 23 
ACCESIBILIDAD EN DOCUMENTOS  PDF .............................................................................. 23 
ACCESBILIDAD EN FICHEROS FLV ........................................................................................ 26 
Práctica 5.1.‐ Evaluación de la Accesibilidad web del portal OpenScout ................................ 27 
Práctica 6.1.‐ Arquitectura de la Información, el diseño web centrado en el usuario, y los 
aspectos básicos de la usabilidad en la web. .......................................................................... 34 

 

 

 



Página 2

Usabilidad y Accesibilidad Web                                    Máster: Tecnologías del Lenguaje en la Web 
Curso 2011/2012                                                                                    Jose Alberto Benítez Andrades 
 

USABILIDAD Y ACCESIBILIDAD

WEB (UNED 2011/2012)

Práctica 1.4. Usabilidad y Accesibilidad

Actividad 2.1. Lectura guía Webestilo
Descripción.‐  Lea  la  guía  de  estilo  Webestilo  http://www.webestilo.com/guia/  y  extraiga  las 
pautas principales para el diseño apropiado y la usabilidad de páginas de web. 

Los elementos principales y subelementos a tener en cuenta a la hora de realizar el desarrollo 
de un sitio web, son los siguientes: 

 

1. Estructura 

 


Página 3

Usabilidad y Accesibilidad Web                                    Máster: Tecnologías del Lenguaje en la Web 
Curso 2011/2012                                                                                    Jose Alberto Benítez Andrades 
 

Teniendo  una  buena  estructura,  el  lector  podrá  encontrar  lo  que  necesita  de  forma 
más  rápida  y  será  agradable  su  lectura.  En  caso  contrario,  incitaremos  al  usuario  a  que 
abandone la web, debido a una falta de claridad. 

Antes de realizar una página web, se debe tener claro cuál va a ser el mapa web del 
sitio, no se puede comenzar a realizar una web sin haber hecho un esquema previo de la 
estructura de su contenido. 

Dependiendo del tipo de web que vayamos a realizar, elegiremos un tipo de estructura 

u otro. Existen tres tipos principalmente: 

I.

II.

III.

Jerárquica: Es la estructura típica de árbol, de una raíz salen distintas ramas y 
de estas ramas se llegan a desglosar hojas (estructura de temas divididos en 
subtemas y así de forma sucesiva). 
Lineal:  Esta  forma  sólo  tiene  un  nivel  y  se  recorre  como  si  de  un  libro  se 
tratase. Para realizar tutoriales no muy extensos y que deben seguirse paso a 
paso, puede ser una buena estructura. 
Lineal con jerarquía: Este tipo de estructura mezcla las dos anteriores, quizá es 
la más utilizada, ya que, la combinación de estas dos estructuras es bastante 
cómoda para los lectores. 

Otro elemento importante en la estructura de las páginas web es la navegación. En 
muchas ocasiones es preferible tener enlaces tanto al inicio como al final de la página, 
para que el lector, a medida que acabe de leer la información necesaria, pueda volver 
al principio o seguir con la lectura de la siguiente información sin tener que volver al 
inicio.  También  es  importante  crear  índices  y  mapas  web  para  que  el  usuario,  si  lo 
necesita, pueda ir rápidamente a una sección concreta. 

La  estructura  es  muy  importante  para  la  usabilidad  de  un  sitio  web.  Mejor 

estructura, más usable es la web. 

2. Esquema de página 

El  esquema  de  la  página  web  es  muy  importante.  Por  ejemplo,  el  tamaño  de  la 
página,  la  altura  de  la  misma,  es  un  elemento  importante.  Mientras  menos  altura 
tenga la página, más fácil es captar el interés del lector. Cuando una página web tiene 
scroll, el usuario tiende a perder el interés a medida que va bajando por el sitio web. La 
medida  estándar  es  hacer 
las  páginas  con  una  pantalla  y  media  de  altura 
aproximadamente.  También  se  debe  tener  en  cuenta  que  si  necesitamos  poner  una 
cantidad de texto bastante extensa para explicar algo, es mejor ponerlo en una página 
larga a tener que ir clickando enlace por enlace. 

Cuando  se  escriben  artículos,  es  importante  que  quede  reflejada  la  información 
del autor, e incluso algún método de contacto con el mismo. Además, hay que fechar 
todo, para que el lector conozca la edad del artículo que está leyendo. Hay que evitar 
formatos de fecha que sean de difícil lectura. 

 


Página 4

Usabilidad y Accesibilidad Web                                    Máster: Tecnologías del Lenguaje en la Web 
Curso 2011/2012                                                                                    Jose Alberto Benítez Andrades 
 

Los enlaces deben ser claros. Hay que evitar expresiones del tipo “click aquí”, es 
mejor destacar la información como si no hubiera enlace. También debemos tener en 
cuenta  que  los  enlaces  no  deben  ser  muy  largos  y  que  deben  resaltarse  de  alguna 
manera en el código de estilos. Se debe comprobar que los enlaces no están rotos. 

Es importante también que una web sea independiente del navegador en el que se 
lee, eso en estos tiempos es bastante complicado, ya que, no todos los navegadores 
cumplen  con  los  estándares.  Pero  lo  mejor  es  seguir  unos  estándares  como  los  del 
W3C y utilizar sus validadores para comprobar que la web está bien hecha. Si nuestra 
web  tiene  scripts  realizados  en  JavaScript  u  otros  lenguajes,  es  interesante  realizar 
siempre una versión que funcione sin ellos. 

Y por último, el contenido de la web debe ser claro, conciso y estar correctamente 

escrito, se deben evitar las faltas de ortografía y errores gramaticales. 

3. Tipografía 

La elección de una buena tipografía para utilizar en la página web es uno de los 
elementos  más  importantes  a  tener  en  cuenta.  Si  la  web  tiene  un  diseño  precioso, 
pero  elegimos  una  fuente  que  no  es  bonita  o  incluso  una  fuente  que  tiene  mucho 
estilo, pero que es totalmente ilegible, realmente no hemos realizado un buen trabajo. 

El  lector  debe  sentirse  cómodo  a  medida  que  lee  el  contenido  en  la  web. 
Debemos  tener  en  cuenta  el  tipo  de  fuente  que  queremos  utilizar  y  el  tamaño. 
Sabiendo además, que las fuentes no son iguales en los PC que en los MAC y que no 
todas  las  fuentes  están  en  todos  los  ordenadores.  Actualmente,  si  queremos  usar 
fuentes estilizadas que se salgan fuera de lo común, tenemos unas librerías que nos 
proporciona Google a través de Google Fonts que son bastante útiles para evitar que la 
web se vea distinta en un ordenador u otro. 

4. Gráficos 

En  temas  de  accesibilidad,  es  muy  importante  que  todas  las  imágenes  que 
insertemos en nuestro sitio web, tengan asignado el tamaño de ancho y alto y un texto 
alternativo. Esto es muy importante, ya que, para navegadores especiales que utilizan 
personas  invidentes,  el  texto  alternativo  sirve  para  indicar  qué  es  lo  que  muestra  la 
imagen. 

 
Hay que tener en cuenta el formato de las imágenes. Si vamos a utilizar una 
imagen de fondo con muchos detalles gráficos, un PNG va a tener mayor tamaño que 
un  JPG,  con  lo  cual  la  página  va  a  tardar  más  en  cargarse.  Si  necesitamos  usar  una 
imagen varias veces, podemos hacerlo y es positivo, ya que, la imagen solo se cargará 
una vez, el resto de veces estará almacenada en caché y no se notará la carga. 

Dependiendo  del  tipo  de  imagen  que  queramos  mostrar,  deberemos  elegir 

 
entre JPEG, GIF y PNG. 

 

 


Página 5

Usabilidad y Accesibilidad Web                                    Máster: Tecnologías del Lenguaje en la Web 
Curso 2011/2012                                                                                    Jose Alberto Benítez Andrades 
 

 

 

 

5. Banners  

La utilización de banners es positiva, siempre y cuando cumplan con un