Edición de Contenidos Accesibles

1. Edición de Contenidos Accesibles Eusko Jaurlaritza / Gobierno Vasco 2010eko Urriak / Octubre de 2010

2. Definición • Podemos definir la Accesibilidad Web como la posibilidad de que un sitio o servicio Web pueda ser visitado y utilizado de forma satisfactoria por el mayor número posible de personas, independientemente de las limitaciones personales que tengan o de aquellas limitaciones que sean derivadas de su entorno.

3. ¿Por qué hacer mi sitio web accesible? • La Web se creó como una red universalde conocimiento que ha supuesto un enorme salto cualitativo y cuantitativo en cuanto a la adquisición y tratamiento de información se refiere. • Sin embargo, y debido a diferentes motivos, hoy en día existen barreras significativas en la Web para un amplio número de ciudadanos, entre ellos las personas con discapacidad y personas mayores. • La Accesibilidad Web es un elemento esencial que favorece la igualdad de oportunidades de las personas con discapacidad, permitiendo el ejercicio del derecho reconocido como es el acceso a la cultura, el ocio y el tiempo libre.

4. Beneficiarios • Personas con discapacidad • Visual (ceguera, baja visión, daltonismo) • Auditiva (sordera, hipoacusia) • Física o motriz • Cognitivas o neurológicas (dislexia, déficit de atención, falta de memoria) • Personas mayores • Usuarios con insuficiencia de medios técnicos • Usuarios afectados por circunstancias derivadas del entorno • Usuarios que no dominen el idioma, como aquellos de habla extranjera o con menor nivel cultural • Usuarios inexpertos o que presentan inseguridad frente a la utilización de diversos dispositivos electrónicos • …todo el mundo

5. Beneficiarios • Personas con discapacidad • Más de 4 millones de personas en el estado tienen algún tipo de discapacidad permanente • 5 millones de personas de edad avanzada • 8 millones de personas afectadas por circunstancias transitorias (accidentes, lesiones, enfermedad…)

6. Símil con las barreras arquitectónicas

7. Símil con las barreras arquitectónicas ¿A quién perjudica?

8. Símil con las barreras arquitectónicas ¿Sólo?

9. Sensibilización

10. ¿Sensibilización? • Total… ¿para qué? • Es caro y no compensa • Es difícil • Son pocos • No son mis clientes / usuarios • Es feo • Un ciego no usa Internet • A quién le importa • …

11. Ayudas técnicas • Software o hardware diseñado para ayudar a las personas con discapacidad a realizar sus actividades diarias

12. Ayudas técnicas

13. Sin ayudas técnicas

14. Ayudas técnicas • Lectores de pantalla

15. Ventajas • Simplifica el desarrollo • Ahorra costes • Facilita la independencia de dispositivo y la interoperabilidad • Aumenta la usabilidad • Mejora el acceso en general • Aumenta el público objetivo

16. Otras Ventajas • Mejora la indexación en buscadores • “Tu usuario más importante es ciego. La mayoría de las visitas a tu sitio vienen de Google, y Google sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos visitas. Fin de la historia” Steven Pemberton

17. Malentendidos Algunas ideas preconcebidas y erróneas: • Es difícil y complicado • Afecta a muy pocos • Tiene un coste muy elevado • Es sólo para las personas ciegas • Da lugar a productos poco estéticos • Versiones sólo texto • …

18. ¿Cómo? Uso de estándares Web World Wide Web Consortium “El poder de la web está en su universalidad. Un acceso a la Web para todos independientemente de su discapacidad es un aspecto esencial.” Objetivo: Guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web.

19. ¿Cómo? Aplicación de Pautas • Iniciativa de Accesibilidad Web • Pautas de Accesibilidad al Contenido en la Web – WCAG 1.0 (1999) • Pautas: 14 • Puntos de verificación: 65 • Prioridad 1, 2 y 3 (tiene, debe, puede) • Niveles de adecuación A, AA y AAA

20. ¿Cómo? Aplicación de Pautas • Pautas de Accesibilidad al Contenido en la Web – WCAG 2.0 (2008) • 4 principio de diseño: • Perceptible • Operable • Comprensible • Robusto • Pautas: 12 • Cada pauta se divide en Criterios de Conformidad (testeables) • Niveles de Conformidad A, AA y AAA

