Accesibilidad y usabilidad: cómo diseñar materiales buenos y bonitos

Transcripción

1 Accesibilidad y usabilidad: cómo diseñar materiales buenos y bonitos Susana Valverde Ayala IES José Planes (Murcia) Resumen La accesibilidad web va de la mano de la usabilidad. Estos conceptos son útiles para el profesorado creador de contenidos digitales. Dadas las carencias de accesibilidad y usabilidad que se observan en el diseño de algunos materiales, presentaciones, blogs y páginas educativas, conviene hacer un repaso de la normativa vigente, principios y pautas de accesibilidad. Explicaremos algunas recomendaciones sencillas basadas en pautas y técnicas de diseño WCAG 2.0 que ayudarán a crear materiales más fáciles de usar para todos los usuarios, siendo a la vez, más accesibles. Veremos fallos frecuentes y buenas prácticas para solucionarlos. Objetivos Repasar la normativa vigente en España respecto a accesibilidad. Conocer la existencia de las pautas y técnicas de diseño WCAG. Entender la importancia de la accesibilidad en el diseño de páginas web y materiales educativos. Relacionar la accesibilidad con la usabilidad. Relacionar la accesibilidad con el diseño sencillo y minimalista. Reconocer fallos de accesibilidad. Diseñar páginas web u otros contenidos educativos para que sean accesibles y usables. Metodología Concepto de accesibilidad: dos enfoques Plantearemos el concepto de accesibilidad desde el punto de vista de la accesibilidad web. Aunque este trabajo trata no sólo la accesibilidad web sino la accesibilidad de cualquier otro objeto digital educativo como: presentaciones, documentos, libros digitales, aplicaciones informáticas, etc. Según el consorcio W3C (W3C): la accesibilidad web es el acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. Esta definición nos hace pensar en que todos los usuarios tenemos derecho a acceder a cualquier página web no importa dónde estemos ni qué dispositivo usemos. Seguro que han visitado páginas web desde su teléfono móvil que no tenían toda la información disponible, que pedían instalar el complemento de Flash Player, por lo que han debido entrar desde un ordenador para poder acceder a la información que buscaban. En este caso, se han encontrado

2 con un problema de accesibilidad. También han sufrido de un problema de accesibilidad cuando no han comprendido o no han sabido encontrar la información de una página web cuyo lenguaje ha sido difícil de entender. Por supuesto, han tenido problema de accesibilidad cuando la red de su centro de trabajo ha dejado de funcionar. En otro documento del consorcio W3C (Henry & EOWG, 2005), la define de la siguiente manera: Significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. Diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidades a consecuencia de la edad. La definición anterior, más concreta, afecta a las personas con algún tipo de discapacidad, aunque reconoce que la mejora de la accesibilidad web repercute positivamente en otras personas sin discapacidad. vista: Según (Osuna Acedo, 2007), la accesibilidad puede ser entendida desde dos puntos de 1. Accesibilidad de cualquier usuario a todos los contenidos y herramientas. 2. Accesibilidad de las personas con algún tipo de discapacidad a todos los contenidos y herramientas. Nos invita a pensar, además, qué tipo de accesibilidad es más grave que se incumpla. En este trabajo entenderemos la accesibilidad web de forma global, por lo que incluiremos a cualquier usuario, no sólo de personas con discapacidad. Planteamos la gravedad de los fallos de accesibilidad en un entorno educativo, donde se hace más importante que en otros ámbitos. Tenemos asimilada la accesibilidad física a espacios educativos, estamos concienciados con la eliminación de barreras arquitectónicas, pero, sin embargo, queda trabajo por hacer en la concienciación de la accesibilidad web o de cualquier otro contenido digital que se use en un entorno educativo. Relación accesibilidad con usabilidad Trabajamos con el concepto de usabilidad y la entenderemos como facilidad de uso, que los usuarios no requieran conocimientos específicos para la utilización de una aplicación informática. Cuando un usuario no puede acceder a un sitio web porque es difícil hacerlo, está teniendo un problema de usabilidad y un problema de accesibilidad. Nos encontramos con que la accesibilidad es un caso particular de usabilidad. También hay enfoques en los que se ve la usabilidad como un caso particular de accesibilidad. Este planteamiento radica en que la accesibilidad es universal, sin embargo, la usabilidad va dirigida al público objetivo de la página. Para entender la controversia de ambos términos remitimos a la bibliografía, en particular, (Jordisan, 2008) centra el debate en la pregunta accesible/usable para quién?. Para nosotros, ambos conceptos van de la mano, si mejoramos la accesibilidad, también debería mejorar la accesibilidad y viceversa. Ambos aspectos mejoran la efectividad, la eficiencia y la satisfacción de los usuarios.

