Calidad en Sitios Web Tercera Parte: Accesibilidad

1
Calidad en Sitios WebTercera Parte Accesibilidad

• Lluís CodinaUPF

2
WAI Web Accessibility Initiative (1.0)

• Proyecto del W3C
• Strategies, guidelines, resources to make the Web
  accessible to people with disabilities
• Web accessibility means that people with
  disabilities can perceive, understand, navigate,
  and interact with the Web, and that they can
  contribute to the Web

3
Limitaciones/discapacidades

• Visuales
• Auditivas
• Motoras
• Cognitivas / Sociales / De entorno

4
Modelos /Antecedentes

• Arquitectura
• Edificios y ciudades accesibles eliminación de
  barreras de acceso
• Documentación
• El libro fácil libros con tipografía y redacción
  adecuados a diversos niveles cognitivos. Libros
  leídos.
• Multimedia
• Films y programas de televisión para personas
  sordas. Films explicados para invidentes.

5
Objetivos / Motivación

• Motivación egoísta gt Incorporar a personas
  discapacitadas a la Red gt Aumentar la audiencia
• Motivación de equidad gt Iguales oportunidades
  para personas discapacitadas
• Motivación de eficiencia gt Los discapacitados son
  la audiencia

6
Pragmatismo

• Aproximación por Niveles de Adecuación
• Prioridad 1 Sin cumplir este nivel, personas
  discapacitadas no podrán acceder a las páginas
• Prioridades 2 y 3 Sin cumplir este nivel será
  muy complicado (PN 2) o bien será difícil (PN 3)
  que personas discapacitadas puedan acceder a las
  páginas

7
Dónde están las barreras?

• Código no estándar (W3C) y/o malas prácticas en
  la estructuración de los documentos
• Ausencia de metadatos y de alternativas
  equivalentes en materiales audiovisuales

8
Código no estándar

• Uso de elementos y atributos depreciados en HTML
  y/o malas prácticas en la codificación de
  documentos. Ejemplos
• Uso de tablas para estructurar la página
• Uso de etiquetas semánticas para dar formato
• No separar el contenido de la presentación
• Ausencia de mapas del sitio
• Uso de medidas absolutas
• Usar color (únicamente) para transmitir
  información
• Errores de codificación (código no validado)

9
Ausencia de metadatos

• Casos típicos
• Etiqueta lttitlegt en elemento ltheadgt
• Atributos en etiquetas ltimggt y lttablegt
• Atributo lang
• Un problema principal
• Alternativas equivalentes en componentes
  multimedia (longdesc)

10
10 ejemplos de las WCAG 1.0 (1/2)

• 3.2 Cree documentos que estén validados por las
  gramáticas formales publicadas. Prioridad 2
• 3.4 Utilice unidades relativas en lugar de
  absolutas al especificar los valores en los
  atributos de los marcadores de lenguaje y en los
  valores de las propiedades de las hojas de
  estilo. Prioridad 2
• 4.3 Identifique el idioma principal de un
  documento. Prioridad 3
• 13.3 Proporcione información sobre la estructura
  general de un sitio (por ejemplo, mapa del sitio
  o tabla de contenidos).Prioridad2
• 13.4 Utilice sistemas de navegación de forma
  coherente. Prioridad 2

11
10 ejemplos (2/2)

• 13.5 Proporcione barras de navegación para
  destacar y dar acceso a los sistemas de
  navegación. Prioridad 3
• 13.7 Si proporciona funciones de búsqueda,
  permita diferentes tipos de búsquedas para
  diversos niveles de habilidad y preferencias.
  Prioridad 3
• 14.1 Utilice el lenguaje apropiado más claro y
  simple para el contenido de un sitio. Prioridad
  1
• 14.2 Complemente el texto con presentaciones
  gráficas o auditivas cuando ello facilite la
  comprensión de la página. Prioridad 3
• 14.3 Cree un estilo de presentación que sea
  coherente en todas las páginas. Prioridad 3

12
Otra visión The 10 Quick Tips

• Images animations Use the alt attribute to
  describe the function of each visual.
• Image maps. Use the client-side map and text for
  hotspots.
• Multimedia. Provide captioning and transcripts of
  audio, and descriptions of video.
• Hypertext links. Use text that makes sense when
  read out of context. For example, avoid "click
  here."
• Page organization. Use headings, lists, and
  consistent structure. Use CSS for layout and
  style where possible.
• Graphs charts. Summarize or use the longdesc
  attribute.
• Scripts, applets, plug-ins. Provide alternative
  content in case active features are inaccessible
  or unsupported.
• Frames. Use the noframes element and meaningful
  titles.
• Tables. Make line-by-line reading sensible.
  Summarize.
• Check your work. Validate. Use tools, checklist,
  and guidelines at http//www.w3.org/TR/WCAG

13
Ventajas de los contenidos accesibles

• Incremento de audiencia (10-20)
• Páginas compatibles con los próximos navegadores
• Menores costes de mantenimiento
• Menores costes de servidor
• Sitios más coherentes y fáciles de navegar
• Incremento de la visibilidad (SEO)
• Sitios que cumplen con la ley

14
Desventajas

• Costes entre moderados y altos en nuevas páginas,
  en algunos casos
• Costes altos para transformar páginas
  preexistentes, en algunos casos

15
Cómo evaluar?

• Conjunto de herramientas WAI
• Recomendaciones WAI para autores Recomendaciones
  WAI para desarrolladores de software
• Guía de evaluación articuladas Pautas y Puntos
  de verificación
• Herramientas de evaluación en línea

16
Conclusiones (1)

• Puntos fuertes
• Coste cercano a cero en sitios o páginas nuevas
• Añade audiencia gt incrementa el tráfico gt mayor
  rendimiento de la inversión
• Crea sitios más fáciles de mantener gt menos
  costes
• Crea sitios compatibles con los navegadores del
  futuro gt menos costes
• Crea sitios que necesitan menos ancho de banda gt
  menos costes
• La accesibilidad reduce la brecha digital gt
  beneficios sociales
• Es la ley (Is the law)

17
Conclusiones (2)

• Puntos débiles
• Existe poco know-how
• Puede presentar costes altos transformar sitios
  preexistentes y en algunos sitios nuevos
• Es difícil aplicar algunas pautas y hay poco
  conocimiento sobre cómo hacerlo en otras
• A algunos productores de software no parece
  importarles mucho
• La industria editorial le presta poca atención

18
Práctica 1

• Comparar la página principal de tres sitios web
  de la Administración y aplicarles un test de
  accesibilidad con herramientas de validación
  automáticas.
• Complementar, en su caso, con comprobaciones a
  mano
• Herramienta de validación recomendada para esta
  práctica
• www.tawdis.net

19
Práctica 2

• Instalar un lector de pantalla (screen reader) y
  realizar tests de lectura con diversos sitios
  web.
• Lector de pantalla recomendado para esta
  práctica
• JAWSwww.freedomscientific.com