21. ¿Cómo? Aplicación de Pautas • ¿Por qué las WCAG 2.0? • Estándar internacional desarrollado en consenso • Aplicable a tecnologías Web avanzadas (Presentes, futuras y no W3C) • Criterios más claros y fáciles de testear • Mayor adaptabilidad y flexibilidad ante diferentes situaciones y tecnologías • Materiales de soporte y mejor documentación • Ámbito de aplicación: contenidos web en general (páginas, sitios, aplicaciones) • Destinatarios: desarrolladores web, diseñadores, desarrolladores de herramientas, editores de contenido, …

22. ¿Cómo? Aplicación de Pautas La Accesibilidad Web no ha cambiado • WCAG 2.0 arranca sobre las mismas bases que tuvo WCAG 1.0 • En algunos casos hay diferencias en los requisitos y/o la forma de abordar los problemas • Aunque el planteamiento general y algunos requisitos pueden haberse adaptado, las cuestiones fundamentalesrespecto a Accesibilidad Web son las mismas

23. Pautas, Normativas y Certificaciones Pautas WCAG 2.0 Pautas WCAG 1.0

24. Sistema de Gestión de Contenidos • Herramientas que facilitan la creación, mantenimiento, publicación y presentación de la información manejada en los portales Web. • La accesibilidadde un sitio Web recae sobre tres pilares fundamentales • Las herramientas empleadas para la creación del portales y la edición de contenidos • Desarrollo de plantillas y aplicaciones • Edición de contenidos • La accesibilidad del portal se ve comprometida en cuanto falle cualquiera de estos tres pilares.

25. Sistema de Gestión de Contenidos • Metáfora Las herramientas y el desarrollo accesible forman el "marco" principal del portal, pero el "lienzo" son los contenidos que allí se publican. Para que todo el "cuadro" sea accesible deben ser accesibles tanto el "marco" como el "lienzo"

26. Manual de Edición de Contenidos Objetivos Se pretende que el personal de edición de contenidos sea capaz de: • Reconocer la importancia de la Accesibilidad Web y de su papel para alcanzarla. • Conocer las recomendaciones generales sobre Accesibilidad. • Identificar problemas de accesibilidad en sus portales a través del conocimiento adquirido en la guía. • Buscar soluciones alternativas a los posibles problemas de accesibilidad y limitaciones que ofrecen los editores de contenido.

27. Manual de Edición de Contenidos Índice general • Imágenes y alternativas textuales • Edición de contenidos • Estructura • Lenguaje y comprensión • Presentación • Tablas • Otros formatos Imágenes y alternativas textuales

28. Imágenes y alternativas textuales Alternativas textuales • Una de las mejoras más importantes en cuanto a accesibilidad • Uno de los aspectos menos comprendidos y más proclive a errores • Tres mecanismos para proporcionar equivalentes textuales a las imágenes • Texto alternativo • Descripción larga • Título • El texto alternativo es siempre obligatorio

29. Imágenes y alternativas textuales Texto alternativo • Proporcionar una alternativa textual breve • Cuál es el contenido o función de la imagen • Útil para: • Navegadores de texto • Navegadores gráficos que, por diferentes circunstancias, no pueden mostrar las imágenes • Lectores de pantalla • Buscadores • Todas las imágenes deben disponer de un texto alternativo adecuado • Si no hay texto alternativo, el usuario perderá completamente la información contenida en la imagen u obtendrá información sin sentido

30. Imágenes y alternativas textuales Cómo escribir un texto alternativo • Debemos escribir aquellos textos alternativos que mejor funcionen como reemplazo de las imágenes • Que mejor transmitan la información o la funcionalidadde la imagen • Depende de cuál sea el uso que se le da a la imagen (decorativa, contenido, enlace) • Depende del contexto • Influye en la finalidad u objetivo de la imagen • En el contexto se puede complementar o proporcionar el equivalente textual • Truco: ¿que se diría en una conversación telefónica en la que se está leyendo y describiendo la página?