3 Normativa de accesibilidad La accesibilidad Web es una condición establecida por las leyes españolas y europeas. Aparece en los pliegos de condiciones para contrataciones públicas. La normativa de referencia es la LEY 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información. Y la RESOLUCIÓN, de 3 de septiembre de 2012, de la Dirección General de Industria y de la Pequeña y Mediana Empresa, por la que se publica la relación de normas UNE aprobadas por AENOR durante el mes de julio de En esta resolución, se aprobó que la norma UNE 39803:2012 define los requisitos de accesibilidad para los contenidos web. Esta norma sustituye a la anterior norma :2004. Aspectos interesantes: A partir del 31 de diciembre de 2008, las páginas de Internet de las Administraciones Públicas satisfarán, como mínimo, el nivel medio de los criterios de accesibilidad al contenido generalmente reconocidos. Se refiere al nivel medio de la norma de 2004, ya anulada, ahora la exigencia es la norma de Las páginas de Internet de las Administraciones Públicas deberán ofrecer al usuario información sobre su nivel de accesibilidad y facilitar un sistema de contacto para que puedan transmitir las dificultades de acceso al contenido de las páginas de Internet o formular cualquier queja, consulta o sugerencia de mejora. Algunas empresas también están obligadas a satisfacer un nivel equivalente al AA del W3C. También hay normativas autonómicas. En Murcia, de reciente publicación: Ley 4/2017, de 27 de junio, de accesibilidad universal de la Región de Murcia. Para una recopilación más detallada de normativa relacionada, recomendamos consultar el sitio web (Portal Administración Electrónica), en su sección Normativa de Accesibilidad. Qué son las pautas WCAG2.0 En el apartado de legislación, mencionamos que la legislación española se rige por la norma 39803:2012 y la misma, en cuanto a sus requisitos, referencia completamente a las Pautas de Accesibilidad para el contenido web WCAG2.0. Por eso, necesitamos comprender qué son las pautas WCAG. El Consorcio World Wide Web (W3C) es un consorcio internacional donde las organizaciones miembro, personal a tiempo completo y el público en general, trabajan conjuntamente para desarrollar estándares Web. La misión del W3C es: 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. (W3C & Jacobs, ) El consorcio W3C desarrolla normas, estándares web y pautas, pero no vela porque se cumplan. Ofrece recomendaciones. La WAI (Web Accessibility Initiative) es una actividad desarrollada por el W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad, desarrollando pautas de

4 accesibilidad, mejorando las herramientas para la evaluación y reparación de accesibilidad Web, llevando a cabo una labor educativa y de concienciación en relación a la importancia del diseño accesible de páginas Web, y abriendo nuevos campos en accesibilidad a través de la investigación en este área. (W3C) Y ya llegamos a las pautas WCAG (Web Content Accessibility Guidelines), conocidas como pautas de accesibilidad al contenido de la web. Hubo una primera versión de 1999 (WCAG 1.0) y, desde 2008 está la versión 2.0 (WCAG 2.0) que incluye cuatro principios de diseño que sirven para organizar las pautas, criterios y guías de estilo. Las pautas WCAG dan respuesta a qué hay que hacer y cómo diseñar sitios web accesibles. Nosotros lo tomaremos como punto de partida para diseñar contenidos digitales accesibles, ya sea en la web u otros documentos. Las podemos encontrar en su versión original en inglés y también en su traducción al español por SIDAR. Pautas WCAG 2.0 (versión original). URL: Pautas WCAG 2.0 (traducción de SIDAR). URL: son: Ya hemos dicho que partimos de cuatro principios generales. Los cuatro principios Perceptible Operable Comprensible Robusto Estos a su vez, se desglosan en 12 pautas, que son objetivos básicos generales. A cada pauta se le aplican unos criterios de conformidad verificables con un nivel de conformidad. Existen tres niveles de conformidad: A, AA y AAA. Para cumplir con el nivel de conformidad AAA, también se debe cumplir el nivel AA y el AA. Para cumplir con el nivel de conformidad AA, también se debe cumplir el nivel A. Además, para aplicar cada pauta y criterio de conformidad, nos ofrecen técnicas suficientes y recomendables, así como fallos comunes. Para que podamos decir que una página web cumple con el nivel de conformidad AA de la WCAG2.0 debemos asegurarnos que los criterios de conformidad de las 12 pautas se cumplen en nivel AA. Aportaciones El objetivo de este apartado es proporcionar unas recomendaciones sencillas para mejorar la accesibilidad de los contenidos elaborados por docentes, no pretendemos que se cumplan estrictamente todos los criterios de conformidad, ya que sería muy complejo. Comprender y aplicar cada pauta exhaustivamente requiere tiempo y conocimientos avanzados. Hemos partido de las pautas de accesibilidad y los criterios de conformidad para el nivel AA, haciendo una selección de aquellas recomendaciones que estén al alcance de cualquiera que use aplicaciones ofimáticas, blogs, PDF, web, presentaciones, pizarra digital,

