1. INTRODUCCIÓN Y CONSEJOS DE
ACCESIBILIDAD WEB
Pedro Vicente Monerris Cabrera
www.nitsnets.com

2. Pedro V. Monerris Accesibilidad Web ADWA
1. ¿Qué es “Accesibilidad”?, Y “Accesibilidad Web”? ...................................3
2. ¿Es obligada la “Accesibilidad Web”? .........................................................3
3. La Accesibilidad Web es para ciegos, ¿No?.................................................. 4
3.1 ¿Quién se beneficia? ...........................................................................................4
3.2 Y ¿Cómo navegan? .............................................................................................5
4. Pautas a cumplir .....................................................................................................7
5. WCAG 2.0 ...............................................................................................................8
5.1 Principio 1 PERCEPTIBLE .............................................................................. 8
5.2 Principio 2 OPERABLE .................................................................................... 11
5.3 Principio 3 COMPRENSIBLE ..........................................................................12
5.4 Principio 4 ROBUSTO .......................................................................................13
5.5 Validación ........................................................................................................... 14
2

3. Pedro V. Monerris Accesibilidad Web ADWA
1. ¿Qué es “Accesibilidad”?, Y “Accesibilidad Web”?
La accesibilidad es el grado en que las personas pueden usar un objeto, visitar un lugar o
acceder a servicios, sin importar sus capacidades técnicas, cognitivas o físicas. Esto por una parte,
pero si aplicamos esto a la web obtenemos la posibilidad de que un sitio web pueda ser visitado (o
usado) por el mayo número de personas independientemente de las limitaciones personales o del
mismo entorno. Más adelante veremos que queremos decir con eso de entorno.
2. ¿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”.
Nos dice en el artículo 5, que 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. Pero no sólo la administración pública sino también centros o empresas con
financiación pública.
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”, estas empresas serían: las que agrupen a más de cien
trabajadores o su volumen anual de operaciones, calculado conforme a lo establecido en la
normativa del Impuesto sobre el Valor Añadido, exceda de 6.010.121,04 euros y que, en ambos
casos, operen en los siguientes sectores económicos:
• Servicios de comunicaciones electrónicas a consumidores.
• Servicios financieros destinados a consumidores.
• Servicios de suministro de agua a consumidores.
• … (vamos todas las Webs que ofrecen servicios a los consumidores y manejan una gran
cantidad de dinero y operaciones)
3

4. Pedro V. Monerris Accesibilidad Web ADWA
3. La Accesibilidad Web es para ciegos, ¿No?
No!!!!! A veces asociamos el término accesibilidad web a webs sólo para ciegos pero no es
es así, ni tampoco pensar que es sólo para personas con discapacidades, aunque la mayoría de los
beneficiarios son personas con discapacidades también existen otros beneficiarios como vemos a
continuación.
3.1 ¿Quién se beneficia?
Si en nuestros trabajos cumplimos las diferentes pautas sobre accesibilidad desde prioridad
A a prioridad AAA. Se podrán beneficiar el siguiente rango de personas con:
• Discapacidades visuales:
◦ Ceguera.
◦ Baja Visión.
◦ Daltonismo.
• Discapacidades Auditivas:
◦ Sordera.
◦ Hipoacusia (sordera ligera o moderada).
• Discapacidades Motrices:
◦ Distrofia Muscular (debilidad músculo-esquelético).
◦ Distonía Muscular (contracciones involuntarias).
◦ Parkinson.
• Discapacidades neurológicas y cognitivas.
• Discapacidades relacionadas con el envejecimiento.
(suelen ser una mezcla de todas las anteriores)
• Limitaciones derivadas del Entorno
◦ Navegadores antiguos, conexiones lentas, pantallas pequeñas o monocromos, ausencia
del ratón.
• Y Google. Siempre veremos recompensada nuestra indexación, por simplificarlo pensad que
google actúa como un invidente, cuanta más información textual, alternativa, explicativa
demos de la web supuestamente en esta información hablaremos de contenido relacionado
con la web con la siguiente indexación.
4

5. Pedro V. Monerris Accesibilidad Web ADWA
3.2 Y ¿Cómo navegan?
Lectores de pantalla
Tales cómo software de sintetización de voz cómo lineas Braille:
Ampliadores de pantalla.
Es el software que amplia las diferentes zonas de nuestro ordenador. Normalmente viene alguna
herramienta en el sistema operativo por defecto.
5

6. Pedro V. Monerris Accesibilidad Web ADWA
Navegadores de texto.
Transforman nuestra web a contenido únicamente textual, este software lo utilizan conjuntamente
con sintetizadores de voz y/o lineas Braille.
Podemos probar uno gratuitamente en la red, el Lynx View:
http://www.yellowpipe.com/yis/tools/lynx/lynxview.cgi
Y una lista bastante extensa de teclados adaptados, licornios, punteros bucales y otros artílugios con
el fin de ayudar a cualquier persona con díficultat física.
6