31. Imágenes y alternativas textuales • Ejemplo 1 “Tal y como se aprecia en el panel de consumo alimentario y teniendo en cuenta la edad de los consumidores, de manera global se observa que el consumo de fruta aumenta con la edad.” • “La ingesta de frutas representa el 15,5% de la dieta en el colectivo más joven, de 18 a 29 años, y aumentando hasta llegar al 23,3% en el grupo entre 45 y 65 años, siendo este grupo el que mayor consumo de fruta presenta” • “Gráfico de barras con la composición de la ingesta de frutas en la población de Euskadi”

32. Imágenes y alternativas textuales • Ejemplo 2 “Tal y como se aprecia en el panel de consumo alimentario y teniendo en cuenta la edad de los consumidores, de manera global se observa que el consumo de fruta aumenta con la edad.” • “La ingesta de frutas representa el 15,5% de la dieta en el colectivo más joven, de 18 a 29 años, y aumentando hasta llegar al 23,3% en el grupo entre 45 y 65 años, siendo este grupo el que mayor consumo de fruta presenta” • “Gráfico de barras con la composición de la ingesta de frutas en la población de Euskadi” Podemos apreciar como representando la ingesta de frutas el 15,5% de la dieta en el colectivo más joven, de 18 a 29 años, y aumentando hasta llegar al 23,3% en el grupo entre 45 y 65 años, siendo este grupo el que mayor consumo de fruta presenta. A partir de los 65 años, el consumo de fruta disminuye más de la mitad, llegando a ser únicamente el 10,7% de su dieta y siendo más del 40% de esta ingesta en forma de zumo. En cambio, el colectivo entre 45 y 65 años es el que menos zumo ingiere, siendo únicamente el 16,5% de la ingesta total de fruta, mientras que entre 30 y 44 años el zumo representa el 25,7% y entre 18 a 29 años el 29,4% de la ingesta total de fruta.

33. Imágenes y alternativas textuales • Ejemplo 3 “Otro tipo de gráficos estadísticos son las barras proporcionales. Se utilizan cuando lo que se busca es resaltar la representación de los porcentajes de datos que componen un total. Estas barras pueden ser horizontales o verticales.” • “La ingesta de frutas representa el 15,5% de la dieta en el colectivo más joven, de 18 a 29 años, y aumentando hasta llegar al 23,3% en el grupo entre 45 y 65 años, siendo este grupo el que mayor consumo de fruta presenta” • “Gráfico de barras con la composición de la ingesta de frutas en la población de Euskadi” En la imagen anterior podemos ver un ejemplo de gráfico de barras proporcionales.

34. Imágenes y alternativas textuales Imágenes decorativas • Imágenes con fines decorativos, que no aportan información • Son meramente un recurso estilístico • Debemos dejar el texto alternativo vacío

35. Imágenes y alternativas textuales Imágenes decorativas

36. Imágenes y alternativas textuales Imágenes decorativas

37. Imágenes y alternativas textuales Imágenes de contenido (representativas) • Aquellas imágenes que sí aportan información • Las imágenes pueden ser sencillas o complejas • Imágenes sencillas: se debe proporcionar el equivalente textual en el texto alternativo • Imágenes complejas: se debe proporcionar el equivalente textual en la descripción larga Si la herramienta no permite la creación de descripciones largas debemos entonces proporcionar dicha descripción en el contexto de la imagen, preferiblemente en el texto del documento que esté lo más cercano a la imagen

38. Imágenes y alternativas textuales Imágenes que proporcionan Información textual • En estos casos, la información proporcionada es el texto mostrado • Los detalles gráficos no son relevantes, salvo excepciones

39. Imágenes y alternativas textuales Imágenes de contenido • El texto alternativo parece fácil Manuel Larramendi (Andoain, Gipuzkoa, 25 de diciembre de 1690 – Azpeitia, Gipuzkoa, 29 de enero de 1766) Aita Manuel Larramendi bezala ezaguna, XVIII. mendeko euskal idazlea eta jesuita izan zen. Bere idazlanetan ikus daitekeenez, euskararen defendatzaile sutsua zen. Kultura handiko gizona zenez, jarraitzaile anitz izan zituen. Bere garaiko gizonik jakintsuenetako bat da eta baita ikasketetan oso saiatua ere. Bere garaiko idazle askoren gidari bezala ageri zaigu, euskarazko lan askoren zuzenketak egin eta atarikoak idatzi baitzituen.

