UROLALDE S.L.

Usabilidad y accesibilidad de los sitios web

Confección y publicación de páginas web

Alazne Ugarteburu

Convocatoria 2014-2015

1

ContenidoCONCEPTOS BÁSICOS SOBRE USABILIDAD Y ACCESIBILIDAD WEB.........................................................4

Comprendiendo la Accesibilidad, sus problemas y los retos pendientes...........................................4

Personas con Discapacidad................................................................................................................5

Discapacidades Visuales.................................................................................................................5

Discapacidades Auditivas...............................................................................................................6

Discapacidades Motoras................................................................................................................7

Discapacidades Cognitivas y Neurológicas.....................................................................................8

Dificultades relacionadas con la edad avanzada............................................................................8

Concepto de Usabilidad frente a Accesibilidad..................................................................................9

TIPOLOGÍA DE ACCESO A LA WEB PARA LAS PERSONAS CON DISCAPACIDAD. CONCEPTO DE DISEÑO CENTRADO EN EL USUARIO Y DISEÑO PARA TODOS. DISEÑO DEL INTERFAZ Y DE LOS CONTENIDOS. 11

Diseño centrado en el usuario.........................................................................................................11

Diseño para todos............................................................................................................................12

Diseño en función del tipo de discapacidad.....................................................................................14

Diseño del interfaz y de los contenidos............................................................................................15

INICIATIVA WAI Y PAUTAS W3C...........................................................................................................16

El consortium W3C...........................................................................................................................16

Iniciativa WAI...................................................................................................................................17

Pautas de Accesibilidad al Contenido en la Web (WCAG)................................................................17

Pautas de usabilidad web.................................................................................................................19

Navegación...................................................................................................................................21

Estilo del texto.............................................................................................................................22

Cuerpo de texto...........................................................................................................................23

Imágenes para textos...................................................................................................................23

2

Formularios..................................................................................................................................24

TEMA 4. HERRAMIENTAS AVANZADAS DE VALIDACIÓN DE LA ACCESIBILIDAD WEB...........................24

TAW.............................................................................................................................................24

INTAV – Inteco Accessibility Validator..........................................................................................25

Cynthia Says.................................................................................................................................26

HERA............................................................................................................................................26

The Wave.....................................................................................................................................27

Herramientas online de validación de gramática.............................................................................27

3

CONCEPTOS BÁSICOS SOBRE USABILIDAD Y ACCESIBILIDAD WEB.

Comprendiendo la Accesibilidad, sus problemas y los retos pendientes

El objetivo de la Accesibilidad Web es sensibilizar, sugerir y recordar a los creadores

de páginas web, las técnicas y herramientas que hay que utilizar para conseguir que

cualquier persona las pueda visitar, independientemente de su (dis)capacidad.

Una página web se considera accesible cuando cualquier persona, con total

independencia de sus capacidades personales o del equipo con el que se conecten,

puede acceder a Internet y utilizar y comprender todos sus contenidos. Según el

American Heritage Dictionary: “Algo es accesible cuando puede ser obtenido

fácilmente”.

Un sitio web puede intercambiar información, presentar información descriptiva del

mismo, interaccionar con el usuario para que este aprenda conceptos o habilidades,

mostrar enlaces hacia otras páginas de interés, o incluso simplemente entretener al

visitante con juegos y pasatiempos. La accesibilidad web asegura que todas estas

posibilidades están disponibles a cualquier tipo de persona.

Otras razones para construir sitios Web accesibles pueden ser, por ejemplo, que se

quiera ganar mayor audiencia o potenciar el número de clientes (en el mejor sentido

comercial) o que se pretenda alcanzar una posición de liderazgo en un determinado

nicho de mercado.

Pero la realidad es que la normativa obliga ya hoy en día, en gran parte de países, a

que los sitios web sean accesibles, comenzando por las administraciones públicas y

servicios públicos, en general. La accesibilidad web es un derecho fundamental de

las personas con discapacidad para poder acceder a los servicios que ofrece la red,

y por ello, las normas y estándares están jugando un papel fundamental en el

desarrollo de Internet.

4

Personas con Discapacidad

En el área de la salud, una discapacidad es toda restricción o ausencia (debida a

una deficiencia) de la capacidad de realizar una actividad en la forma o dentro del

margen que se considera normal para un ser humano.

Una posible clasificación es la siguiente:

1. Discapacidades Visuale s

2. Discapacidades Auditiva s

3. Discapacidades Motora s

4. Discapacidades Cognitiva s

5. Dificultades por la edad avanzada

Discapacidades Visuales

Las personas con discapacidad visual tienen problemas graves de visión que, para

desarrollar su vida correctamente, pueden necesitar un programa de rehabilitación

visual y/o ayudas ópticas o electrónicas. Se incluyen desde personas con visión

parcial hasta la ceguera total, siendo la primera la de más amplio rango y la última la

menos común.

Algunas de las dificultades que se pueden encontrar las personas con discapacidad

visual a la hora de acceder a una Página Web son las siguientes:

Las personas con visión parcial pueden tener dificultad para apreciar las