7. Pedro V. Monerris Accesibilidad Web ADWA
Para finalizar me gustaría ilustrar lo anterior con un pequeño video que me encontré navegando por
YouTube. El video es de un estudiante de informática ciego de nacimiento que nos enseña un par de
lectores de pantalla y como los utiliza para navegar.
http://www.youtube.com/watch?v=noPhYemsp7c
Maximiliano Vazquez http://mgvazquez.blogspot.com/
Antonio Sacco http://www.antoniosacco.net
4. Pautas a cumplir
Actualmente existen varias áreas responsables de Accesibilidad Web:
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.
Y 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 interáctuar con la web.
Las pautas que se deben cumplir por las normas que se han hablado anteriormente son las WCAG
1.0 pero estas son un poco más cerradas ya que se referían más que nada al lenguaje HTML. Las
WCAG 2.0 son perdurables en el tiempo e independientes de las tecnologías a usar, en ellas no se
entra en detalles técnicos de como cumplirlas en tecnologías específicas. Así no cerramos las
WCAG al html únicamente.
7

8. Pedro V. Monerris Accesibilidad Web ADWA
5. WCAG 2.0
Las WCAG están organizadas en 4 principios de los cuales existen diferentes pautas a
cumplir, con diferente aceptación de ellas, A – AA – AAA.
A continuación vamos a ver los diferentes principios y pautas acompañadas de algún ejemplo de lo
más utilizado, no vamos a entrar en las diferentes aceptaciones que tienen (nivel prioridad) ya que
necesitaríamos un manual mucho más extenso.
5.1 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.
Imágenes.
Si la descripción que debemos utilizar es lo suficientemente corta utilizaremos el atributo alt=”” de
la etiqueta <img> para representar la información a transmitir. En el caso de que no queramos
transmitir información o que la imagen sea meramente decorativa poner el atributo alt=” ”. Aunque
lo mejor sería usar CSS para posicionar estas imágenes.
Imágenes + enlaces.
Intentar no repetir la información. Si vemos que la información del enlace es suficiente no incluir
alt=”” en el caso de que lo complete si habría que ponerlo.
<a>
<img src=”impresora.jpg” alt=”” />IMPRIMIR
</a>
Cuando nuestra imagen necesite de una descripción más larga deberemos incluir el atributo
longdesc=”” dónde podremos poner una URL con la descripción.
8

9. Pedro V. Monerris Accesibilidad Web ADWA
Otro casos
Utilizar la etiqueta <label> en los formularios o incluir los atributos title en los input de los mismos.
En el caso de utilizar la etiqueta <label> deberemos colocarla correctamente:
• Antes de los input type text, file, password y de los textarea, select.
• Después de los input type checkbox y radio.
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 incluso lenguaje de
signos, dependiendo del nivel de aceptación a utilizar.
En este punto podemos hablar de los flash, deberemos incluir en el <notobject> la información
equivalente, si lo vemos necesario (caso de webs realizadas por flash) sería recomendable incluir
cómo contenido alternativo una web navegable sin tecnología Flash (esta web debe cumplir también
con las WCAG). Podemos ayudarnos de herramientas como SWFObject que nos ayuda a que si se
detecta Flash sustituya un DIV (este puede ser el contenedor principal) por el SWF deseado. Esto
ayudará también a nuestra indexación.
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 (navegadores diferentes, software de apoyo, sin hojas de estilo). Esto lo conseguimos
respetando una estructura lógica y proporcionar información de características sensoriales (colores,
enfásis...).
Usar correctamente las etiquetas <h1>...<h6>
Para las listas usar los <ol>, <ul>, <dl>
Usar tablas sólo para representar datos!!!!!!
9

10. Pedro V. Monerris Accesibilidad Web ADWA
Tablas
Tendremos que construir tablas correctamente. Para ello los <th> los utilizaremos para los
encabezados. Mediante el atributo scope podremos relacionar filas con columnas para una mejor
comprensión.
Otro error frecuente es utilizar el <caption> y el atributo summary para representar la misma
información. El uso correcto es <caption> para el título de la tabla y el atributo summary para
escribir un breve resumen de los datos y lo que representan.
<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>
…
Pauta 1.4 Distinguible
Uso adecuado del color entre la información de primer plano y la de fondo, lo suficiente para poder
diferenciarlos, esto debe aplicarse también al sonido. No hay que producir interferencias que
puedan perjudicar a la captación de información.
Contraste suficiente
Contrast Analyser
http://www.paciellogroup.com/resources/contrast-analyser.html
10

