PDF de programación - ¿CÓMO HAGO QUE MI SITIO WEB SEA ACCESIBLE? - Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de

Aplicaciones Web

Sergio Luján Mora

Accesibilidad en el Diseño de Aplicaciones Web

¿CÓMO HAGO QUE MI SITIO WEB
SEA ACCESIBLE?

1

Accesibilidad en el Diseño de Aplicaciones Web

Contenido

• El WAI
• 10 consejos breves
• WCAG 1.0

– Método de aplicación
– Niveles de conformidad

• WCAG 2.0

Accesibilidad en el Diseño de Aplicaciones Web

EL WAI

2

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

3

Accesibilidad en el Diseño de Aplicaciones Web

10 CONSEJOS BREVES

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

• Los siguientes 10 consejos resumen los

conceptos clave del diseño web
accesible

• No se trata de una guía completa, es un
extracto de las “Pautas de accesibilidad
al contenido en la Web” (WCAG 1.0)
– Su cumplimiento no garantiza ningún nivel

de conformidad (A, AA, AAA)

4

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

1.

Imágenes y animaciones: Use el
atributo alt para describir la función de
cada elemento visual

2. Mapas de imagen: Use el elemento
map de tipo cliente y texto para las
zonas activas

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

3. Multimedia: Proporcione subtítulos y
trascripción del sonido, y descripción
del vídeo

4. Enlaces de hipertexto: Use texto que
tenga sentido leído fuera de contexto.
Por ejemplo, evite "pincha aquí"

5

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

5. Organización de las páginas: Use

encabezados, listas y estructura
consistente. Use CSS para la
maquetación donde sea posible

6. Gráficos de datos: Resuma o use el

atributo longdesc

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

7. Scripts, applets y plug-ins: Ofrezca

contenido alternativo si las funciones
nuevas no son accesibles

8. Marcos: Use el elemento noframes y

títulos con sentido

6

Accesibilidad en el Diseño de Aplicaciones Web

10 consejos breves

9. Tablas: Disponga que puedan leerse

línea a línea. Resuma

10. Revise su trabajo: Verifique. Use las

herramientas, listas de comprobación
y pautas de W3C

Accesibilidad en el Diseño de Aplicaciones Web

WCAG 1.0

7

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• Pautas de Accesibilidad para el Contenido

Web 1.0 (Web Content Accessibility
Guidelines, WCAG 1.0)
– Mayo 1999

• Proporcionan los criterios técnicos para la

correcta codificación, de cara a su
accesibilidad, del contenido de las páginas y
sitios Web, así como para una correcta
estructuración del mismo y su funcionalidad

Accesibilidad en el Diseño de Aplicaciones Web

8

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• Van dirigidas a:

– Diseñadores y desarrolladores de sitios y páginas

Web

– A aquellos que tratan de verificar la accesibilidad

de los mismos

– Aquellas organizaciones o interesados en

garantizar el acceso sin barreras tecnológicas en la
Web

9

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• WAI elaboró 14 pautas con 65 puntos de
verificación con tres niveles de prioridad:
– Prioridad 1: El desarrollador de contenidos de

páginas Web tiene que satisfacer este punto de
verificación. De otra forma, uno o más grupos de
usuarios encontrarán imposible acceder a la
información del documento. (16 puntos de
verificación tienen prioridad 1)

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

– Prioridad 2: El desarrollador de contenidos de

páginas Web debe satisfacer este punto de
verificación. De otra forma, uno o más grupos
encontrarán dificultades en el acceso a la
información del documento. (30 puntos de
verificación tienen prioridad 2)

– Prioridad 3: Un desarrollador de contenidos de

páginas Web puede satisfacer este punto de
verificación. De otra forma, uno o más grupos de
usuarios encontrarán alguna dificultad para
acceder a la información del documento. (19
puntos de verificación tienen prioridad 3)

10

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• Las pautas se enmarcan en dos grupos:
– Asegurar una transformación correcta: de

la 1 a la 11

– Hacer comprensible y navegable el

contenido: de la 12 a la 14

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

1. Proporcione alternativas equivalentes para el

contenido visual y auditivo
2. No se base sólo en el color
3. Utilice marcadores y hojas de estilo y hágalo

apropiadamente

4. Identifique el idioma usado
5. Cree tablas que se transformen correctamente
6. Asegúrese de que las páginas que incorporen nuevas

tecnologías se transformen correctamente

7. Asegure al usuario el control sobre los cambios de los

contenidos tempo-dependientes