pequeñas diferencias de color, pueden no apreciar la letra pequeña y pueden

perder la orientación dentro de una Página Web.

Las personas con visión cromática parcial (como el Daltonismo) pueden no

llegar a distinguir los contenidos de las Páginas al no distinguir los colores

rojo / verde y sus compuestos o páginas con bajo contraste.

5

Las personas con ceguera total no tienen ningún acceso a los contenidos

visuales ni a los documentos escritos en papel, a no ser que éstos estén en

Braille y, aún así, no son muchos los que pueden acceder a este tipo de

documentos, ya sea por no haberlo aprendido o por falta de recursos.

Los mecanismos de acceso a la información en Internet para personas con

discapacidad visual pueden basarse en la amplificación de la imagen, la síntesis de

voz y la salida Braille.

Las opciones basadas en la ampliación de la imagen (uso de “lupas”

software) son válidas únicamente para quienes poseen algún grado de visión.

Las basadas en síntesis de voz (o en grabaciones auditivas) son válidas para

quienes tienen visión parcial o total y oyen adecuadamente.

Para las personas sordo-ciegas la única posibilidad de las tres mencionadas

es la de la salida Braille, que también es válida para el resto de la gente,

siempre y cuando conozcan este lenguaje.

Discapacidades Auditivas

Las discapacidades auditivas incluyen la sordera total y parcial, ya sea por falta de

audición de los volúmenes bajos o de frecuencias determinadas. Los afectados

suelen dividirse en dos grandes grupos según sean personas con pérdida auditiva

congénita debida a factores hereditarios o problemas o alteraciones producidas

durante la gestación o bien pérdida auditiva tardía producida por factores

ambientales, como alto índice de contaminación sonora en el trabajo, o por

enfermedad. Estas últimas personas se dividen también en dos subgrupos según

hayan experimentado la pérdida auditiva antes (prelocutivas) o después

(postlocutivas) de aprender el lenguaje.

Las dificultades que se pueden encontrar las personas con discapacidad auditiva a

la hora de acceder a una página web pueden ser las siguientes:

6

Las personas con discapacidad leve auditiva pueden tener dificultad para

apreciar correctamente los contenidos auditivos, como músicas, mensajes en

voz y mensajes en video.

Las personas con sordera total no tienen ningún acceso a los contenidos

auditivos.

Las personas sordo-ciegas no pueden acceder a los contenidos auditivos ni a

los equivalentes visuales.

Las personas sordo-mudas, además de no oír, tienen problemas de

comprensión derivados de sus deficiencias de comunicación.

En síntesis.- El acceso a la información en Internet para personas con discapacidad

auditiva se basa en los equivalentes visuales, en la claridad de contenidos,

especialmente para las personas sordo-mudas, y, para las personas sordo-ciegas,

en la salida Braille.

Discapacidades Motoras

En el grupo de las discapacidades motoras grupo se incluyen todas aquellas

discapacidades que afecten al movimiento del cuerpo, desde las dificultades al

caminar por vejez hasta la inmovilidad por paraplejia. Estas discapacidades pueden

provenir de lesiones medulares, con predominio de afectación de miembros

inferiores o paraplejía sobre las cuatro extremidades (tetraplejía), traumatismos

craneo-encefálicos, parálisis cerebral, esclerosis múltiple, hemiplejía, poliomelitis,

distrofia muscular y alteraciones osteoarticulares.

Estas son algunas de las dificultades que se pueden encontrar las personas con

discapacidad motora a la hora de acceder a una Página Web:

Las personas con problemas de coordinación pueden no atinar bien en los

enlaces o en las zonas pequeñas de los mapas de imagen con los

dispositivos apuntadores (como ratón, lápices, etc.).

7

Las personas con movilidad reducida pueden tener dificultades a la hora de

recorrer visualmente la pantalla o leer un documento muy extenso.

Las personas con dificultades para mover las manos pueden no ser capaces

de utilizar un ratón para desplazarse por la pantalla.

En síntesis.- El acceso a la información en Internet para personas con discapacidad

motora se basa en la claridad de contenidos, el acceso por teclado y dispositivos

táctiles y la información auditiva (para quienes no poseen discapacidad auditiva).

Discapacidades Cognitivas y Neurológicas

Las discapacidades cognitivas y neurológicas son las que generan dificultades de

comprensión, ya sean por deficiencias mentales o incluso por un bajo nivel cultural.

Aquí se incluyen, por ejemplo, enfermedades congénitas como el Síndrome de

Down y también las discapacidades provenientes de lesiones neurológicas sufridas

por enfermedades como esclerosis múltiple, Alzheimer, Parkinson y ciertas

enfermedades musculares.

Las dificultades que se pueden encontrar las personas con discapacidades

cognitivas a la hora de acceder a una Página Web pueden ser las siguientes:

Si los contenidos no están expresados con un lenguaje claro pueden no ser

entendidos.

Si las páginas son muy grandes pueden perderse y no encontrar la

información que se está buscando.

Si el documento no contiene ejemplos, explicaciones o diagramas aclarativos

sencillos pueden no ser entendidos.