5 procesador de textos, Moodle, libros digitales, juegos interactivos... para crear contenidos educativos. Cumplir con estas recomendaciones no significa que el resultado sea accesible. Alternativa de texto Cuando introduzca un contenido no textual (recursos de imagen, esquema, vídeo, audio, animación, etc.) añada una descripción en texto de su contenido. Use el atributo alt del objeto si se lo ofrece la aplicación, o bien cree un fichero externo de texto que será enlazado desde el contenido principal. También se puede hacer en Word, PowerPoint... y para cualquier objeto (imagen, sonido, vídeo, tablas, gráficos) insertado. El objetivo es que se pueda comprender el contenido sólo leyendo la descripción. Si se trata de un vídeo o sonido, podemos resumir qué contiene. Ejemplo de cómo nos ayuda a todos: Si la conexión a Internet es lenta, podremos leer la descripción de una imagen o vídeo antes de que se cargue. Transcripciones y subtítulos Añada una transcripción para los vídeos y audios. Ejemplo de cómo nos ayuda a todos: Tener la transcripción de un vídeo nos sirve para poder traducirlo a otro idioma fácilmente, para copiar y pegar parte del texto o realizar búsquedas. Añada subtítulos a los vídeos. Ejemplo de cómo nos ayuda a todos: Podremos comprender el vídeo si se nos rompe el altavoz del dispositivo o estamos en un sitio con ruido o donde no queramos que se sepa lo que vemos. Añada una audiodescripción a los vídeos. La audiodescripción sirve para narrar lo que ocurre en el vídeo, pero no forma parte de la pista de audio del vídeo. Por ejemplo, en una película: el protagonista abre la puerta. Ejemplo de cómo nos ayuda a todos: Podremos comprender el vídeo sin necesidad de leer, podremos hacer otra cosa a la vez, nos ayuda a que no se nos escapen detalles del vídeo. Separar el estilo del contenido Use los estilos del editor de texto para dar formato a los títulos o encabezados. No simule elementos. Use la herramienta adecuada del procesador de textos. Ejemplos mal realizados: viñetas usando puntos, interlineados o saltos de página pulsando la tecla intro, tabulaciones pulsando la barra espaciadora, listas numeradas a mano. Use las numeraciones y esquemas automáticos. Use herramientas que ayuden a separar contenido del diseño: temas, paletas de colores, plantillas, énfasis, etc.

6 Ejemplo de cómo nos ayuda a todos: optimizamos el tiempo, ya que sólo nos preocupamos del contenido. Después nos ocuparemos del diseño y el aspecto visual usando las herramientas más adecuadas para ello. Cuando hay que modificar un estilo es más rápido hacerlo si se ha separado correctamente del contenido. Un esquema numerado permite realizar una tabla de contenidos (índice) de manera automática. El uso correcto de estilos en el procesador de textos generará un PDF más accesible. Ilustración 1. Estilo para encabezados en Word Instrucciones que no dependan exclusivamente de la información visual Cuando dé instrucciones o información al usuario, hágalo de manera que no sólo dependa de la información visual. Por ejemplo: evite decir pulse en el botón redondo o pulse en el botón de la derecha. Puede decir: pulse en el botón redondo etiquetado como Aceptar. Controles de audio No incluya audios sin controles. Si incluye un audio póngale los controles necesarios para poder pararlo o controlar el volumen. Ejemplo de cómo nos ayuda a todos: a veces entramos a una página y se activa el sonido cuando no lo deseamos y no tenemos manera de pararlo, resulta molesto. Cuidar el uso del color Si usa el color para transmitir información, asegúrese de añadir la misma información de otra manera. Por ejemplo, si usa un gráfico de tarta con diferentes colores, la leyenda deberá estar rotulada de la misma manera que cada porción de tarta. Ejemplo de cómo nos ayuda a todos: si imprimo el documento en blanco y negro o con poca tinta podré comprender el gráfico, tabla, etc.

