Comunicación gráfica accesible
1. La comunicación gráfica y los principios del diseño para todos
La comunicación gráfica y los principios del diseño para todos “LEÉME AQUEL LETRERO, QUE NO LLEVO GAFAS” “ESPERA, QUE VOY CARGADO CON EL NIÑO” “ME HE ROTO LA PIERNA Y NO PUEDO SUBIR” “NO LO ENTIENDO, ESTÁ ESCRITO EN OTRA LENGUA” “¿CÓMO DEMONIOS SE ABRE ESTE PAQUETE? ”
La comunicación gráfica y los principios del diseño para todos ¿Y qué puedo hacer yo como diseñador? Muy sencillo. Introducir en el momento del proceso de diseño la reflexión básica de si las personas con más restricciones y los extremos de la diversidad que forman la sociedad, ya sean morfológicos o culturales, los podrán utilizar
La comunicación gráfica y los principios del diseño para todos ¿Qué es Diseño para Todos? Es un paradigma del diseño relativamente nuevo, que dirige su acción hacia el desarrollo de productos, servicios y entornos de fácil acceso para el mayor número de personas posible, sin la necesidad de adaptarlos o rediseñarlos de una forma especial en función de las limitaciones o necesidades temporales o permanentes de tales personas.
La comunicación gráfica y los principios del diseño para todos ¿Cuál es su objetivo? El objetivo prioritario del Diseño para Todos es el de simplificar la vida de cualquier persona, independientemente de su edad y/o capacidad, ofreciéndole los productos, servicios, medios de comunicación y entornos construidos susceptibles de ser directamente utilizado con el menor o nulo coste posible.
La comunicación gráfica y los principios del diseño para todos ¿Qué es Diseño para Todos? DISEÑO > DISEÑO > PARA TODOS ADAPTACIÓN DE LA PERSONA AL MEDIO > SOCIEDAD ADAPTACIÓN DEL > SOCIEDAD MEDIO A LA PERSONA DIVERSA
La comunicación gráfica y los principios del diseño para todos Beneficios del Diseño para Todos ENRIQUECIMIENTO PROCESO CREATIVO AMPLIACIÓN MERCADOS MEJORA DEL PRODUCTO FINAL MEJORA EN LA CALIDAD DE VIDA DE LOS USUARIOS
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 1 er Principio: Uso equitativo • Que proporcione las mismas formas de uso para todos los usuarios: idénticas cuando sea posible, equivalentes cuando no lo sea. • Que evite segregar o estigmatizar a cualquier usuario. • Que las características de privacidad, garantía y seguridad estén disponibles para todos los usuarios. • Que el diseño sea atractivo para todos los usuarios.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 1 er Principio: Uso equitativo Ejemplo: Tirador tipo asa en forma de "D" para una cajonera. Facilita el agarre del tirador y disminuye el esfuerzo a ejercer para abrir la puerta. Permite abrir la puerta o el cajón a personas con diversas capacidades.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 2º Principio: Uso flexible. • Que ofrezca posibilidades de elección en los métodos de uso. • Que pueda accederse y usarse tanto con la mano derecha como con la izquierda. • Que facilite al usuario la exactitud y precisión. • Que se adapte al paso o ritmo del usuario.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 2º Principio: Uso flexible. Ejemplo: Asiento regulable en profundidad para un sofá. Para poder regularlo a la profundidad que permita apoyar toda la espalda en el respaldo del sofá y los pies en el suelo.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 3 er Principio: Simple e Intuitivo. • Que elimine la complejidad innecesaria. • Que sea consistente con las expectativas e intuición del usuario. • Que se acomode a un amplio rango de alfabetización y habilidades lingüísticas. • Que dispense la información de manera consistente con su importancia. • Que proporcione avisos eficaces y métodos de respuesta durante y tras la finalización de la tarea.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 3 er Principio: Simple e Intuitivo. Ejemplo: Máxima compartimentación en estantes de diferentes tamaños para el armario de un dormitorio. Permite guardar objetos de diferentes tamaños. Permite diferenciar los estantes a personas con deficiencia visual, facilitando la búsqueda de objetos.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 4º Principio: Información perceptible. • Que use diferentes modos (gráfica, verbal, táctil) para una presentación redundante de la información esencial. • Provea un adecuado contraste entre la información esencial y la adicional. • Diferencie los elementos de forma que puedan ser descritos (es decir, haga fácil dar instrucciones o direcciones). • Provea compatibilidad con la variedad de técnicas o dispositivos usados por las personas con limitaciones sensoriales.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 4º Principio: Información perceptible. Ejemplo: Tirador cuyo colorido destaque del color de la superficie donde esté colocado. Facilita la visualización del tirador.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 5º Principio: Tolerancia al Error. • Que disponga los elementos para minimizar los riesgos y errores: elementos más usados, más accesibles; elementos peligrosos, eliminados, aislados o tapados. • Que proporcione advertencias sobre peligros y errores. • Que proporcione características seguras de interrupción. • Que desaliente acciones inconscientes en tareas que requieren vigilancia.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 5º Principio: Tolerancia al Error. Ejemplo: Cajones con guías y tope de apertura. Facilita la apertura del cajón y evitar la caída del mismo.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 6º Principio: Que exija poco esfuerzo físico. • Que permita que el usuario mantenga una posición corporal neutra. • Que utilice de manera razonable las fuerzas necesarias para operar. • Que minimice las acciones repetitivas. • Que minimice el esfuerzo físico continuado.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 6º Principio: Que exija poco esfuerzo físico. Ejemplo: Puertas correderas de tipo plegable o de persiana. Las puertas correderas requieren de menos esfuerzo para abrirlas. Estas puertas, por su menor exigencia espacial, evitan los posibles golpes que pueden causar las puertas batientes cuando están abiertas. También evitan el peligro de pillarse los dedos al cerrarlas.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 7º Principio: Tamaño y espacio para el acceso y uso. • Que proporcione una línea de visión clara hacia los elementos importantes tanto para un usuario sentado como de pie. • Que el alcance de cualquier componente sea confortable para cualquier usuario sentado o de pie. • Que se acomode a variaciones de tamaño de la mano o del agarre. • Que proporcione el espacio necesario para el uso de ayudas técnicas o de asistencia personal.
La comunicación gráfica y los principios del diseño para todos 7 principios del Diseño para Todos 7º Principio: Tamaño y espacio para el acceso y uso. Ejemplo: Cajón más alto en la parte inferior de la cajonera. Para facilitar el acceso al tirador, que, además, no estará centrado en altura respecto al cajón, sino más elevado. Los objetos más grandes que almacenará este cajón pueden asirse de la parte superior, sin necesidad de acceder al fondo del cajón.
2. Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica no interactiva • El mensaje no se relaciona con otro previo. • Es unidireccional, no recibe un feedback explícito e inmediato, aunque siempre busca una determinada reacción en el receptor. • Tipos: el diseño gráfico publicitario, el diseño editorial, el diseño de identidad corporativa, el diseño de envase, el diseño tipográfico, la cartelería y la señalética, entre otros.
La comunicación gráfica y los principios del diseño para todos Comunicación gráfica interactiva • “Una expresión que en una serie de intercambios comunicacionales implica que el último mensaje se relaciona con mensajes anteriores a su vez relativos a otros previos". • Plataformas: Web, los teléfonos inteligentes (como el i. Phone), las tabletas (como el i. Pad), etc. • La interactividad supone un esfuerzo de diseño para planificar una navegación entre pantallas en las que el usuario sienta que realmente controla y maneja una aplicación.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación Interactiva Comunicación No Interactiva Tipo piezas Juegos Web Reproductores Dispositivos móviles (APP) Libros Folletos Señalética Imagen corporativa Aplicabilidad accesibilidad WAI-WCAG Normas UNE Principios de interacción Usabilidad Contrastes Composición Tipografías Técnicas y profesionales Diseño Gráfico Maquetación Desarrollo – Código Diseño Gráfico Maquetación editorial Aplican siempre los 7 principios del diseño para todos
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 1. Portales de información • Se dirigen a una audiencia activa, no a consumidores pasivos. • Presenta una información jerarquizada: el usuario busca información, y decide hasta qué nivel quiere profundizar en ella. • Deben destacar y diferenciar titulares, entradillas y cuerpos de noticias.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 2. Portales corporativos • El diseño de la interfaz debe estar directamente relacionado con su estrategia de negocio. • Todas las iniciativas de diseño, edición y ampliación de la web deben mantener coherencia. • Utilizar un diseño diferenciador. • Utilizar sistemas de recolección de datos para saber cuánto tiempo pasan los usuarios en cada apartado.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 3. Comercio electrónico • Deben transmitir seguridad y fiabilidad. • La navegación debe ser sencilla e intuitiva. • Todos los términos de la transacción deben exponerse de manera clara al usuario. Por ejemplo, si existen costes de transporte, se comunicarán antes de que el usuario confirme la compra.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 3. Elementos Comercio electrónico • Sistema de búsqueda optimizada. • Catálogo, donde se muestran los productos, ordenados por categorías. • Cesta de la compra, donde se almacenan los productos seleccionados para la compra, y se desarrollan las transacciones. • Preguntas frecuentes y política de privacidad.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 4. E-learning • Los usuarios quieren ver, oír y hacer al mismo tiempo, en bloques de 5 a 15 minutos. • Esperan información sobre su progreso y sus resultados (feeback). • Los contenidos deben diseñarse previendo múltiples rutas: búsquedas, enlaces, … • Acceso a la ayuda disponible en todas las fases.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 4. E-learning • Tiempos de espera mínimos. • Menús de no más de 7 elementos y nunca ocultos. • Las opciones no deben cambiar de aspecto o de posición en pantalla. • Las opciones relacionadas deben aparecer agrupadas.
Comunicación Gráfica interactiva VS Comunicación Gráfica no interactiva Comunicación gráfica interactiva Principales ámbitos de producción de aplicaciones Interactivas: 5. Intranet • Navegabilidad eficiente que determine una mayor productividad. • Herramientas de edición fáciles de utilizar para mantenerla actualizada • Jerarquía de directorios que estructure todo el contenido. • Buscador • Las noticias de actualidad de la empresa y de sus empleados.
3. Piezas gráficas accesibles
Piezas gráficas accesibles Criterios DALCO ¿Qué son? Las posibilidades son tantas que la norma UNE 170001 de Accesibilidad universal considera las acciones de Deambulación, Aprehensión, Localización y Comunicación (DALCO) para explicar, simplificándolas, las capacidades que las personas ponen en juego cuando utilizan un espacio. El acceso, uso y disfrute de un entorno conlleva la realización de actividades que requieren la combinación de esas acciones.
Piezas gráficas accesibles Criterios DALCO Deambulación “Acción de desplazarse de un sitio a otro”. Lograr la accesibilidad para deambular es hacer que cualquier persona pueda ir de un lugar a otro del modo que desee a la par que realizando cualquier actividad. Para que un espacio sea accesible a la deambulación deberá tener adecuados pavimentos, dejar libres y sin obstáculos las zonas de circulación, tener puertas fáciles de abrir y que dejen hueco de paso suficiente, contar con alternativa para escalones y escaleras –rampas o ascensores que cumplan los criterios de accesibilidad- y tener una correcta iluminación.
Piezas gráficas accesibles Criterios DALCO Aprehensión "Acción que abarca alcanzar, accionar, agarrar, pulsar… y a veces trasladar cualquier objeto con las manos o con otras partes del cuerpo o elementos auxiliares. " Lograr la accesibilidad en la aprehensión es conseguir que las acciones que se realizan manipulando objetos de todo tipo resulten fáciles en cualquier situación y condición. Cada objeto debe ser diseñado teniendo en cuenta los denominados criterios del diseño para todos. Además es muy importante considerar dónde y cómo se ubican los objetos y si la distancia de aproximación y alcance permitirá su uso a todas las personas –bajas, altas, usuarias de silla de ruedas, con bastones…-.
Piezas gráficas accesibles Criterios DALCO Localización "Acción de averiguar el lugar o momento preciso en el que está algo, alguien o puede acontecer un suceso. ” Esta acción se realiza a través de la orientación o comprensión del espacio incluyendo la planificación de la ruta a seguir y de la identificación de los lugares y objetos a los que se desea llegar o se quiere utilizar. Hacer accesible la localización requiere un adecuado diseño de diferentes elementos tales como señales, elementos publicitarios, elementos arquitectónicos de diversas formas y volúmenes, diferenciación de materiales, texturas y colores de paramentos, mobiliario y equipamiento, iluminación, etc.
Piezas gráficas accesibles Criterios DALCO Comunicación "Acción de intercambio de la información necesaria para el desarrollo de una actividad. ” La comunicación que llega a través de los sentidos y la conexión entre emisor y receptor por características personales (edad, discapacidad, despiste, …) o por las condiciones del espacio (climatológicas, ruido, emergencias…) puede fallar. La comunicación no interactiva utiliza diversos elementos -señales, folletos, planos, catálogos, avisos, paneles, etc. - que para ser accesible deben diseñarse de manera que sean percibidos a la vez por varios sentidos; deberán emitir visual, auditiva y táctilmente –señales acústicas y luminosas, planos táctiles, …
Piezas gráficas accesibles Criterios DALCO
Piezas gráficas accesibles Normas UNE “Conjunto de normas tecnológicas creadas por los comités técnicos de normalización (CTN), fabricantes, consumidores y usuarios, administración, laboratorios y centros de investigación” Desde el año 2007 AENOR ha desarrollado las normas de accesibilidad TIC mediante comités integrados por expertos: • CTN 139: Tecnologías de la Información y las Comunicaciones para la salud • CTN 153: Ayudas Técnicas para Personas con Discapacidad • CTN 133: Telecomunicaciones • CTN 170: Necesidades y Adecuaciones para Personas con Discapacidad
Piezas gráficas accesibles Normas UNE Desarrollado un amplio catálogo de normas: • • UNE 139803 accesibilidad para contenidos en la Web UNE 139801 accesibilidad al ordenador. Hardware UNE 139802 accesibilidad del software UNE 139804 uso de la Lengua de Signos Española en redes informáticas • UNE 153010 Subtitulado para personas sordas o con discapacidad auditiva • UNE 153020 Audiodescripción para personas con discapacidad visual • UNE 153030: 2008 IN Accesibilidad en televisión digital
Piezas gráficas accesibles Tipografías Familias tipográficas: Una familia tipográfica es un grupo de signos escriturales que comparten rasgos de diseño comunes, Romanas Las fuentes Romanas son regulares, tienen una gran armonía de proporciones, presentan un fuerte contraste entre elementos rectos y curvos y sus remates les proporcionan un alto grado de legibilidad. • • • Garamond Times New Roman Palatino
Piezas gráficas accesibles Tipografías Familias tipográficas: Palo Seco Se caracterizan por reducir los caracteres a su esquema esencial. Las mayúsculas se vuelven a las formas fenicias y griegas y las minúsculas están conformadas a base de líneas rectas y círculos unidos, reflejando la época en la que nacen, la industrialización y el funcionalismo. • • • Arial Futura Helvética
Piezas gráficas accesibles Tipografías Familias tipográficas: Rotuladas Las fuentes rotuladas advierten más o menos claramente el instrumento y la mano que los creó, y la tradición caligráfica o cursiva en la que se inspiró el creador. • • Brush Mistral
Piezas gráficas accesibles Tipografías Familias tipográficas: Decorativas Estas fuentes no fueron concebidas como tipos de texto, sino para un uso esporádico y aislado. • • • Grutch Shaded Bombere Block-Up
Piezas gráficas accesibles Tipografías Variantes: Las variables constituyen alfabetos alternativos dentro de la misma familia, manteniendo un criterio de diseño que las “emparenta” entre sí. Estas fuentes no fueron concebidas como tipos de texto, sino para un uso esporádico y aislado.
Piezas gráficas accesibles Tipografías Variantes: • Cuerpo o tamaño: mayúsculas, minúsculas y capitales. • Grosor del trazado: ultrafina, book, redonda, media, seminegra, negra y ultranegra. • Inclinación de los ejes: redonda, cursiva e inclinada. • Proporción de los ejes: condensada, comprimida, estrecha, redonda, ancha, ensanchada y expandida. • Otras variantes de una fuente incluyen versalitas, números, símbolos de puntuación, monetarios, matemáticos, etc.
Piezas gráficas accesibles Tipografías Composición: 1. Espaciado Se refiere al espacio entre letras. • Fijo: el espacio entre cada una de las letras, no importa si es "i" o "m", es constante. • Proporcional: el espaciado varia según la letra. Cada letra ocupa justamente el espacio que necesita para poder distinguirse y para favorecer la legibilidad.
Piezas gráficas accesibles Tipografías Composición: 1. Espaciado Se refiere al espacio entre letras. • Tracking: • Kerning:
Piezas gráficas accesibles Tipografías Composición: 2. Longitud de línea La longitud de línea aconsejable depende del tipo de letra, del interlineado (distancia entre líneas) y del tamaño y resolución del soporte (offline/online). • Líneas largas: a más longitud, más dificultad de lectura. • Líneas estrechas: fragmentan el texto e interrumpen el ritmo de lectura.
Piezas gráficas accesibles Tipografías Composición: 3. Interlineado El interlineado se refiere a la distancia entre líneas de texto, y se mide en puntos. • Interlineado estrecho: el proceso de lectura se ve dificultado por la apreciación de bloques oscuro. • Interlineado ancho: puede provocar problemas para saltar de una línea a la siguiente.
Piezas gráficas accesibles Tipografías Composición: 4. Alineación: La alineación es uno de los factores que contribuyen a dotar al texto de un carácter determinado. Izquierda Derecha Centrado Justificado
Piezas gráficas accesibles La accesibilidad en la tipografía Característica fundamental: la legibilidad Por legibilidad se entiende el grado de facilidad con el que un texto puede ser leído sin que exista ambigüedad formal. Factores fundamentales en la composición del texto: 1. El contenido del texto que se publica (qué se lee). 2. El tipo de público al que va dirigido (infantil, adulto, público en general, comunidad científica, etc. ). 3. Cuál es el soporte (papel, pantalla, etc. ). 4. Cuál es la finalidad del mensaje (publicidad, divulgación científica, literatura, arte, etc. ).
Piezas gráficas accesibles La accesibilidad en la tipografía Algunas recomendaciones: • Se recomienda usar tipografías sin sérif para la lectura en pantalla, puesto que se adapta a la retícula de píxeles. • Para piezas impresas la letra con serif es la más legible, pues distingue unas letras de otras. • La letra regular acostumbra a resultar más legible que cualquiera de sus variantes (cursiva, negrita, versal). • Las palabras deben estar próximas unas a otras. • El interlineado debe ser superior al espacio entre palabras. Para la lectura en pantalla, se recomienda que el interlineado esté entre 130 y 150%.
Piezas gráficas accesibles La accesibilidad en la tipografía Algunas recomendaciones: • En soporte papel una línea debería tener 55/60 caracteres o 9/10 palabras. • En el caso de la pantalla, es aconsejable intentar que no se superen los 40/60 caracteres por línea. • Las letras minúsculas son más legibles que las mayúsculas. El intercalado de mayúsculas dentro de una frase interrumpe notablemente el ritmo de lectura. • El tamaño de letra de pantalla no debería ser inferior a los 10 puntos. La letra más legible es Arial a 12 puntos, seguida por la Times New Roman 12 puntos.
Piezas gráficas accesibles La accesibilidad en la tipografía Algunas recomendaciones: • Aplicar estilos tipográficos consistencia: por ejemplo, cursivas para citas textuales, negritas para resaltar, … • No abusar del uso de tipografía heterogénea, ya que impide la observación de un patrón consistente, y dificulta que el lector pueda interpretar la función asignada a cada bloque de texto. • Usar listas.
Piezas gráficas accesibles Ejemplo de tipografía accesible para disléxicos
Piezas gráficas accesibles Color La capacidad del ser humano para reconocer y diferenciar fácilmente los colores está limitada a seis: Los tres primarios: Rojo Azul Amarillo Los tres secundarios: Verde Violeta Naranja
Piezas gráficas accesibles Contrastes de color El contraste se produce cuando en una composición los colores no tienen nada en común o no guardan ninguna similitud. Tipos: • Contraste cromático: modifica los colores en el sentido de la complementariedad • Asimilación: cuando los matices son similares, los colores se aproximan en lugar de acentuar su contraste.
Piezas gráficas accesibles Color y accesibilidad Característica fundamental: contraste adecuado entre fondo y texto. La World Wide Web Consortium (W 3 C) tiene fijadas las pautas de accesibilidad web para que aquellos que sufren discapacidades visuales, motrices, cognitivas o auditivas puedan navegar con más facilidad por Internet.
Piezas gráficas accesibles Color y accesibilidad Pautas referentes al color: 2. 1 (WCAG 1. 0) Asegúrese de que toda la información transmitida a través de los colores también esté disponible sin color, por ejemplo mediante el contexto o por marcadores. 2. 2 (WCAG 1. 0) Las combinaciones de color de fondo y de primer plano deben ofrecer suficiente contraste para ser visualizadas por personas con discapacidad visual, o tener el suficiente contraste para pantallas en blanco y negro.
Piezas gráficas accesibles Color y accesibilidad Ejemplo: Problema: Indicamos y planteamos una funcionalidad basada en el color. Solución: Utilizar asteriscos como marcadores.
Piezas gráficas accesibles Color y accesibilidad Directrices referentes al contraste/luminosidad: 1. 4 (WCAG 2. 0) Se requiere que haya suficiente contraste de luminancia entre el texto y color de fondo. 1. 4. 3 (WCAG 2. 0) Contraste (mínimo): La presentación visual del texto y las imágenes de texto tiene un ratio de contraste de al menos 4. 5: 1 (excepto Nivel AA) 1. 4. 6 (WCAG 2. 0) Contraste (Mejorado): La presentación visual del texto y las imágenes de texto tiene un ratio de contraste de al menos 7: 1, excepto en lo siguiente: (Nivel AAA)
Piezas gráficas accesibles Color y accesibilidad Ejemplo: Contraste insuficiente Contraste suficiente
Piezas gráficas accesibles Color y accesibilidad Combinaciones de colores más accesibles: • • • Negro sobre blanco. Negro sobre amarillo. Rojo sobre blanco. Verde sobre blanco. Blanco sobre rojo. Amarillo sobre negro. Blanco sobre azul. Blanco sobre verde. . Blanco sobre negro.
Piezas gráficas accesibles Color y accesibilidad Paletas adaptadas:
Piezas gráficas accesibles Color y accesibilidad Algunas recomendaciones: • Los vínculos no deben depender exclusivamente de un color, es recomendable marcarlos con subrayado, cursiva, … • Los campos de formularios deben mostrar los errores sin basarse en el color. • En los gráficos estadísticos es necesario mostrar una leyenda que identifique cada barra con un icono descriptivo. • Usar iconos que describan la acción o el estado.
Piezas gráficas accesibles
Piezas gráficas accesibles Composición y flujos visuales El flujo visual es el camino que recorren los ojos a través de una pantalla. El orden convencional en Occidente es de arriba hacia abajo y de izquierda a derecha. Si el diseño está bien realizado este movimiento es natural y fluido, el ojo va de un objeto al siguiente sin darse cuenta. El diseñador tiene que presentar los elementos o la información según se desee que los vea o lea el usuario. Y debe dirigir la mirada hacia el objetivo buscado, hacia la llamada a la acción que se desea realice el usuario.
Piezas gráficas accesibles Composición incorrecta: El usuario, una vez seleccionadas las fotografías que desea imprimir, ha de buscar el próximo paso, no se le ofrece claramente la acción siguiente. Composición correcta: El usuario no tiene que buscar la acción, está justo después de los elementos que ha seleccionado, en parte inferior derecha.
4. Accesibilidad en documentos
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 1: IDIOMA • Indicar el idioma del documento. • Si en partes del texto, el idioma cambia respecto al del documento, también hay que indicarlo. • Esta pauta es fundamental para que los productos de apoyo como un lector de pantalla puedan dar acceso a los contenidos en el idioma correctamente a los usuarios.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 2: TIPOGRAFÍAS • Es conveniente utilizar tamaños de fuente entre 12 y 18 puntos sobre todo cuando el documento se va a imprimir. • Utilizar las fuentes de tipo normal, evitar el uso de cursiva. Si se utilizan negritas para enfatizar el texto, usar con moderación. • Use tipo de fuentes estándar, con caracteres claros en las que sea fácil distinguir mayúsculas de minúsculas. Son recomendables las de la familia Sans Serif (por ejemplo, Arial, Verdana, etc. ) entre otras.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 3: IMÁGENES • Deben ir posicionadas en línea con el texto, de forma que se asegure que mantienen la referencia con el texto donde han sido colocadas. Para hacerlo, hay que seleccionar el objeto imagen, ir a la pestaña Diseño de página > Posición > En línea con el texto.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 3: IMÁGENES • Deben contener su correspondiente texto alternativo. • Para añadir un texto alternativo a una imagen, hay que seleccionarla y hacer click con el botón derecho del ratón. Una vez dentro del menú contextual, seleccionar la opción de Formato de imagen > Texto alternativo seleccionar esta última e incluir el texto alternativo en la caja de texto con el nombre “Descripción”.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 3: IMÁGENES • Cuando el texto alternativo es una descripción larga (p. e. en gráficos o esquemas) se recomienda lo siguiente: 1. Incluir la descripción larga en el texto normal referenciando la imagen. 2. Insertar un hipervínculo junto a la imagen que enlace con la descripción larga situada en otra parte del documento (p. e. un anexo). Incluir un hipervínculo que lleve de vuelta a la imagen. 3. Ofrecer un documento universal como un “. txt” que incluya todas las descripciones largas de las imágenes.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 4: COLORES • Elegir correctamente la combinación de colores de todos los elementos del documento • Combinación más accesible: Texto negro sobre un fondo blanco. Para comprobar los niveles de contraste, utilizar las herramientas ya comentadas.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 5: ESTILOS • Dar una estructura lógica al contenido. • Para conseguirlo, hay que definir grupos de contenidos principales o secciones, y a cada una de estas secciones asignarle un encabezado o “Título 1“ dentro de estos se podrá definir otra clasificación de grupo de contenidos de segundo nivel que serán “Título 2”, y así sucesivamente. A través de la pestaña Inicio > Estilos, y a Título 1, Título 2, Título 3, … se le pueden asignar características diferentes de presentación como tamaño, color, sangría, etc.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 6: LISTAS NUMERADAS Y NO NUMERADAS • Es conveniente el uso de numeración y viñetas siempre queramos representar listas de elementos. Para marcar un grupo de elementos como lista, accedemos a la pestaña Inicio > Numeración en el grupo de opciones “Párrafo”.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 7: COLUMNAS • Solo utilizarlas si realmente es necesario, ya que los usuarios que usan tecnologías de apoyo tienen dificultades para acceder a la información de columnas. • No deberemos usar tabuladores o tablas para simular el texto en multicolumna, y tampoco separar las columnas con amplios espacios en blanco. Deben crearse con la herramienta de Word diseñada a tal efecto: Accederemos a esta opción a través de la pestaña Diseño de página > Columnas, en el grupo de opciones de “Configurar página”.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 8: TABLAS • No crear tablas con tabulaciones o espacios, sino con la herramienta de Word destinada a ello. • No crear tablas excesivamente grandes, si es posible quepa en una sola página. Si tenemos que introducir una tabla de más de una página por que no hay más remedio, deberemos repetir las cabeceras de la tabla en cada página y no dividir filas al pasar de página. Para crear una tabla hay que ir a la pestaña Insertar > Tabla
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 8: HIPERVÍNCULOS • El propósito de cada hipervínculo o enlace puede ser determinado por el texto del enlace (ancla), a través del texto contextual o bien mediante texto que acompaña al hipervínculo, siendo la primera la mejor de las opciones. • Se deben evitar enlaces con un texto del tipo “Leer más” o “más información”, porque el destino del hipervínculo se podría deducir del contexto, pero puede no ser advertido en algunos por algunos usuarios. La opción “Hipervínculo” se encuentra en la pestaña Inicio > Insertar en el grupo de opciones “Vínculos”
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 9: COMPRENSIÓN DE LOS TEXTOS • • • No utilizar estructuras gramaticales complicadas. Prescindir de párrafos de texto denso. Marcar el interlineado para distinguir párrafos. Utilizar listas con viñetas para simplificar los párrafos. Si se utilizan abreviaturas, dar la forma extendida. Herramientas para detectar problemas de lectura en textos: Standards-Schmandards y Juicystudio.
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 10: COMPRENSIÓN DEL DOCUMENTO • • Incluir un título al documento. Paginar. Utilizar saltos de página, y no pasar de página con ENTER. En documentos largos o de gran extensión: • Uso de la herramienta “Panel de Navegación”, que permite comprobar a medida que se va escribiendo, la correcta estructuración del documento. Vista > Panel de navegación • Incorporar una “Tabla de contenidos”, pasar la información que nos ofrece el “Panel de navegación” como contenido índice de nuestro documento. Referencias > Tabla de contenido
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 11: EVALUACIÓN DE LA ACCESIBILIDAD • Word 2010 incluye una herramienta de evaluación automática de accesibilidad llamada comprobador de accesibilidad. Podremos acceder a ella en pestaña Archivo > Información > Comprobar si hay problemas > Comprobar accesibilidad
Accesibilidad en documentos ¿Cómo hacer un documento Word accesible? PASO 12: EXPORTACIÓN A PDF ACCESIBLE • Un documento Word accesible puede ser guardado en formato PDF conservando las características de accesibilidad incluidas en el propio documento. Ir a pestaña “Archivo”, y seleccionar “Guardar” como “PDF”, seleccionar las opción “Incluir información no imprimible”. Además, la opción “Opciones PDF/Texto de mapas de bits cuando las fuentes no están incrustadas” no debe estar seleccionada. Por último, dar “Aceptar” en el menú de “Opciones” y “Publicar” en el “Guardar como PDF”.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 1: PARTIR DE UN DOCUMENTO YA CREADO • Se puede crear un pdf de una imagen, de un documento de Word, de Excel, una presentación de Power. Point, documentos creados con programas avanzados de maquetación (Quark. XPress, In. Design) etc. Esto es, no se crean los pdf con un programa en el que se pueda insertar contenido, el contenido ha de ser previo.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 2: TÍTULO DEL DOCUMENTO • Definir un nombre adecuado al archivo, no más de 5 palabras si es posible. Ir a Archivo > Propiedades En la pestaña “Descripción” rellenar los campos de “Título”, “Autor” y “Palabras clave”.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 3: IDIOMA • Identificar el idioma principal del documento. Ir a Archivo > Propiedades En la pestaña “Avanzadas” seleccionar el idioma en “Opciones de idioma”.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS • Del mismo modo que sucede en Word, es fundamental marcar los elementos del contenido y que estos aparezcan estructurados y ordenados correctamente. Para ello, accedemos a la pestaña Avanzadas > Accesibilidad > Retocar orden de lectura. Seleccionamos la totalidad del contenido de la página y hacemos click sobre el botón Fondo. Esto nos permite aislar imágenes de fondo y otros elementos que puedan interferir en la accesibilidad.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS Ahora seleccionamos el primer elemento de texto, por ejemplo el título del documento y hacemos click en el botón “Encabezado 1”. Esto indica que es un Título de primer nivel. Si hubiera imágenes también las seleccionamos y las marcamos como “Figura”. Los párrafos de contenido los marcamos como “Texto”. Las listas las marcamos como “Texto”. Para que el lector de pantalla las identifique como lista, procederemos de la siguiente forma:
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS En el cuadro de diálogo “Retocar orden de lectura” hacemos click sobre el botón “Mostrar panel de orden”. En la pestaña “Etiquetas” vemos la estructura del documento y las etiquetas que representan a cada elemento: • • • <H 1> , <H 2> , <H 3> encabezado de primer, segundo, tercer nivel. <Figure> imagen <P> párrafo <L> lista <LI> elemento de lista
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS Cuando marcamos la lista como texto, en el panel de etiquetas nos aparece como <P>. Tan solo tenemos que hacer doble click sobre la etiqueta y cambiar manualmente <P> por <L>. Para identificar elementos de lista dentro de una lista, hacemos la misma operación, seleccionamos el elemento como “Texto” y cambiamos la etiqueta <P> por <LI>.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 5: ENCABEZADOS Y PIES DE PÁGINA • Si hay pies de página o encabezamientos que se repiten en todas las páginas, la técnica es marcar ese contenido solo en la primera página. • En el resto del documento se marcará como fondo.
Accesibilidad en documentos ¿Cómo hacer un documento PDF accesible? PASO 6: IMÁGENES • Las imágenes contenido relevante hay que marcarlas como tales y deben tener texto alternativo. • Para ello, vamos al panel de etiquetas y localizamos la etiqueta <Figure> que nos interesa, hacemos click con el botón derecho del ratón y en la opción “Propiedades” rellenamos el campo “Texto alternativo”. • Las que no aportan información se marcan como fondo.
Accesibilidad en documentos ¿Cómo hacer un PPT accesible? PASO 1: PATRONES • Los patrones son útiles herramientas para fijar tipos de estructuras y diseños de diapositiva. Para crear patrones, vamos a la pestaña Vista > Patrón de diapositivas. Aquí podemos poner fondo a la presentación, e ir insertando marcadores de títulos, fecha, texto, listas o imágenes.
Accesibilidad en documentos ¿Cómo hacer un PPT accesible? PASO 2: CONTENIDO • Una vez cerramos la vista de patrones, volvemos a la vista normal y ya podemos empezar a construir nuestro documento. En la pestaña Inicio hacemos click sobre la flecha de “Nueva diapositiva” y seleccionamos el patrón queremos para esa diapositiva. Las imágenes deben contener texto alternativo. Para ello hacemos click sobre la imagen con el botón derecho del ratón Formato de imagen > Texto alternativo
Accesibilidad en documentos ¿Cómo hacer un PPT accesible? PASO 3: ESTRUCTURA • Para que un ppt sea accesible es primordial comprobar que el texto introducido aparece convenientemente ordenado y jerarquizado en la pestaña “Esquema” de la vista normal.
5. Contenido gráfico para publicación en web
Contenido gráfico para publicación en web Componentes para accesibilidad web • Contenido: corresponde a la información presente en el sitio web, incluyendo: • Texto, imágenes y sonidos • Etiquetado de las opciones y de los diferentes apartados • Estructura del sitio. • Navegadores web, reproductores multimedia y otros agentes de usuario. • Tecnología asistiva, en los casos en que exista (lectores de pantalla, teclados alternativos, software de escaneo, etc. ). • Conocimiento de los usuarios, experiencias y, en ocasiones, estrategias de adaptación para la utilización de la web.
Contenido gráfico para publicación en web Componentes para accesibilidad web • Desarrolladores –diseñadores, codificadores, autores, etc. –, incluyendo desarrolladores que tienen alguna discapacidad y usuarios que proporcionan contenido. • Herramientas de autor y software para crear sitios web. • Herramientas de evaluación, como validadores de HTML, validadores de CSS, etc.
Contenido gráfico para publicación en web Limitaciones de acceso a la web Discapacidad del usuario: • Deficiencias visuales: ceguera, visión reducida y problemas en visualización de color entre otros. • Deficiencias motrices: hacen referencia a la capacidad de movilidad del usuario. Estos usuarios no suelen ser capaces de interactuar con el sistema a través de dispositivos de entrada tradicionales, por lo que utilizan dispositivos alternativos. Por ejemplo, basados en voz. • Deficiencias auditivas: son menos limitadoras en el acceso y uso de contenidos web, pero conviene tener presentes las limitaciones y barreras derivadas de esta discapacidad, como es el caso del lenguaje. • Deficiencias cognitivas y de lenguaje: las personas con estas deficiencias tienen problemas en el uso del lenguaje, la lectura, percepción, memoria, etc.
Contenido gráfico para publicación en web Limitaciones de acceso a la web Edad del usuario: Niños (0 -13 años): • Navegación sencilla y directa (orientada a objetivos). • Las opciones deben representar elementos familiares para los niños, que les orienten de manera sencilla y clara sobre su función. • Los botones deben tener un tamaño mayor que en el caso del diseño para adultos, ya que la coordinación motora de los niños es menor. • Los botones deben mostrar un retorno visual cuando el usuario desplaza el cursor por encima de ellos (rollover). • Los niños no suelen utilizar el scroll, ni interactúan con elementos que se encuentran debajo del área visible del navegador
Contenido gráfico para publicación en web Limitaciones de acceso a la web Edad del usuario: Adolescentes (0 -13 años): • Los adolescentes prestan más atención que los adultos a la apariencia visual de una aplicación. Les gustan especialmente los colores frescos y saturados. • Suelen leer muy poco en la web, y prefieren las aplicaciones que ilustren los conceptos visualmente, o que presenten contenidos bien estructurados, para un barrido visual rápido de la página.
Contenido gráfico para publicación en web Limitaciones de acceso a la web Edad del usuario: Senior (más de 65 años): • Debe evitarse la proximidad de los colores amarillo, azul y verde, ya que resultan difíciles de discriminar para algunos usuarios sénior. • Se deben evitar los fondos decorados, ya que interfieren en la lectura. • Los usuarios sénior prefieren tamaños de letra relativamente grandes, de al menos 12 puntos. Los sitios web diseñados con fuentes pequeñas deberían permitir aumentar su tamaño a gusto del usuario. • Es recomendable utilizar opciones estáticas, que no requieran un ajuste perfecto del puntero.
Contenido gráfico para publicación en web Limitaciones de acceso a la web Edad del usuario: Senior (más de 65 años): • Los enlaces visitados y los no visitados deben diferenciarse claramente mediante colores. • Incluir mapas del sitio para mostrar cómo está organizado. • Se recomienda evitar el doble-clic del ratón para activar opciones. • Incluir sistemas de ayuda para los usuarios que utilizan la aplicación o visitan el sitio web. Si es posible, también es recomendable incluir un número de teléfono para quienes prefieran efectuar consultas verbales. • Glosario de términos.
Contenido gráfico para publicación en web Limitaciones de acceso a la web • Además de las limitaciones propias del individuo, existen otras derivadas de características del equipo de navegación o del entorno ambiental desde donde accede a la web, como por ejemplo, usuarios que utilicen pantallas pequeñas, accedan desde entornos llenos de humo, su navegador no soporte los scripts utilizados en nuestra web, etc. • Todo ello muy relacionado también con la usabilidad, ya que cuanto más fácil de manejar es una web, más accesible parece ser.
Contenido gráfico para publicación en web Contenidos gráficos en web Algunas recomendaciones de accesibilidad: • Imágenes y animaciones: utilizar texto alternativo. • Mapas de imagen: usar el elemento texto para las zonas activas. • Multimedia: poner subtítulos y transcripción del sonido, y descripción del vídeo. • Enlaces de hipertexto: usar expresiones que tengan sentido leído fuera de contexto. Por ejemplo, no utilices expresiones como “click aquí”.
Contenido gráfico para publicación en web Contenidos gráficos en web Algunas recomendaciones de accesibilidad: • Organización de las páginas: usar encabezados, listas y estructura consistente, correctamente etiquetados. • Tablas: Facilita la lectura línea. Resume los contenidos en textos comprensibles y sencillos. • Título de la página: es lo primero que leen los lectores de pantalla y lo primero que aparece en los navegadores no visuales. Por ello, debe describir correctamente el contenido de la página.
5. Buenas prácticas
Buenas prácticas Aeropuerto de Amsterdam El aeropuerto de Schiphol cuenta con uno los mejores sistemas de señalización del mundo.
Buenas prácticas Aeropuerto de Amsterdam Los colores identifican diferentes tipos de información. • • Carteles amarillos: información sobre llegadas y salidas. Carteles azules: información sobre restaurantes y tiendas. Carteles negros: zonas de espera. Carteles verdes: salidas. El sistema consiste en letreros largos que se repiten cada 50 metros.
Buenas prácticas Aeropuerto de Amsterdam El trabajo incluye rutas de acceso, señalética en parking y edificios. Las señales se complementan con mapas, información sobre vuelos, instrucciones y salidas de emergencia.
Buenas prácticas Apsis 4 all cajeros automáticos http: //193. 27. 9. 153: 8080/personaemanager/initialservlet Plan de accesibilidad Renfe Noticias Fácil
Скачать презентацию Comunicación gráfica accesible 1 La comunicación gráfica
9ffcd28b257aa4115485619b49381e41.ppt