En síntesis.- Los mecanismos de acceso a la información en Internet para personas

con discapacidad cognitiva se basan, principalmente, en la claridad de contenidos y

8

en la funcionalidad y navegabilidad (mecanismos claros de navegación, agrupación

de contenidos relacionados, páginas cortas y visuales, etc.)

Dificultades relacionadas con la edad avanzada

Los cambios en las capacidades de una persona debidos a la edad avanzada

pueden incluir cambios en su capacidad de visión, audición, destreza y memoria.

Las barreras que estas personas encuentran para utilizar la Web pueden incluir

cualquiera de las mencionadas anteriormente.

En síntesis.-El diseño para todos no es un requisito únicamente para personas con

discapacidades sino para un amplio grupo de personas que por distintas

circunstancias se benefician de un diseño web que cumpla los estándares de

accesibilidad y usabilidad.

Concepto de Usabilidad frente a Accesibilidad

La usabilidad se define como: “El nivel con el que un producto se adapta a las

necesidades del usuario y puede ser utilizado por los mismos para lograr unas

metas específicas con efectividad, eficiencia y satisfacción en un contexto específico

de uso”.

Por tanto, la usabilidad es una medida que indica la idoneidad de un producto para

que determinados usuarios puedan alcanzar con ellos satisfactoriamente, ciertos

objetivos, de forma efectiva y eficiente. Así, la usabilidad mide la rapidez y la

facilidad con la que ciertas personas desarrollan ciertas actividades utilizando un

determinado producto. Por tanto, son los usuarios de un producto, y no sus

diseñadores o desarrolladores, los que determinan cuando un producto es sencillo

de utilizar.

La usabilidad presupone, por tanto:

Diseño del producto centrado en el usuario.

Conocimiento amplio del contexto en el que se usa el producto.

9

El producto debe satisfacer las necesidades del usuario.

La usabilidad asume cada vez una parte mucho más importante de la economía de

Internet que en el pasado. En el desarrollo tradicional de cualquier producto, el

usuario no puede experimentar su usabilidad hasta que no lo ha adquirido, y quizás

en ese momento se dé cuenta del error que acaba de cometer comprándolo.

La industria del software tiene muchos motivos para mejorar la usabilidad de sus

productos. Los usuarios, generalmente, tienen la posibilidad de contactar con un

centro de atención al cliente o un servicio técnico on-line, al que pueden llamar para

resolver sus dudas. Pero estos servicios post-venta suelen resultar caros de

mantener y recortan las cifras de beneficios.

El objetivo principal de la mayoría de los proyectos web consiste en facilitar a los

clientes la realización de ciertas actividades útiles, si bien también hay un gran

número de páginas web que simplemente muestran arte o facilitan entretenimiento.

Y aún más, el desarrollo de software para la Web invierte además la imagen

tradicional ya que los usuarios de un sitio web experimentan su usabilidad antes de

que se hayan comprometido a usarlo y sin pagar nada por ello.

Por todo lo anterior, la usabilidad es importante y debe tenerse en cuenta siempre,

puesto que:

Reduce los costes de producción.

Reduce los costes de mantenimiento y soporte al cliente.

Reduce el coste del uso, al aumentar la sencillez de manejo.

Mejora, de forma global, la calidad del producto.

La accesibilidad, es, frente al concepto general de la usabilidad, un término

restringido a usuarios que presentan una discapacidad. Esta discapacidad puede ser

visual, auditiva o cognitiva, o simplemente puede ocurrir que existan barreras

arquitectónicas o de diseño para acceder a la información.10

Así, muchas personas, no pueden ver, oír, o moverse con facilidad, algunas tienen

serias dificultades para entender cierto tipo o volumen de información. Otros pueden

tener dificultades en la lectura o comprensión de textos escritos,algunos pueden no

ser capaces de mover un dispositivo apuntador, como un ratón, y otros no pueden

manejar un teclado.

Pero también hay usuarios plenamente “capacitados” que sólo disponen de una

pantalla muy pequeña o con poca resolución, otros poseen una conexión a Internet

desesperadamente lenta, y otros disponen de navegadores o sistemas operativos

con versiones anticuadas. A veces ocurre también que se visitan páginas web

escritas en otros idiomas que no se comprenden con facilidad, o que uno puede

acceder a Internet en una situación laboral con exceso de ruido ambiente o con las

manos ocupadas (por ejemplo manejando un volante) con lo que la percepción

cognitiva disminuye.

Un sitio web accesible debe estar disponible independientemente del equipo o

navegador de los que disponga el usuario. Por tanto, en el diseño de las páginas

web es fundamental considerar las diferencias existentes entre los navegadores, al

menos teniendo en cuenta los más populares y del mayor número de versiones. Así,

los desarrolladores deben considerar el mayor número posible de estas situaciones,

ya que un sitio más accesible dispondrá de mayor número de usuarios potenciales.

TIPOLOGÍA DE ACCESO A LA WEB PARA LAS PERSONAS CON DISCAPACIDAD. CONCEPTO DE DISEÑO CENTRADO EN EL USUARIO Y DISEÑO PARA TODOS. DISEÑO DEL INTERFAZ Y DE LOS CONTENIDOS

