Apuntes

INTRODUCCIÓN Y CONSEJOS DE ACCESIBILIDAD WEB

Pedro Vicente Monerris Cabrerawww.nitsnets.com

http://www.nitsnets.com/

Pedro V. Monerris Accesibilidad Web ADWA

1. ¿Qué es “Accesibilidad”?, Y “Accesibilidad Web”? ...................................32. ¿Es obligada la “Accesibilidad Web”? .........................................................33. La Accesibilidad Web es para ciegos, ¿No?..................................................4 3.1 ¿Quién se beneficia? ...........................................................................................4 3.2 Y ¿Cómo navegan? .............................................................................................54. Pautas a cumplir .....................................................................................................75. 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


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


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


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


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

http://www.yellowpipe.com/yis/tools/lynx/lynxview.cgi


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

http://www.antoniosacco.net/

http://mgvazquez.blogspot.com/

http://www.youtube.com/watch?v=noPhYemsp7c


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


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


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ñ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

http://www.paciellogroup.com/resources/contrast-analyser.html


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


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


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


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

http://www.contentquality.com/

http://achecker.ca/

http://tawdis.net/

http://validator.w3.org/


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

http://www.w3.org/WAI/intro/aria


Pedro Vicente Monerris Cabrera

http://www.nitsnets.com

http://www.twitter.com/websmonerris

http://www.facebook.com/websmonerris

http://www.websmonerris.com

16

http://www.nitsnets.com/

http://www.twitter.com/websmonerris

http://www.facebook.com/websmonerris

http://www.websmonerris.com/

Apuntes

Technology

Transcript of Apuntes