Comunicación gráfica accesible. 1. La comunicación gráfica y los principios del diseño para...

Comunicación gráfica accesible

1. 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áficay 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



¿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.

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.


¿Cuál es su objetivo?


¿Qué es Diseño para Todos?

DISEÑO PARA TODOS

ADAPTACIÓN DE LA PERSONA AL MEDIO

ADAPTACIÓN DEL MEDIO A LA PERSONA

DISEÑO SOCIEDAD

SOCIEDADDIVERSA

>

>

>

>


Beneficios del Diseño para Todos

MEJORA DEL PRODUCTO FINAL

AMPLIACIÓN MERCADOS

MEJORA EN LA CALIDAD DE VIDADE LOS USUARIOS

ENRIQUECIMIENTO PROCESO CREATIVO

• 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.


7 principios del Diseño para Todos

1er Principio: Uso equitativo


1er Principio: Uso equitativo

Ejemplo:

Tirador tipo asa en formade "D" para una cajonera.

Facilita el agarre del tirador ydisminuye el esfuerzo a ejercerpara abrir la puerta.Permite abrir la puerta o el cajóna personas con diversascapacidades.


• 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.


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.


2º Principio: Uso flexible.

• 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.


3er Principio: Simple e Intuitivo.



Ejemplo:

Máxima compartimentación enestantes de diferentes tamañospara 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.


3er Principio: Simple e Intuitivo.

• 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.


4º Principio: Información perceptible.



Ejemplo:

Tirador cuyo coloridodestaque del color de lasuperficie donde estécolocado.

Facilita la visualización del tirador.


4º Principio: Información perceptible.

• 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.


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.


5º Principio: Tolerancia al Error.

• 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.


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 cuandoestán abiertas. También evitan el peligro de pillarse los dedos al cerrarlas.


6º Principio: Que exija poco esfuerzo físico.

• 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.


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.


7º Principio: Tamaño y espacio para el acceso y uso.

2. Comunicación Gráfica interactiva

VS

Comunicación Gráfica no interactiva

Comunicación Gráfica interactivaVS 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.


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 iPhone), las tabletas (como el iPad), 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 Interactiva

Comunicación No Interactiva

Tipo piezas JuegosWebReproductoresDispositivos móviles (APP)

LibrosFolletosSeñaléticaImagen corporativa

Aplicabilidad accesibilidad

WAI-WCAGNormas UNEPrincipios de interacciónUsabilidad

ContrastesComposiciónTipografías

Técnicas y profesionales

Diseño GráficoMaquetaciónDesarrollo – Código

Diseño GráficoMaquetación editorial

Aplican siempre los 7 principios del diseño para todos



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.

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.




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.




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.




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.




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.




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

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.

¿Qué son?

Deambulación“Acción de desplazarse de un sitio a otro”.

Criterios DALCO

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.


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."

Criterios DALCO

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…-.


Localización"Acción de averiguar el lugar o momento preciso en el que está algo, alguien o puede acontecer un suceso.”

Criterios DALCO

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.


Comunicación"Acción de intercambio de la información necesaria para el desarrollo de una actividad.”

Criterios DALCO

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,…


Criterios DALCO


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


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


Tipografías

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.

Familias tipográficas:

• Garamond • Times New Roman • Palatino


Tipografías

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


Tipografías

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


Tipografías

Decorativas

Estas fuentes no fueron concebidas como tipos de texto, sino para un uso esporádico y aislado.


• Grutch Shaded• Bombere• Block-Up


Tipografías

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.

Variantes:


Tipografías

• Cuerpo o tamaño: mayúsculas, minúsculas y capitales.

• Grosor del trazado: ultrafina, fina, 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.

Variantes:


Tipografías

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.

Composición:


Tipografías

1. Espaciado

Se refiere al espacio entre letras.

• Tracking:

• Kerning:

Composición:


Tipografías

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.

Composición:


Tipografías

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.

Composición:


Tipografías

4. Alineación:

La alineación es uno de los factores que contribuyen a dotar al texto de un carácter determinado.