Diseño centrado en el usuario

En general, el diseño web requiere un enfoque muy sistemático, con una secuencia

de métodos que cualquiera puede usar para descubrir las necesidades de los

usuarios y las dificultades que éstos pueden experimentar al usar las páginas web.

Por tanto, los proyectos web deben tratarse como un proyecto general de desarrollo

de software facilitando así el cumplimiento de los programas y la garantía de la

calidad del sitio. En concreto, la aplicación continuada de la metodología de las

11

técnicas de usabilidad conducirá a la mejora del sitio, tanto en el diseño inicial como

en los refinamientos sucesivos.

El diseño de los sitios web es fundamental en términos de usabilidad, ya que los

usuarios encuentran serias dificultades para acceder a las páginas adecuadas si los

sitios no están estructurados en función de sus necesidades o si carecen de mapas

de navegación que les puedan orientar hacia lo que están buscando.

¿Qué significa diseño centrado en el usuario? Se refiere a cualquier diseño que

considera principalmente la opinión del usuario. El usuario debe controlar la

situación manejando el producto, y por tanto, la consistencia es parte indispensable

del diseño, como lo es también la simplicidad. Al considerar todo tipo de usuarios,

dos principios básicos también son la usabilidad y la accesibilidad. Lógicamente será

muy difícil crear un producto completamente accesible, pero deberá serlo lo más

posible.

Los siete mandamientos del diseño centrado en el usuario son:

Uso provechoso

Fácil e intuitivo

Flexibilidad en el uso

Información percibida

Tolerancia al error

Mínimo esfuerzo físico

Tamaño y espacio físico adecuado para su uso

En resumen, el producto o servicio deberá ser accesible, comprensible y utilizable.

Diseño para todos

El campo de las Tecnologías de la Rehabilitación constituye un sector tecnológico

multidisciplinar orientado a la búsqueda de soluciones en el campo de la

accesibilidad integral. Es un sector que busca soluciones técnicas para el conjunto

de la población y especialmente para aquellas personas que por una o varias

limitaciones funcionales ven reducidas sus posibilidades de participación en la vida

social y económica. Este sector propone dos estrategias diferentes de intervención 12

que a su vez son complementarias:

El desarrollo de ayudas técnicas, dispositivos y sistemas diseñados

específicamente para personas con discapacidad o personas mayores.

La mejora de la accesibilidad en el diseño del entorno de uso general y de los

productos y servicios de consumo general.

Dentro de la segunda estrategia, el término Diseño Para Todos (Design for All -

Universal Design) hace alusión a una filosofía que promueve que los productos y los

servicios deben estar diseñados para todos los usuarios. Esto supone ir más allá del

diseño tradicional, en el que el producto se basaba en la media del sector de

población al que iba destinado, y prever ahora las necesidades concretas que pueda

tener cada persona. Un ejemplo claro de lo anterior son los ancianos. Gracias al

aumento de la esperanza de vida en Europa hay cada vez más gente mayor que

necesita servicios adaptados en el transporte público (con piso bajo); teléfonos y

televisiones inteligentes (con teclas de acceso rápido y de fácil entendimiento); y por

extensión para acceder a un ordenador y a una página web.

El Centro para el Diseño Universal / Centre for Universal Design) ha desarrollado

unos principios que pueden servir de directrices generales:

Principio 1.- Uso equitativo. El diseño resulta útil y susceptible de ser vendido a

cualquier grupo de usuarios. Para evitar la segregación de usuarios se trata de

proporcionar las mismas pautas de uso para el mayor número de usuarios. El

producto garantizará la privacidad, la seguridad y la estabilidad para todos sus

usuarios.

Principio 2.- Uso flexible. El diseño se adapta a un amplio rango de capacidades y

preferencias individuales. Proporciona alternativas en los métodos de uso. Permite

que se pueda acceder y usar con ambas manos. Facilita la exactitud y precisión del

usuario.

Principio 3.- Uso intuitivo y sencillo. El diseño es fácil de comprender,

13

independientemente de la experiencia, el conocimiento, la habilidad verbal o el nivel

de concentración del usuario. Es necesario eliminar la complejidad innecesaria,

adaptarse a las expectativas y a la intuición del usuario, adaptarse a un amplio

rango de niveles de alfabetización y de uso del lenguaje, estructurar la información

según su importancia, proporcionar orientación eficaz para lasmacciones

secuenciales y proporcionar realimentación tanto durante la realización de una

Actividad como tras su finalización.

Principio 4.- Información perceptible. El diseño transmite de forma eficaz la

información necesaria al usuario, independientemente de las condiciones

ambientales y de su capacidad sensorial. Por ello se deben usar distintas

modalidades para presentar de forma duplicada la información esencial: gráfica,

verbal, táctil, etc.

Ya es conocido que el papel del desarrollo tecnológico es fundamental en la

integración social del discapacitado. Si existen barreras frente al acceso a la

información, el entorno es discapacitante. En la vida de las personas con

