Transcript Comunicación Gráfica Accesible

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
>
ADAPTACIÓN DE LA
PERSONA AL MEDIO
> SOCIEDAD
DISEÑO
>
ADAPTACIÓN DEL
MEDIO A LA PERSONA
> SOCIEDAD
DIVERSA
PARA TODOS
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
1er 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
1er 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
3er 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
3er 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 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 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, 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.
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 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 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.
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 (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.
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
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 > 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í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.
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
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”.
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
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
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 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.
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:
•
•
•
•
•
<H1> , <H2> , <H3> 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 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.
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 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
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 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.
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
Apsis4all cajeros automáticos
http://193.27.9.153:8080/personaemanager/initialservlet
Plan de accesibilidad Renfe
Noticias Fácil