Izquierda

Composición:

Derecha Centrado Justificado


La accesibilidad en la tipografía

Por legibilidad se entiende el grado de facilidad con el que un textopuede 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.).

Característica fundamental: la legibilidad



• 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 entre 130 y 150%.

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.



• Aplicar estilos tipográficos con 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.




Ejemplo de tipografía accesible para disléxicos


http://www.youtube.com/watch?v=XhvQQEyuhgw

Color

Los tres primarios:

Los tres secundarios:

RojoAzulAmarillo

Verde Violeta Naranja

La capacidad del ser humano para reconocer y diferenciar fácilmente los colores está limitada a seis:


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.


Característica fundamental: contraste adecuado entre fondo y texto.

La World Wide Web Consortium (W3C) 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.

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.


Ejemplo:

Problema: Indicamos y planteamos una funcionalidad basada en el color.

Solución: Utilizar asteriscos como marcadores.



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)



Ejemplo:

Contraste insuficiente Contraste suficiente



http://www.iberia.com/

Combinaciones de coloresmá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.



Paletas adaptadas:



http://euf.once.es/home.cfm?color=

• 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.




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.

Composición y flujos visuales


Composición

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

PASO 1: IDIOMA

Accesibilidad en documentos

¿Cómo hacer un documento Word accesible?

• 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.

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.


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.


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 > Formato de imagen > Texto alternativo seleccionar esta última e incluir el texto alternativo en la caja de texto con el nombre “Descripción”.


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.


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.


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ítulo1“ dentro de estos se podrá definir otra clasificación de grupo de contenidos de segundo nivel que serán “Título2”, y así sucesivamente.

A través de la pestaña Inicio > Estilos, y a Título1, Título2, Título3,… se le pueden asignar características diferentes de presentación como tamaño, color, sangría, etc.


PASO 6: LISTAS NUMERADAS Y NO NUMERADAS


• Es conveniente el uso de numeración y viñetas siempre que 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”.


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”.


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 que 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


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”


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.


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


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


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”.


PASO 1: PARTIR DE UN DOCUMENTO YA CREADO

¿Cómo hacer un documento PDF accesible?

• Se puede crear un pdf de una imagen, de un documento de Word, de Excel, una presentación de PowerPoint, documentos creados con programas avanzados de maquetación (QuarkXPress, InDesign) etc. Esto es, no se crean los pdf con un programa en el que se pueda insertar contenido, el contenido ha de ser previo.


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”.


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”.


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.




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:




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:

• <H1> , <H2> , <H3> encabezado de primer, segundo, tercer nivel.• <Figure> imagen• <P> párrafo• <L> lista• <LI> elemento de lista




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>.


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.


PASO 6: IMÁGENES


• Las imágenes con 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.


PASO 1: PATRONES

¿Cómo hacer un PPT accesible?

• 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.


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 que 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


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ónen 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.


Limitaciones de acceso a la web

• 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.

Discapacidad 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

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.

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.

Edad del usuario:


http://www.hrea.net/index.php?language_id=2


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.

Edad del usuario:



• 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.


Contenidos gráficos en web

• 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í”.

Algunas recomendaciones de accesibilidad:


Contenidos gráficos en web

• Organización de las páginas: usar encabezados, listas y estructura consistente, correctamente etiquetados.

• Tablas: Facilita la lectura línea a 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.

Algunas recomendaciones de accesibilidad:


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.

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


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


Buenas prácticas

Apsis4all cajeros automáticos

Plan de accesibilidad Renfe

Noticias Fácil

http://193.27.9.153:8080/personaemanager/initialservlet

http://193.27.9.153:8080/personaemanager/initialservlet

http://www.youtube.com/watch?feature=endscreen&NR=1&v=wZFBcPSfdSk

http://www.noticiasfacil.es/ES/Paginas/index.aspx

Comunicación gráfica accesible. 1. La comunicación gráfica y los principios del diseño para...

Documents

Transcript of Comunicación gráfica accesible. 1. La comunicación gráfica y los principios del diseño para...