discapacidad, el ordenador no sólo tiene una gran repercusión sobre su calidad de

vida, sino que les abre además las puertas de multitud de trabajos que antes les

eran negados. Así, se facilita tanto su integración laboral como formativa. Otra

aportación más novedosa proviene de la red Internet que ha provocado el

florecimiento de la comunicación a distancia y el libre acceso a un caudal inagotable

de información.

Diseño en función del tipo de discapacidad

El concepto de discapacidad es un concepto muy amplio cuando se trata de manejar

ordenadores o navegar por Internet; así aunque una persona discapacitada necesite

moverse en silla de ruedas, sin embargo no precisa ninguna ayuda técnica especial

para navegar por la red.

En Europa existen unos 43 millones de personas con discapacidad, distribuidas

según sus dificultades según el diagrama que se muestra a continuación. Cada

14

discapacidad, lógicamente, tiene sus propios problemas de accesibilidad en el uso

de las telecomunicaciones y acceso a servicios relacionados.

Por ejemplo, los ciegos no ven la pantalla y necesitan utilizar lectores de pantalla,

aplicaciones software que “leen” la información desplegada en la pantalla y

comunican los eventos producidos por el usuario: abrir o cerrar programas,

activación de opciones de menú, despliegue de ventanas de aviso o de información,

etc. Pero existen otras personas con visión parcial que únicamente utilizan lupas

para aumentar el contenido de la pantalla. Antiguamente estas lupas se

desplazaban por medio de dos carriles paralelos a lo largo de la pantalla en sentido

vertical; hoy en día las “lupas” son aplicaciones software que permiten modificar el

grado de aumento simplemente con un clic de ratón o variando un número.

En cuanto a las personas sordas, se utilizan elementos visuales o iconos que

aparezcan en la pantalla con la activación de sonidos. También, se puede realizar

una redundancia de canal para las personas que posean mala audición.

En cuanto a las personas con dificultades físicas, uno de los mayores problemas

estriba en la falta de precisión en el uso del ratón y del teclado. En casos extremos,

el uso de ayudas técnicas precisas, como licornios sujetos a la cabeza, pueden

15

servir de periféricos apuntadores.

Diseño del interfaz y de los contenidos

De forma general, algunos de los problemas derivados de un mal diseño del interfaz

hombre-máquina son:

Mala distinción de colores o bajo contraste.

Sólo se admiten movimientos de ratón para seleccionar cosas.

No se proporcionan combinaciones de teclas alternativas a la selección de

opciones de menú, por ejemplo.

Errores graves en la colocación de etiquetas en los formularios.

No se permite la navegación por teclado de formularios, por ejemplo

mediante la tecla <Tab>.

Falta de opción terminar en muchos formularios.

El diseño del interfaz debe dar respuesta a las siguientes preguntas (Joaquín

Márquez Correa de icon medialab):

¿Tiene el sitio web una interfaz amigable, con colores que concuerden con

los objetivos y propósitos del sitio?

¿Hay espacios blancos (libres) entre el contenido, para descansar la vista?,

¿o existe una sobresaturación de elementos en la página que desconcierta al

usuario?

¿Se ve el sitio exactamente igual tanto en Mac como en PC? ¿Y en Internet

Explorer como en Firefox?

Mientras que algunos problemas de acceso a los contenidos son los siguientes:

Una página web que sólo contiene gráficos no puede ser leída por los

lectores de pantalla.

De igual forma, si sólo contiene elementos de audio, no vale para sordos. Si

hay un elemento de vídeo sin subtítulos, tampoco es válido para sordos.

Si el contenido está mal estructurado, los usuarios tendrán problemas de

aprendizaje.16

Si existe demasiado texto, las personas sordas se aburren y pierden la

atención.

Si el idioma es extraño o está redactado de forma poco clara, también se

producen dificultades en el aprendizaje.

El diseño de los contenidos debe dar respuesta a las siguientes preguntas (Joaquín

Márquez Correa de icon medialab):

¿Es coherente el contenido con el contexto de la página o site?

¿La redacción es corta y precisa, evitando los textos demasiado extensos?.

¿Existen referencias cruzadas entre textos que están relacionados?

¿Se evita usar líneas horizontales para hacer separaciones en los textos,

pueden ser interpretadas como el fin de la información?.

INICIATIVA WAI Y PAUTAS W3C

El consortium W3C

El Consorcio W3C fue creado para desarrollar plenamente el potencial de la Web.

Es el organismo que define los protocolos comunes que promueven su evolución y

aseguran su interoperabilidad.

Se trata de un consorcio industrial internacional dirigido conjuntamente por el

Laboratorio de Informática del Instituto Tecnológico de Massachusetts (MIT) en

EE.UU., el Instituto Nacional de Investigación en Informática y Control (INRIA) en

Francia y la Universidad de Keio en Japón. En la actualidad el Consorcio está

formado por más de 300 organizaciones miembros.

El consorcio W3C (World Wide Web Consortium) comenzó en 1997 la normalización

del procedimiento de diseño de las páginas web a través de un grupo de trabajo