11

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

8. Asegure la accesibilidad directa de las interfaces

incrustadas

9. Diseñe para la independencia del dispositivo
10. Utilice soluciones provisionales
11. Utilice las tecnologías y pautas W3C
12. Proporcione información de contexto y orientación
13. Proporcione mecanismos claros de navegación
14. Asegúrese de que los documentos sean claros y

simples

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• Cada pauta incluye:
– Número de la pauta.
– Exposición de la pauta.
– El fundamento que sustenta la pauta y algunos

grupos de usuarios que se benefician de ella.

– Una lista de definiciones de los puntos de

verificación.

12

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

• Cada punto de verificación incluye:

– Número del punto de verificación.
– Explicación del punto de verificación.
– La prioridad del punto de verificación.
– Notas informativas opcionales, ejemplos

aclaratorios y referencias cruzadas a pautas o
puntos de verificación relacionados.

– Un vínculo a una sección del Documento de

Técnicas donde se tratan la ejecución y ejemplos
del punto de verificación.

Accesibilidad en el Diseño de Aplicaciones Web

Pautas de accesibilidad al contenido

en la Web

13

Accesibilidad en el Diseño de Aplicaciones Web

MÉTODO DE APLICACIÓN

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

• Recomendación incluida en WCAG 1.0, que indica pautas básicas

para la revisión y en la que se recomienda:
– Utilizar al menos dos herramientas de revisión automática
– Hacer una concienzuda revisión manual

• Verifique la accesibilidad con herramientas automáticas y

revisión humana:
– Los métodos automáticos son generalmente rápidos y

convenientes, pero no pueden identificar todos los problemas de
accesibilidad

– La revisión humana puede ayudar a garantizar la claridad del

lenguaje y la facilidad de navegación

• Comience por utilizar métodos de validación en las primeras
etapas del desarrollo: los problemas de accesibilidad que se
identifican temprano, son fáciles de corregir y de evitar

14

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

1. Utilice una herramienta automatizada de validación
de la accesibilidad y la navegación. Tenga en cuenta,
por favor, que las herramientas o programas de
revisión no contemplan todos los problemas de
accesibilidad, tales como la comprensibilidad de un
enlace de texto, o la funcionalidad de un texto
equivalente, etc.

2. Valide la sintaxis (Ej., HTML, XML, etc.).
3. Valide las hojas de estilo (Ej., CSS).
4. Utilice un emulador o navegador solo-texto.

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

5. Utilice varios navegadores gráficos, con:

1. sonidos y gráficos cargados,
2. gráficos no cargados,
3. sonidos no cargados,
4. sin ratón,
5. marcos, scripts, hojas de estilo, y applets sin cargar
6. Utilice varios navegadores, antiguos y nuevos.

15

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

7. Utilice un navegador con conversión texto-voz, un
lector de pantalla, un programa de magnificación,
una pantalla pequeña, etc.

8. Utilice un revisor gramatical y ortográfico. Una

persona que lee una página con un sintetizador de voz
puede no ser capaz de descifrar la predicción que
hace el sintetizador de una palabra que tiene un error
ortográfico. Eliminando los problemas gramaticales se
incrementa la comprensión.

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

9. Revise el documento en cuanto a su claridad y

simplicidad. Las estadísticas de legibilidad, como las
que generan algunos procesadores de texto, pueden
ser útiles indicadores de la claridad y simplicidad.
Mejor aún, consulte con un editor (humano)
experimentado para revisar el contenido escrito en
cuanto a su claridad. Los editores pueden también
mejorar la usabilidad de los documentos al identificar
problemas potenciales de sensibilidad cultural que
pueden presentarse debido al uso del lenguaje o de
los iconos.

16

Accesibilidad en el Diseño de Aplicaciones Web

Método de aplicación

10. Invite a personas con discapacidad a revisar los

documentos. Los usuarios con discapacidad, noveles
o expertos, proporcionaran valiosa información sobre
problemas de accesibilidad o usabilidad y sobre su
severidad.

Accesibilidad en el Diseño de Aplicaciones Web

NIVELES DE CONFORMIDAD

17

Accesibilidad en el Diseño de Aplicaciones Web

Nivel de conformidad

• Adecuación de nivel A (A): se satisfacen todos los puntos de

verificación de prioridad 1.

• Adecuación de nivel Doble A (AA): se satisfacen todos los puntos

de verificación de prioridad 1 y 2.

• Adecuación de nivel Triple A (AAA): se satisfacen todos