7 Alto contraste entre fondo y texto Cuide el contraste entre el color de fondo y el texto. A veces se sitúan textos negros sobre fotos oscuras y no resulta legible. Para comprobar que el contraste es adecuado, puede usar plugins, aplicaciones o servicios web, algunos de ellos: Algunas herramientas Color Contrast Analyzer : extensión para Chrome que analiza el contraste Material Palette : ofrece paletas de colores a partir de uno o varios colores de base, sugiere color del texto y fondo. ColorSafe: ofrece color de texto recomendable según nivel de conformidad WCAG. Contrastchecker: te dice la relación de contraste que hay entre texto y fondo : comprueba el cumplimiento de pauta de contraste para texto sobre imágenes Ejemplos: La relación de contraste debe superior a 4,5:1. Para que se haga una idea, rojo sobre blanco tiene un contraste de 4, por lo que debería evitarse. Negro sobre blanco tiene el máximo contraste y es de 21:1 Ejemplo de cómo nos ayuda a todos: cuando tiene el teléfono móvil con brillo mínimo y reflejos de sol en la pantalla se verán mejor los contenidos si el contraste es alto. Igualmente, al proyectar una presentación con un proyector de pocos lúmenes. Evite destellos Use los gifs animados con moderación, sólo cuando aporten valor educativo, no por decoración. Estos elementos distraen la atención de lo importante y, además, según qué animaciones pueden provocar ataques epilépticos a personas propensas. Títulos, encabezados, etiquetas y rótulos descriptivos Ponga siempre un título descriptivo a cada página web, ficheros o contenido. Ejemplo de cómo nos ayuda a todos: cuando navegamos entre varias pestañas del navegador sólo vemos la primera parte del título de la página, cuanto más descriptivo sea, podremos saber qué contiene cada pestaña antes de hacer clic en ella.

8 Ilustración 2. Pestañas del navegador con diferentes títulos Enlaces o hipervínculos Cuando añada un enlace o botón, el usuario debe saber qué ocurrirá cuando se haga clic en él, el texto del enlace debe ser descriptivo. Especifique formato y tamaño, idioma, etc. No use el mismo texto de enlace para enlazar con contenidos diferentes. Por ejemplo: en la misma página varios vínculos rotulados como Leer más que llevan a sitios diferentes. Sería mejor Leer más sobre matemáticas, Leer más sobre lengua. Añada una tabla de contenidos, índice, páginas relacionadas, mapa del sitio Ilustración 3. Enlace que especifica tamaño y formato del contenido Idioma Si la aplicación incorpora un campo para especificar el idioma de la página o de una frase, úselo. Legibilidad del texto Evite la alineación justificada del texto. Preferible la alineación a la izquierda, aporta mayor legibilidad. Use un interlineado de 1,5. Evite escribir frases largas en mayúsculas.

9 Ilustración 4. Texto justificado con interlineado simple Ilustración 5. Texto alineado a la izquierda con interlineado 1,5 Menos es más Siga los principios de diseño minimalista. Si intenta que en una página todo sea importante, al final nada será importante. Conclusiones El esfuerzo que hagamos en crear páginas accesibles repercutirá en que sean más usables, por lo que es algo que repercute en beneficios a todos los usuarios, resultando páginas más sencillas, bonitas, fáciles de usar y fáciles de posicionar con SEO. Las pautas WAI tienen un impacto positivo en la usabilidad para todos los usuarios con o sin discapacidad. Referencias bibliográficas Carreras, O. (n.d.). Usable y accesible. Retrieved from Henry, S., & EOWG, p. d. (2005). Introducción a la Accesibilidad Web. Retrieved from

10 Jordisan. (2008). Usabilidad vs. accesibilidad: un debate vacío. Retrieved from Luján Mora, S. (2009). Accesibilidad vs usabilidad?. Retrieved from Luján Mora, S. ( ). Accesibilidad web: Legislación española. Retrieved from Osuna Acedo, S. (2007). Configuración y Gestión de Plataformas Digitales. Madrid: Universidad Nacional de Educación a Distancia. Portal Administración Electrónica. (n.d.). PAe - Normativa. Retrieved from ormativa.html#.wg4f3ddrwdu Portal de Administración Electrónica. (n.d.). PAe - Accesibilidad. Retrieved from Quevedo, J. R. (2009). Guías Prácticas para Profesionales Web: Puntos de verificación de las Pautas de Accesibilidad al Contenido Web (WCAG) 2.0. Retrieved from Romero Zúnica, R. (2001). Usabilidad y accesibilidad, dos enfoques complementarios. Retrieved from W3C. (n.d.). Guía breve de accesibilidad web. Retrieved from W3C, & Jacobs, I. ( ). Sobre el World Wide Web Consortium. Retrieved from W3C. Web Accessibility Initiative (WAI). (11 de 12 de 2008). Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation 11 December Obtenido de Cómo citar este trabajo: Valverde, S. (2017). Accesibilidad y usabilidad: cómo diseñar materiales buenos y bonitos. En Arnaiz, P.; Gracia, Mª D. y Soto F.J. (Coords.) Tecnología accesible e inclusiva: logros, resistencias y desafíos. Murcia: Consejería de Educación, Juventud y Deportes. Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial- CompartirIgual 4.0 Internacional.

11