conocido como iniciativa WAI (Web Accesibility Initiative), para asegurar el acceso a

la información en Internet de todas las personas, tengan o no discapacidad.

Iniciativa WAI

17

El grupo de trabajo WAI del W3C, en asociación con organizaciones de todo el

mundo, está promoviendo la accesibilidad en la Web a través de cinco actividades

complementarias:

Asegurar que las tecnologías esenciales de la Web soporten la accesibilidad.

Desarrollar pautas o recomendaciones para la autoría de páginas,

aplicaciones de usuario y herramientas de autor.

Desarrollar herramientas de evaluación y reforma para la accesibilidad.

Dirigir la formación y asistencia técnica.

Seguir la pista a la investigación y desarrollo que pueda afectar a la

accesibilidad futura de la Web.

La Unión Europea ha asumido el compromiso de adoptar la pautas de la WAI para el

diseño de las páginas Web de las Administraciones Públicas.

Pautas de Accesibilidad al Contenido en la Web (WCAG)

La evaluación técnica se basa en los puntos de verificación de las Pautas de

Accesibilidad al Contenido en la Web (WCAG) emitidas por el grupo W3C/WAI.

Las pautas WCAG 1.0 se publicaron en mayo de 1999 como Recomendación del

W3C pretendiendo servir de guía para explicar cómo hacer accesibles los

contenidos de la Web a personas con discapacidad. La recomendación se publicó

junto con otro documento titulado "Técnicas para las Pautas de Accesibilidad al

Contenido en la Web 1.0" que explicaba al programador cómo aplicar los puntos de

verificación definidos en las pautas.

Así, la evaluación técnica se basaba en los siguientes 12 puntos de verificación

como síntesis indicativa de las Pautas correspondientes a los niveles A y AA. Estos

criterios incluyen en su mayor parte aspectos de prioridad 1 y en algunos casos de

prioridad 2, siendo todos de obligado cumplimiento:

Formularios (prioridades 1 y 2 en WCAG 1.0).

18

o El atributo placeholder tiene que estar en todos los input.

o Todos los elementos tendrán un atributo value y un atributo id.

o Instrucciones de formulario

o El formulario tiene que hacer submit cuando el usuario quiera.

Alternativas textuales a elementos multimedia (prioridad 1 en WCAG 1.0).

o ALT en todas las <img>

o ALT en mapas de imágenes

o ALT descriptivo (no 000pic ni espacio en blanco)

o Todo audio-video subtitulado y con texto alternativo.

o Uso del track para las descripciones de video

o Si un audio empieza automático, tiene que apagarse en menos de 3sg.

o Panel de control del audio siempre visible

o Poner audio cuando el usuario solicita

Encabezados (prioridad 2 en WCAG 1.0).

o Cada bloque de contenido tiene que llevar un h1…h6

Unidades relativas en la Hoja de Estilo (prioridades 1 y 2 en WCAG 1.0).

Enlaces comprensible (prioridad 2 en WCAG 1.0).

o Los link se diferencian con un color diferente (azul)

o Uso de anclas para ir al contenido.

o Texto hipervínculos correcto

Contraste (prioridad 2 para las imágenes en WCAG 1.0).

Uso semántico de los colores (prioridad 1 en WCAG 1.0).

Alineación del contenido de las tablas (prioridad 2 en WCAG 1.0).

Tablas de datos (prioridad 1 en WCAG 1.0).

Scripts (prioridad 1 en WCAG 1.0).

19

o Script que te avise que el límite de sesión está a punto de expirar

o Si se detecta un error se le tiene que describir al usuario

Navegación y código:

o Instrucciones de navegación

o <title></title> en todas las paginas

o Todas las etiquetas con principio y fin

o Sin atributos duplicados

o Etiquetas anidadas correctamente

o ID's unicos

o Más de un camino para llegar a un sitio

o Navegación coherente

Pautas de usabilidad webEstos son los principios básicos de usabilidad:

Anticipación: el sitio web debe anticiparse a las necesidades del usuario.

Autonomía: los usuarios deben tener el control sobre el sitio web.

Todos los enlaces deben de FUNCIONAR.

Escribir los contenidos resumidos un 25% de lo que sería en un papel (leer en

pantalla cuesta mucho).

Los colores han de utilizarse con precaución para no dificultar el acceso a los

usuarios con problemas de distinción de colores.

Eficiencia del usuario, los sitios web se deben centrar en la productividad del

usuario, no en la del propio sitio web.

Por ejemplo, en ocasiones tareas con mayor número de pasos son más

rápidas de realizar para una persona que otras tareas con menos pasos, pero

más complejas.

Reversibilidad, un sitio web ha de permitir deshacer las acciones

realizadas. 20

Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón

esta en función de la distancia y el tamaño del objetivo. A menor distancia

y mayor tamaño más facilidad para usar un mecanismo de interacción.

Calidad es igual a rapidez. (más de 20 segundos el 80% de los visitantes

se irá sin ver la página)

Reducción del tiempo de latencia. Hace posible optimizar el tiempo de

espera del usuario, permitiendo la realización de otras tareas mientras se

