Este documento proporciona una introducción a la accesibilidad web y ofrece consejos sobre el tema. Explica brevemente qué es la accesibilidad y la accesibilidad web, las normativas que rigen este ámbito y quiénes se benefician de sitios web accesibles. También describe cómo navegan las personas con discapacidades y resume las principales pautas de accesibilidad para el contenido web WCAG 2.0. Por último, ofrece algunos consejos prácticos sobre cómo hacer que los sitios web sean más accesibles.

1. Introducción y consejos
de Accesibilidad Web
Pedro Vicente Monerris Cabrera
www.nitsnets.com

2. Introducción y consejos de
Accesibilidad Web
INDICE
-¿Qué es Accesibilidad y Accesibilidad Web?
-Normativas.
-¿Quién se beneficia?
-¿Cómo navegan?
-Pautas.
-Validación.
-Consejos.
Pedro V. Monerris

3. Introducción y consejos de
Accesibilidad Web
¿Qué es “Accesibilidad”?
La accesibilidad es el grado en el que todas las personas pueden
utilizar un objeto, visitar un lugar o acceder a un servicio,
independientemente de sus capacidades técnicas, cognitivas o físicas.
¿ENTONCES “ACCESIBILIDAD WEB”?
+
Pedro V. Monerris

4. Introducción y consejos de
Accesibilidad Web
Accesibilidad Web
Accesibilidad+web es igual a la posibilidad de un sitio web pueda ser
visitado y utilizado por el mayor número de personas
independientemente de las limitaciones personales o del mismo
entorno.
Pedro V. Monerris

5. Introducción y consejos de
Accesibilidad Web
¿Es obligada la Accesibilidad Web?
Actualmente se encuentra regulada por el Real decreto 1494/2007
“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”.
Las páginas de internet de las administraciones públicas deberán ser
accesibles para personas mayores y con discapacidad, cumpliendo las
prioridades 1 y 2 de la norma UNE 139803:2004
Pedro V. Monerris

6. Introducción y consejos de
Accesibilidad Web
Accesibilidad Web
También lo regula la LMISI Medidas de Impulso de la Sociedad de la
Información, en la cual nos dice que no sólo la administración pública
esta sujeta a cumplir las prioridades 1 y 2 sino las de “especial
trascendencia económica”.
Empresas que agrupen a más de cien trabajadores o su volumen anual
de operaciones exceda de 6.010.121,04 euros y que operen en:
● Servicios de comunicaciones electrónicas a consumidores.
● Servicios financieros destinados a consumidores.
● Servicios de suministro de agua a consumidores.
● ... Servicios...
Pedro V. Monerris

7. Introducción y consejos de
Accesibilidad Web
Accesibilidad Web es para ciegos, ¿No?
NO!!!!!!!
Pedro V. Monerris

8. Introducción y consejos de
Accesibilidad Web
¿Quién se beneficia?
Si cumplimos con la accesibilidad, nuestra web la podrán visitar:
Personas con discapacidades visuales:
● Ceguera
● Baja Visión
● Daltonismo
Pedro V. Monerris

9. Introducción y consejos de
Accesibilidad Web
¿Quién se beneficia?
Personas con discapacidades auditivas:
● Sordera
● Hipoacusia (sordera parcial -ligera o moderada-)
Pedro V. Monerris

10. Introducción y consejos de
Accesibilidad Web
¿Quién se beneficia?
Personas con discapacidades motrices:
● Distrofia muscular (debilidad músculo-esquelético)
● Distonía muscular (contracciones involutariar)
● Parkinson
Pedro V. Monerris

11. Introducción y consejos de
Accesibilidad Web
¿Quién se beneficia?
Personas con discapacidades neurológicas y cognitivas
Discapacidades relacionadas con el envejecimiento (suelen ser una
mezcla de todas las anteriores)
Limitaciones derivadas del entorno.
¿Entorno? Navegadores antiguos, conexiones lentas, pantallas
pequeñas, ausencia del ratón...
Pedro V. Monerris

12. Introducción y consejos de
Accesibilidad Web
¿Quién se beneficia?
Y Google
Pedro V. Monerris

13. Introducción y consejos de
Accesibilidad Web
Y ¿Cómo navegan?
Lectores de pantalla
Pedro V. Monerris