11. Pedro V. Monerris Accesibilidad Web ADWA
Texto y fuentes
Tener especial cuidado con la modificación de los tamaños de la fuente utilizada, en la mayoría de
los casos el navegador nos da la opción de aumentar el tamaño de la fuente para una mejor lectura,
lo que puede provocar romper o descuadrar la web provocando confusión al usuario.
Otro problema que encuentran algunos usuarios es con la lectura de los textos justificados, ya que
les cuesta seguir el hilo y a veces provocan espaciados grandes saltos de lineas indeseados.
5.2 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 información debe ser accesible desde teclado. Si nuestra web es accesible desde teclado nos
aseguraremos que podrá ser utilizada por la mayoría de los productos de apoyo.
Para que se operable desde teclado deberemos evitar las trampas de focos, esto va sobretodo para
los flash's. Ya que cuando se pasa el foco sobre un elemento este queda capturado sin responder a la
acción de pasar al siguiente foco, o volviéndolo al principio. Un ejemplo a parte de los Flash, son
los checkbox/radio/select que cuando se seleccionan abren nuevas opciones en nuestros formularios
pero la mayoría de las veces perdemos el foco, esto tiene fácil solución podemos utilizar el mismo
javascript para indicar la continuidad del foco.
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.
11

12. Pedro V. Monerris Accesibilidad Web ADWA
Pauta 2.3 Efectos dañinos
Evitar los contenidos que se sepa que podrían causar ataques, espasmos o convulsiones (epilepsia).
Deberemos cumplir la regla de los tres destellos o menos, 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 de
visionado normal).
Pauta 2.4 Navegable
Ayudar en la medida de lo posible a encontrar lo que necesiten los usuarios.
Para ayudar a los usuarios:
-utilizar títulos, migas de pan y sitemps. De este modo indicaremos al usuario dónde se encuentra y
la organización del sitio web.
-utilizar <title> descriptivos sin ser demasiado largos.
-Utilizar enlaces para saltar los bloques repetitivos (menús o cabeceras).
-Intentar que el foco tenga el mismo sentido que la estructura visual de la web.
5.3 Principio 3 COMPRENSIBLE
La información y la intefaz 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, ya que los lectores de pantalla tienen
diferentes pronunciaciones según el idioma. En el caso de XHTML 1.0 Y 1.1:
En la etiqueta <html> añadir el atributo xml:lang=”es” o del idioma deseado (en, fr, de, it, ru)
A veces nos encontramos con palabras sueltas en otro idioma en ese caso el mismo atributo nos
sirve para indicarsela a los lectores de pantalla.
Abreviaturas
Usaremos <abbr> y <acronym> para obtener la expansión o explicación de las diferentes
abreviaturas, siempre la primera vez que aparezcan en nuestro contenido.
<abbr title=”Asociación de Desarrolladores Web de Alicante”>ADWA</abbr>
12

13. Pedro V. Monerris Accesibilidad Web ADWA
Pauta 3.2 Predecible.
Evitar los cambios de estructura mientras navegamos (menús primero en un lado y luego en el otro).
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, onclick, button).
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.
5.4 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.
13

14. Pedro V. Monerris Accesibilidad Web ADWA
5.5 Validación
Automática. Es aquella que la realiza automáticamente herramientas destinadas a ello.
Validador de código HTML y CSS del W3C
http://validator.w3.org/
Validadores de Accesibilidad (recomendable dos mínimo).
• http://tawdis.net/ TAW – Fundación CTIC
• http://achecker.ca ATRC Checker
• http://www.contentquality.com Cyntia Says
Evaluación manual. Hemos podido ver que existen pautas que resultan imposibles detectar
automáticamente. Para ello deberemos evaluar la web por nuestra cuenta.
Por ejemplo: Que el texto alternativo sea el apropiado.
• Herramientas que nos ayudarán (Firefox):
• Web developer toolbar.
• Firebug.
• Usar diferentes navegadores, usar la web solamente con el teclado, probar que los lectores
de pantalla tienen sentido (esto es más complicado de lo que parece).
Pruebas de usuario.
Esta es la parte más difícil, habrá que realizar tests con personas con discapacidades reales, ellas nos
darán una visión real de la Accesibilidad de nuestro sitio.
Monitorización
En caso de sitios web dinámicos llevaremos un control para que la accesibilidad se siga cumpliendo
TAW monitor.
14

15. Pedro V. Monerris Accesibilidad Web ADWA
6. 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.
15

16. Pedro V. Monerris Accesibilidad Web ADWA
Pedro Vicente Monerris Cabrera
http://www.nitsnets.com
http://www.twitter.com/websmonerris
http://www.facebook.com/websmonerris
http://www.websmonerris.com
16