40. Imágenes y alternativas textuales Imágenes de contenido • ¿Y ahora? Manuel Larramendi (Andoain, Gipuzkoa, 25 de diciembre de 1690 – Azpeitia, Gipuzkoa, 29 de enero de 1766) Aita Manuel Larramendi bezala ezaguna, XVIII. mendeko euskal idazlea eta jesuita izan zen. Bere idazlanetan ikus daitekeenez, euskararen defendatzaile sutsua zen. Kultura handiko gizona zenez, jarraitzaile anitz izan zituen. Bere garaiko gizonik jakintsuenetako bat da eta baita ikasketetan oso saiatua ere. Bere garaiko idazle askoren gidari bezala ageri zaigu, euskarazko lan askoren zuzenketak egin eta atarikoak idatzi baitzituen. Aita Manuel Larramendi

41. Imágenes y alternativas textuales Imágenes de contenido • Existen muchas imágenes para las que no está claro si son de contenido o decorativas • Están en lo que se llama la “zona gris” • Lo importante es saber diferenciar las imágenes que claramente son decorativas de aquellas que claramente son de contenido • Las imágenes de la zona gris admiten varias posibilidades

42. Imágenes y alternativas textuales Imágenes funcionales • Imágenes que funcionan como enlaces • Describir en el texto alternativo la función de la imagen • Ejemplo: Imagen de una impresora con un enlace para imprimir el documento • “Impresora” • “Imagen de impresora” • “Imprimir” • “Imagen de impresora, enlace para imprimir “

43. Imágenes y alternativas textuales Imágenes funcionales • Ejemplo: La misma imagen incluida dentro o al lado de un enlace que ya dispone de un texto • ¿Y ahora? • “Impresora” • “Imagen de impresora” • “Imprimir” • “Imagen de impresora, enlace para imprimir “

44. Imágenes y alternativas textuales Herramienta de edición

45. Imágenes y alternativas textuales Resumen • El equivalente textual indica cuál es el contenido o función de la imagen • Depende del uso(decorativa, de contenido, funcional) • Depende del contexto • Truco del teléfono • Diferentes tipos de imágenes: • Decorativas: deben tener un texto alternativo vacío • De contenido sencillas: deben tener un texto alternativo breveque las describa • De contenido complejas: deben tener una descripción larga • Funcionales: deben tener un texto alternativo que describa su función. En los enlaces, describir el destino del enlace.

46. Imágenes y alternativas textuales Ejercicio • ¿Es una imagen decorativa o de contenido? • En caso de ser necesario, ¿qué texto alternativo llevaría? • Vista Isométrica • Se trata de una vista aérea desde la que se señalan todas las entradas de las que dispone el Hospital. • La entrada principal está orientada al sur, la entrada a los vestuarios al norte, la entrada al tanatorio al este y las entradas al Hospital de Día y a Urgencias al oeste. • En la vista se divide el hospital en tres bloques: A, B y C. • Planta Sótano • Vista que ofrece una distribución de la planta sótano del Hospital. • En esta planta se encuentra la lencería y los vestuarios con acceso exterior desde el norte.

47. Manual de Edición de Contenidos Índice general • Imágenes y alternativas textuales • Edición de contenidos • Estructura • Lenguaje y comprensión • Presentación • Tablas • Otros formatos Edición de los contenidos

48. Edición de los contenidos Introducción • Se tratará sobre el contenido textualde los documentos Web • La lectura sobre un ordenador no es igual que en el medio impreso • Es más difícil • Los usuarios no suelen leer todo el contenido • Los usuarios tienden a escanear los documentos • Recomendaciones básicas en cuanto a • Proporcionar una estructuraal documento • Redacción de los contenidos • Presentación

49. Manual de Edición de Contenidos Índice general • Imágenes y alternativas textuales • Edición de contenidos • Estructura • Lenguaje y comprensión • Presentación • Tablas • Otros formatos Estructura

50. Edición de los contenidos Encabezados • Mecanismo básico para estructurar los documentos • En una publicación tradicional los encabezados se destacan visualmentedel resto del documento • Existen usuarios que no pueden percibir esta información visual • Es necesario indicar explícitamente qué es un encabezadoy cuál es su nivel • Existen seis nivelesdiferentes de encabezados • Si se identifican, los lectores de pantalla pueden reconocerlos e informar de los mismosy de su nivel a los usuarios