Expecialista de usuario es una asignatura perteneciente al Curso de especialista en diseño web que se imparte en la Universidad de Alicante durante el curso 2010-11.
Lugar de impartición: Universidad de Alicante
Fecha: 20 de noviembre de 2010
Profesores: Sergio Luján Mora
Materiales: RUA: Apuntes de Introducción a la accesibilidad web (DisWeb 10-11)
A partir de las notas sobre el curso realizadas por los alumnos Juan Delgado, Silvia Crespo, Blanca Martínez y Nuria Ripoll Gosálbez.
Más información:
Para referirnos a los "discapacitados", lo correcto sería: persona con discapacidad o persona con diversidad funcional. Porque, por ejemplo, un miope o un tartamudo son personas con un tipo de discapacidad. Todos podemos tener algún tipo de discapacidad.
A la hora de diseñar un sitio web, debemos de evitar poner barreras. Para ello, tenemos que saber qué tipo de discapacidades existen antes de ponernos a crear un sitio web, porque tenemos que contemplar los requisitos técnicos o dispositivos que pudieran necesitar para poder navegar y leer sin problemas nuestro sitio web.
Ayudas técnicas: dispositivos (hardware y software) que ayudan a los usuarios a utilizar un ordenador. Por ejemplo, un teclado virtual en pantalla que emplea texto predictivo (escribes tres letras y se termina sola la palabra).
Más información:
HTML es un lenguaje de marcado que se compone de etiquetas (unas 90) y cada una significa algo.
Cada etiqueta se abre con <etiqueta> y se cierra con </etiqueta>.
La diferencia principal entre HTML 4 (unas 90 etiquetas) y HTML 5 (unas 105 etiquetas)
es que hay etiquetas nuevas específicas para apartados de las páginas webs como pueden ser artículos (<article>),
barra de navegación (<nav>), encabezamiento (<header>), pie de página (<footer>), etc.
Esto mejora la navegación y la accesibilidad para personas que utilicen ayudas técnicas como puede ser Jaws, un lector de pantallas que lee las webs para las personas ciegas.
Así el software sabrá qué parte de la web son artículos, qué parte es la barra de navegación, dónde está el pie página, etc.
El <div> es una caja, un contenedor que agrupa indiscriminadamente, no distingue, no indica qué contiene la caja. Se tiene que evitar su uso, usarlo cuando no haya otra solución.
Por ejemplo, es muy común crear una barra de navegación o menú de un sitio web de la siguiente forma:
<div id="menuPrincipal"> <a href="inicio.html">Inicio</a> <a href="productos.html">Productos</a> <a href="contacto.html">Contacto</a> </div>
Pero con HTML 5 es mucho mejor:
<nav> <a href="inicio.html">Inicio</a> <a href="productos.html">Productos</a> <a href="contacto.html">Contacto</a> </nav>
Cuando hacemos páginas a mano ("a pelo") podemos introducir todas las novedades que vayan apareciendo en el lenguaje HTML. En cambio, si utilizamos una herramienta como puede ser el Dreamweaver, o un gestor de contenidos como Wordpress, estamos limitados a sus etiquetas y no podemos introducir otras nuevas facilmente.
Más información:
Hacer las webs accesibles no implica ni mayor gasto, ni quitar las imágenes, en definitiva, no hace falta cambiar la interfaz, simplemente adaptarlas, proporcionar alternativas.
La herramienta Google Analytics nos permite conocer qué usuarios están entrando ahora en nuestro sitio web por ejemplo, por días, semanas, mes, último año. Son espías. Permite configurar la forma de visualizar los resultados.
En Google Analytics tenemos un gráfico de visitas. Indica cuando se producen los valles (descenso grande de visitas), visitas diarias, picos.
El informe de fuentes de tráfico: indica el porcentaje de usuarios que han buscado algo en Google y a través de esa búsqueda han llegado a mi página web. Hoy en día, la mayor fuente de tráfico es Google. Dependiendo del sitio web, el porcentaje se puede situar entre un 60-80%.
El visitante más importante de tu sitio web es ciego y se llama Google
.
El buscador de Google se comporta como un usuario ciego, por lo tanto, lo que no vea Google no lo ve nadie.
Cuanto más accesible sea la web en mayor medida mejorará el posicionamiento de nuestra web.
No hacer la web accesible supone una multa si la web es de un organismo público o si su fin es dar un servicio público. En España no son muy altas, pero en otros países sí. Por ejemplo, a target.com (EE.UU), le metieron una multa de 6 millones de dólares porque el sitio web era no accesible.
En España, por ley todas las webs de las Administraciones Públicas deben ser accesibles. También deben ser accesibles las webs privadas, como las de los sindicatos, si están financiadas por dinero público.
LEY 56/2007, 28 de diciembre: esta ley solo obliga a las empresas que presten servicios al público en general y generen un volumen de negocio que supere los 6.010.121. y a las que ofrezcan determinados servicios básicos como, bancarios, agua, luz, gas, etc.
Más información:
Sordos: tienen problemas para comprender textos en general y complejos en particular, porque la lengua de signos no es equivalente al lenguaje que utilizamos habitualmente. Hay que tener en cuenta la legibilidad web.
Discapacidad cognitiva: hay que controlar el lenguaje del texto, deber ser comprensible para un coeficiente intelectual por debajo del normal.
Ciegos: utilizan lectores de pantalla. Ellos leen la página web de forma lineal, eso dificulta la navegación. Hay que evitar las referencias físicas como en el "panel de la izquierda". Hay que proporcionar un texto alternativo en las imágenes:
<!-- La etiqueta <img> inserta una imagen en una página web --> <img src="logo.gif" alt="logotipo de la empresa">
Los componentes de la etiqueta <img> son:
src: para indicar la dirección de donde está.alt: es el atributo de texto alternativo."logo.gif": es el nombre del fichero."logotipo de la empresa": es el texto alternativo que en principio no está previsto que se vea,
sólo se visualiza cuando las imágenes no se vean y también sirve para que el robot de los buscadores lo lea.
Cuando una imagen se utilice en un enlace, es imprescindible ponerle un texto alternativo.
Cuando una imagen sera meramente decorativa, no necesita texto alternativo y se puede dejar vacío alt="".
Hay que cuidar el lenguaje del texto alternativo para que sea representativo (por ejemplo, en vez de "Logo de la uni", usar "Logotipo de la Universidad de Alicante"). Lo importante que hay que describir es la función que realiza la imagen, como por ejemplo, en los tutoriales las flechas de volver a la página anterior, volver a la tabla de contenido (página de inicio) o pasar a la página siguiente. No tendría sentido poner en estas etiquetas izquierda, arriba, derecha.
Otro mecanismo importante son los encabezados, que permite a las personas ciegas realizar un "screening" de una página web: por ejemplo, que lea solo los titulares de las noticias en la página web de un periódico.
Hay 6 niveles de encabezado:
<h1>El título más importante</h1> ... ... ... <h6>Otro título menos importante</h6>
Los encabezados se tienen que usar correctamente, no se pueden producir saltos en los niveles (pasar del nivel 1 al 3 sin utilizar el nivel 2).
HeadingsMap es una extensión (complemento) para Firefox que permite averiguar si se están usando correctamente los encabezados. Nos aparecerá un menú a la izquierda donde saldrán todos los encabezados en una lista y los que aparezcan en rojo son errores, indica que la página tiene un problema de accesibilidad.
Web Developer es otra extensión para Firefox, una barra de herramientas imprescindible para cualquier desarrollador web. La podemos utilizar para desactivar las imágenes, desactivar las hojas de estilo y desactivar el código JavaScript.
En cualquier página podemos utilizar la opción "Ver código fuente" del navegador para explorar el código y encontrar posibles problemas de accesibilidad.
Jaws (es de la compañía Freedom Scientific) es un lector de pantalla que cuesta 1.095 dólares.
También existe un lector de pantalla gratuito que podemos utilizar para hacer pruebas llamado NVDA. Las voces del software de prueba suenan a robot, pero las de pago son mejores.
Las personas ciegas tienen más desarrollado el sentido del oído y escuchan a mucha más velocidad que nosotros cuando utilizan un lector de pantalla.
Fangs es otra extensión para Firefox, es un simulador de lector de pantalla, nos muestra la versión lineal del contenido.
Muy útil la opción "Headings list" (listado de encabezados).
Las personas ciegas escuchan los encabezados y seleccionan el que quieren, por ello, hay que llevar cuidado de no dar saltos entre las etiquetas
y pasar del <h1> al <h3>, siendo el <h1> el titular de la noticia y el <h3> el autor de la noticia.
Hay que establecer la jerarquía a la hora de poner las etiquetas.
También es muy útil la opción "Link list" (listado de enlaces). Algunos errores comunes con los enlaces:
Con las listas también se suelen cometer errores graves: listas que no son listas.
Por ejemplo, el siguiente código no es una lista, es un conjunto de líneas separadas por saltos de línea:
<p> o Carne<br /> o Pescado<br /> o Leche </p>
Pero al visualizarse parece que es una lista, como podemos ver a continuación:
o Carne
o Pescado
o Leche
Las etiquetas que se emplean para crear las listas son:
<ul>: lista no numerada.<ol>: lista numerada.<li>: elemento de una lista.Ejemplo:
<ul> <li>Carne</li> <li>Pescado</li> <li>Leche</li> </ul>
Y se visualiza:
Con CSS las listas las podemos configurar estéticamente como nosotros queramos (por ejemplo, en horizontal, separadas por una línea, etc).
Más información:
Podemos usar TAW para analizar el nivel de accesibilidad de una página web. Pero como es un proceso automático, también hay que realizar un análisis manual posteriormente por un experto. La herramienta indica errores y posibles errores que podrían no serlo.
En España, la legislación establece que las webs de las Administraciones Públicas deben cumplir el nivel 1 y el 2, al 3 no es obligatorio llegar.