completa la previa e informando al usuario del tiempo pendiente para la

finalización de la tarea.

Sitio sencillo. Aprendizaje, los sitios web deben requerir un mínimo

proceso de aprendizaje y deben poder ser utilizados desde el primer

momento.

El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero

un uso inadecuado de estas puede dificultar enormemente el aprendizaje.

La protección del trabajo de los usuarios es prioritario, se debe asegurar

que los usuarios nunca pierden su trabajo como consecuencia de un error.

Legibilidad, el color de los textos debe contrastar con el del fondo, y el

tamaño de fuente debe ser suficientemente grande.

Se deben evitar ciertas acciones:

Abrir nuevas ventanas de navegación. La excepción: documentos PDFy

similares.

Elementos de diseño que parecen publicidad.

Contenido etéreo y promoción vana

Contenido denso y texto extenso

Tiempo lento de descarga.

Flash

21

Multimedia y videos largos.

Diseños congelados (anchura fija).

Navegación Garantizar la persistencia en el diseño, garantiza seguridad al usuario:

o Ver siempre el nombre del sitio Web, su logotipo, colores identidad.

o El área de navegación sencilla y global de la parte superior aparezca visible y consistente en todo el sitio.

Diferenciar enlaces de navegación del resto de contenidos.

El usuario tiene que saber en todo momento:

o De dónde viene, dónde está, dónde puede ir.

Barra horizontal superior es perfecta para la navegación ppal. o global.

Barra vertical para la secundaria o local.

La navegación global es más sólida (menos cambios) que la local.

22

Estilo del textoLa selección de "colores básicos" de nuestro site se debe mantener dentro del rango

de 256 colores. Ampliar el rango en elementos no fundamentales (fotos,

ilustraciones, etc.) pero debemos asegurarnos que el 100% podrá acceder a nuestro

sitio sin problemas.

Para el menú: Lo mejor es tener dos colores, para identificar el elemento

activo de la barra de navegación y para identificar los elementos apagados.

Colores para enlaces:Es recomendable conservar los colores estándar (azul

subrayado). Si decides cambiarlo, recuerda lo siguiente:

Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendrás que elegir

un color saturado para el estado sin pulsar y otro menos saturado para el

estado pulsado.

Color del fondo: El texto corrido se lee mejor con fondo claro y texto oscuro.

Lo mas recomendable es el fondo blanco o el amarillo claro. Otros colores

claros son menos cómodos para leer, pero si tu site no exige lecturas

prolongadas, puedes usarlos para llamar la atención y conseguir una lectura

mas compulsiva.

Percepción: El texto es demasiado pequeño o confuso. Utilice fuentes de

tamaño 10 o superiores. Utilizar texto negro sobre fondos blancos para un

23

contraste adecuado. No usar texto falso “lorem ipsum” muy habitual en

diseñadores.

Cuerpo de texto

Tipo de público (puntos)

Público general 10-12.

Tercera edad y personas con problemas de visión 12-14.

Niños y otros lectores principiantes 12-14.

Adolescentes y jóvenes 10-12.

Contra las mayúsculas

Reduce la velocidad de lectura en un 10%.

Aspecto de infantil, o agresivo y poco profesional.

Sólo usar en encabezados cortos y títulos (y para gritar).

Imágenes para textos

Los gráficos hacen que los archivos sean más pesados.

El texto basado en gráficos no es apto para la búsqueda.

El texto basado en gráficos no es seleccionable.

24

El texto gráfico no es escalable.

Los lectores de pantalla no pueden leer texto gráfico fácilmente.

Formularios Reduce al máximo el numero de campos en los formularios.

o Correo electronico = nombre de usuario.

o DNI = password.

Evita formalidades

o Tratamiento (Don, Sr., Sra.,)

o Tipo de Via (Calle, Camino, ...)

TEMA 4. HERRAMIENTAS AVANZADAS DE VALIDACIÓN DE LA ACCESIBILIDAD WEB.

TAW

TAW ha sido desarrollado por la Fundación CTIC (Centro Tecnológico de la

Información y la Comunicación) para el CEAPAT. Es una herramienta en español y

en inglés, multiplataforma, que permite el análisis y ofrece información sobre el

grado de accesibilidad de un sitio web. Además, proporciona una propuesta de

solución de los problemas de accesibilidad que presenta dicho sitio web.

A lo largo de su existencia, se han desarrollado varias versiones, cuyas

características más destacables se muestran a continuación:

TAW v.1 (2000): sólo vía web, introduciendo url de la página a evaluar en un

editor de búsqueda.

TAW v.2 (2002): evaluaba ya un portal completo, con jerarquía desde el

index.html.

25

TAW v.3 (2005): es residente en el PC y además se actualiza de forma

automática para usuarios registrados vía web con Java Web Start y firma

electrónica.

Esta última versión del TAW incorpora además otras interesantes funcionalidades:

Actualización completa del motor de análisis lo que supone la ampliación del

número de comprobaciones.

Actualización del entorno gráfico lo que permite la comprobación visual para

facilitar la validación manual.

Análisis de sitios web bajo protocolo seguro (soporte HTTPS).