14. Introducción y consejos de
Accesibilidad Web
Y ¿Cómo navegan?
Navegadores de texto
http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Pedro V. Monerris

15. Introducción y consejos de
Accesibilidad Web
Y ¿Cómo navegan?
Ampliadores
Pedro V. Monerris

16. Introducción y consejos de
Accesibilidad Web
Y ¿Cómo navegan?
Teclados y artilugios de ayuda
Pedro V. Monerris

17. Introducción y consejos de
Accesibilidad Web
Y ¿Cómo navegan?
A continuación un video de estudiante de informática ciego de
nacimiento que nos enseña un par de lectores de pantalla.
http://www.youtube.com/watch?v=noPhYemsp7c
Maximiliano Vazquez http://mgvazquez.blogspot.com/
Antonio Sacco http://www.antoniosacco.net
Pedro V. Monerris

18. Introducción y consejos de
Accesibilidad Web
Las pautas a cumplir
Las Pautas de Accesibilidad para Agentes de Usuario UAAG 1.0 que
estudia lo referente a las aplicaciones software que se emplean para
acceder al contenido de la Web.
Las Pautas de Accesibilidad para Herramientas de Autor 1.0 ATAG
1.0 que estudia las aplicaciones usadas por los desarrolladores para la
creación de páginas Web. Editores HTML, WYSIWYG, CMS,
Blogs... para que estos produzcan contenido accesible y que puedan
ser usados por personas que necesiten de la accesibilidad.
Pedro V. Monerris

19. Introducción y consejos de
Accesibilidad Web
Las pautas a cumplir
La que abordaremos hoy:
Las Pautas de Accesibilidad para el Contenido Web WCAG 2.0
Relativo a la accesibilidad del contenido de los sitios web
(formularios, aplicaciones, multimedia...) permitan interactuar con la
web
Pedro V. Monerris

20. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
La información y la interfaz de usuario tienen que ser presentados de
forma que los puedan percibir.
Pauta 1.1 Alternativas textuales
El objetivo es proporcionar un contenido equivalente y accesible en el
caso de que no se pueda mostrar el contenido no textual.
Pedro V. Monerris

21. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.1 Alternativas textuales. Imágenes.
Descripción corta suficiente: Utilizaremos el atributo alt=”” de
<img> para representar lo que intentamos transmitir.
En el caso de que no queramos que transmita información o sea
meramente decorativa poner el alt=” ”. Aunque lo mejor es usar CSS
para posicionar dichas imágenes.
Pedro V. Monerris

22. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.1 Alternativas textuales. Imágenes.
Descripción corta suficiente: Utilizaremos el atributo alt=”” de
<img> para representar lo que intentamos transmitir.
En el caso de que no queramos que transmita información o sea
meramente decorativa poner el alt=” ”. Aunque lo mejor es usar CSS
para posicionar dichas imágenes.
Pedro V. Monerris

23. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.1 Alternativas textuales. Imágenes+enlaces.
No repetir información, es decir completar uno con lo otro.
Pedro V. Monerris

24. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.1 Alternativas textuales. Descripciones largas.
Podemos utilizar en el atributo longdesc=”” y en el podemos incluir
la url de dicha descripción, en el caso que veamos que sea necesaria.
Pedro V. Monerris

25. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.1 Alternativas textuales. Otros.
Utilizar la etiqueta <label> en los formularios o incluir los atributos
title en los input de los formularios.
Colocar correctamente el <label>:
Antes -> text, file, password, textarea y select.
Después -> checkbox y radio.
Pedro V. Monerris

26. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.2 Subtítulos y alternativas
Son los elementos que muestran su contenido según una línea
temporal (animaciones, canciones, películas) habrá que realizar para
estos transcripciones textuales, subtitulado o lenguaje de signos.
Pedro V. Monerris

27. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.3 Adaptable y disponible a los productos de apoyo.
Nuestro contenido debe ser independiente de la forma de
presentación, es decir independiente del software (presentar
contenido sin hojas de estilo). Esto lo conseguimos respetando una
estructura lógica, y proporcionar información de características
sensoriales (colores, enfásis...)
Pedro V. Monerris

28. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.3 Adaptable y disponible a los productos de apoyo.
Usar correctamente las etiquetas <h1>...<h6>
Para las listas usar los <ol>, <ul>, <dl>
Usar tablas solo para representar datos!
Pedro V. Monerris

29. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.3 Adaptable. Tablas.
<th> para los encabezados de las tablas. scope=”” para relacionar las
filas y las columnas de datos.
Con los <caption> y el atributo summary no representar la misma
información, el caption sería el título y el summary es una breve
descripción de la organización de los datos y lo que representan.
Pedro V. Monerris

30. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.3 Adaptable. Tablas. Ejemplo.
<table>
<caption>Estudiantes de informática</caption>
<tr>
<th scope=”col”>A&ntilde;o</th>
<th scope=”col”>ITIG & ITIS</th>
<th scope=”col”>II</th>
</tr>
<tr>
<td scope=”row”>2003</td>
<td>10000</td>
<td>9000</td>
</tr>
....
Pedro V. Monerris

31. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.4 Distinguible
Uso adecuado del color entre la información de primer plano y la del
fondo, esto se aplica también al sonido.
Pedro V. Monerris

32. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.4 Distinguible. Contraste suficiente.
Contrast Analyser
http://www.paciellogroup.com/resources/contrast-analyser.html
Pedro V. Monerris

33. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 1 PERCEPTIBLE
Pauta 1.4 Distinguible. Texto y fuentes.
Tener especial cuidado con la modificación de los tamaños de la
fuente utilizada, para que no rompa o descuadre la web.
A poder ser evitar los textos justificados. Ya que a las personas con
problemas cognitivos les cuesta mantener la lectura.
Pedro V. Monerris

34. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
La información y la interfaz de usuario tienen que ser presentados de
forma que los puedan percibir.
Pauta 2.1 Accesible mediante teclado
Toda la funcionalidad debe ser accesible desde teclado. Si nuestra
web es accesible desde teclado podrá ser utilizada por los productos
de apoyo.
Pedro V. Monerris

35. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.1 Accesible mediante teclado
Evitar trampas para el foco del teclado, esto va sobretodo para los
flash's. Habrá que poner algún listener en el teclado (sin tener que
utilizar el ratón) para poder salir de la trampa. Otro ejemplo de
trampa es cuando realizamos un evento con algún checkbox y se nos
abren más opciones en este momento se suele perder el focus.
Mediante el javascript que lanza el evento de mostrar las nuevas
opciones podemos también indicarle donde posicionar el focus.
Pedro V. Monerris

36. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.2 Tiempo suficiente
Algunas personas necesitan más tiempo que la mayoría de los
usuarios para completar tareas.
Lo mejor sería no tener tiempo. Pero en el caso que tenga debería
existir algún botón para pausar, reanudar o ajustar. Existen algunas
excepciones como pueden ser las actuales pujas por ejemplo de los
productos de e-Bay en ese caso ampliar el tiempo sería beneficiar a
un rango de usuarios.
Pedro V. Monerris

37. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.3 Efectos dañinos.
Evitar contenido que se sepa que podría causar ataques, espasmos o
convulsiones (epilepsia).
Cumplir la regla de los tres destellos o menos en nuestra web. En el
caso que sea inevitable que tenga destellos dejar el área lo más
pequeña posible (25% de un campo de visión de 10º a una distancia
normal de visionado).
Pedro V. Monerris

38. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.4 Navegable
Ayudar en la medida de lo posible a encontrar lo que necesiten a los
usuarios.
Pedro V. Monerris

39. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.4 Navegable. Títulos, migas de pan y sitemap.
Utilizar un <title> descriptivo sin ser muy largo.
Ayudar al usuario a saber en que ubicación se encuentra, esto lo
podemos conseguir con el uso de migas de pan. También ayudaremos
teniendo un sitemap con la organización del sitio.
Pedro V. Monerris

40. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 2 OPERABLE
Pauta 2.4 Navegable. Otros consejos.
Utilizar enlaces para saltar los bloques repetitivos de la web (menú o
cabeceras) estos pueden ser sólo visibles cuando tengan el foco.
Intentar que el orden del foco tenga sentido, siguiendo la misma
estructura de la web.
Pedro V. Monerris

41. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 3 COMPRENSIBLE
La información y la interfaz de usuario deben ser comprensibles.
Pauta 3.1 Legible y comprensible.
Hacer nuestro contenido comprensible tanto para los usuarios como
para sus productos de apoyo. Por ejemplo especificando el idioma de
nuestra web, los lectores de pantalla tienen diferentes pronuncaciones
según el idioma.
Pedro V. Monerris

42. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 3 COMPRENSIBLE
Pauta 3.1 Legible y comprensible. Idiomas.
Para identificarlos XHTML 1.0 y 1.1 en la etiqueta html
xml:lang=”es” o en, fr, de, it, ru
Si sólo queremos referirnos a una palabra o a un trozo de texto lo
podemos identificar con el mismo atributo.
Pedro V. Monerris

43. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 3 COMPRENSIBLE
Pauta 3.1 Legible y comprensible. Abreviaturas.
El uso de <abbr> y de <acronym> para obtener la expansión o
explicación, únicamente la primera vez que aparece en nuestro
contenido.
<abbr title=”Asociación de Desarrolladores Web de
Alicante>ADWA</abbr>
Pedro V. Monerris

44. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 3 COMPRENSIBLE
Pauta 3.2 Predecible.
Evitar los cambios de estructura en nuestra web mientras navegamos
(menús primero en un lado y luego en el otro).
También es recomendable que los cambios de contexto (envíos de
formulario, nuevas ventana, cambios de foco) no los hagan al recibir
el foco sino con una acción (submit, button, onclick).
Pedro V. Monerris

45. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 3 COMPRENSIBLE
Pauta 3.3 Evitar y corregir errores
Los usuarios con discapacidad son más propensas a cometer errores y
encuentran gran dificultad para corregir estos errores.
Debemos proporcionar información sobre las restricciones de los
campos bien mediante el label o el title del mismo input. A pesar de
ayudar al usuario a rellenar los campos es inevitable equivocarse,
dado el caso deberemos advertir al usuario mediante alertas (alert
javascript) posicionando el foco sobre el elemento erroneo y si lo
vemos oportuno sugerir formas correctas de rellenarlo.
Pedro V. Monerris

46. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Principio 4 ROBUSTO
Maximizar la compatibilidad con los agentes de usuario y productos
de apoyo.
Evitar malas practicas que provoquen que los productos de apoyo no
interpreten bien el contenido.
Validar nuestras webs y usar el lenguaje de acuerdo a la
especificación.
Pedro V. Monerris

47. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Validación. Automática.
Validador de código HTML y CSS del W3C.
http://validator.w3.org/
Pedro V. Monerris

48. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Validación. Automática.
Validadores de Accesibilidad (recomendable dos mínimo).
http://tawdis.net/ TAW – Fundación CTIC
http://achecker.ca ATRC Checker
http://www.contentquality.com/ Cynthia says
Pedro V. Monerris

49. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Validación.
Evaluación manual.
Hemos podido ver que existen pautas que resultan imposibles
detectar automáticamente. Deberemos evaluar la web por nuestra
cuenta. Por ejemplo.
Que el texto alternativo sea el apropiado.
Pedro V. Monerris

50. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Validación Manual
Herramientas que nos ayudarán (Firefox):
Web developer toolbar.
Firebug.
Usar diferentes navegadores, usar la web con el teclado, probar que
los lectores de pantalla tienen sentido. Esto es más complicado de lo
que parece.
Pedro V. Monerris

51. Introducción y consejos de
Accesibilidad Web
WCAG 2.0. Validación.
Pruebas de usuario.
Esta es la parte más difícil, realizar test con usuarios con
discapacidades reales. Nos darán una visión real de la Accesibilidad.
Monitorización.
En caso de sitios web dinámicos llevaremos un control para que la
accesibilidad se siga cumpliendo.
TAW Monitor
Pedro V. Monerris

52. Introducción y consejos de
Accesibilidad Web
Consejos finales
No hemos hablado de AJAX & accesibilidad. Existen unas “pautas”
llamadas WAI-Aria
http://www.w3.org/WAI/intro/aria
Pero pueden resultar un poco complicadas. Para evitar problemas con
AJAX podemos utilizar el patrón MVC. De este modo podemos
diferenciar la petición AJAX de una Accesible.
Pedro V. Monerris

53. Introducción y consejos de
Accesibilidad Web
MUCHAS GRACIAS!!!!!!
Pedro Vicente Monerris Cabrera
http://www.nitsnets.com
http://www.twitter.com/websmonerris
http://www.facebook.com/websmonerris
http://www.websmonerris.com
Pedro V. Monerris