Validación de zonas protegidas mediante HTTP auth.

Acceso a través de proxy y proxy con contraseña.

Añadir comprobaciones personalizadas.

Configuración de validación a nivel de punto de verificación.

Límite del nº de páginas del análisis.

Ampliación del número de comprobaciones.

Informe EARL.

Versión en inglés.

URL: http://www.tawdis.net

También disponible como extensión de Firefox en: https://addons.mozilla.org/es-

ES/firefox/addon/1158

INTAV – Inteco Accessibility Validator

El Centro de Referencia en Accesibilidad y Estándares Web de INTECO, como

medio de promoción de acceso regular y normalizado a la Sociedad de la

Información por parte de personas con discapacidad (RD 1494/2007), debe velar por 26

el cumplimiento de la legislación vigente en materia de Accesibilidad. Por esta razón,

ha desarrollado este servicio automático de detección de barreras de acceso a la

información: INTAV.

Se trata de un servicio que analiza, de forma automática, el cumplimiento de los

requisitos de accesibilidad Web en base a la normativa vigente y estándares (UNE

139803:2004 y WCAG).

De este modo, el servicio de INTAV revisa una página Web e informa sobre los

problemas de accesibilidad detectados automáticamente, así como de las

advertencias y observaciones que deberán ser comprobadas de forma manual.

El objetivo de INTAV es poder facilitar la revisión de algunos aspectos de

accesibilidad de las páginas Web. Al automatizar el análisis se consigue optimizar

las acciones y los esfuerzos dedicados en el análisis de accesibilidad de una página

web.

INTAV está integrado en un Ciclo de Mejora Continua, avanzando en las

comprobaciones e incrementando su eficiencia.

URL: http://www.inteco.es/checkAccessibility/Accesibilidad/accesibilidad_servicios/

intav_home/

Cynthia Say s

El portal Web de Cynthia Says es un proyecto educacional promovido por varias

organizaciones y empresas creado para divulgar entre los desarrolladores la

accesibilidad Web. Cynthia es una herramienta de validación automática de

accesibilidad según las WCAG 1.0 y la Sección 508 que se basa en la Tabla de

Puntos de Verificación del W3C para mostrar el resultado del análisis.

URL: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

HERA

HERA (Hojas de Estilos para Revisión de la Accesibilidad) es una herramienta online

gratuita diseñada para facilitar a los desarrolladores la tarea de la revisión manual de

27

accesibilidad de las páginas Web según las pautas del W3C. HERA aplica sobre la

página original diferentes hojas de estilos para identificar visualmente los elementos

de la página que presentan problemas de accesibilidad y que necesitan ser

revisados. Está desarrollado por la Fundación SIDAR (Seminario Iberoamericano

sobre Discapacidad y Accesibilidad a la Red).

HERA-XP es una versión simplificada de HERA, y está pensada para hacer

revisiones puntuales, por ejemplo durante el proceso de creación de un sitio. Las

dos ofrecen prácticas instrucciones sobre lo que el revisor debe tener en cuenta a la

hora de evaluar la aplicación de cada uno de los puntos de control, y le ofrecen

información sobre por qué es necesario cada punto y a qué tipo de usuarios afecta.

Además, las dos utilidades están siendo traducidas a varios idiomas, comenzando

por el inglés y el portugués.URL: http://www.sidar.org/ex_hera/hera-xp

The Wave

Servicio online de evaluación de accesibilidad promovido por WebAIM. Se basa

tanto en las WCAG 1.0 como en la Sección 508. Pretende ayudar a los

desarrolladores a realizar aquellas tareas que exigen una toma de decisiones de tipo

personal, mostrando información sobre los elementos de la página (textos

alternativos, información estructural, orden de lectura, etc.).

URL: http://www.webaim.org/

Herramientas online de validación de gramática

Validador HTML del W3C

El validador HTML del W3C es un servicio online gratuito de validación de código

HTML basado en un parseador SGML. Comprueba la conformidad de los

documentos HTML respecto a las gramáticas del W3C y otros estándares HTML

(XHTML, XML, MathML).

URL: http://validator.w3.org/

28

Validador HTML de WDG

El validador de WDG (Web Design Group) usa el mismo motor que el validador

HTML del W3C pero produce unos mensajes más sencillos y fáciles de entender y

soporta un mayor abanico de codificaciones de caracteres.

URL: http://www.htmlhelp.com/tools/validator/

Validador CSS del W3 C

Herramienta gratuita para validar las hojas de estilo CSS solas o presentes en

documentos (X)HTML para comprobar si cumplen las especificaciones del W3C.

Existe una versión online y la versión descargable esta programada en Java y por

tanto es multiplataforma.

URL: http://jigsaw.w3.org/css-validator/

Tidy

El Tidy (disponible también en Sourceforge) es un validador, corrector y limpiador

de código HTML que puede convertir los documentos HTML en XHTML. La versión

ejecutable funciona en línea de comandos, pero si se desea se puede usar con el

interfaz gráfico TidyGui o una versión online gratuita.

URL: http://tidy.sourceforge.net/

29