Vous êtes sur la page 1sur 116

Comunicacin grfica accesible

1. La comunicacin grfica
y los principios del diseo para todos

La comunicacin grfica
y los principios del diseo para todos

LEME AQUEL LETRERO, QUE NO LLEVO GAFAS


ESPERA, QUE VOY CARGADO CON EL NIO
ME HE ROTO LA PIERNA Y NO PUEDO SUBIR
NO LO ENTIENDO, EST ESCRITO EN OTRA LENGUA
CMO DEMONIOS SE ABRE ESTE PAQUETE?

La comunicacin grfica
y los principios del diseo para todos

Y qu puedo hacer yo como diseador?


Muy sencillo.
Introducir en el momento del proceso de diseo la reflexin
bsica de si las personas con ms restricciones y los
extremos de la diversidad que forman la sociedad, ya sean
morfolgicos o culturales, los podrn utilizar

La comunicacin grfica
y los principios del diseo para todos

Qu es Diseo para Todos?


Es un paradigma del diseo relativamente nuevo, que dirige su
accin hacia el desarrollo de productos, servicios y
entornos de fcil acceso para el mayor nmero de
personas posible, sin la necesidad de adaptarlos o
redisearlos de una forma especial en funcin de las
limitaciones o necesidades temporales o permanentes de tales
personas.

La comunicacin grfica
y los principios del diseo para todos

Cul es su objetivo?
El objetivo prioritario del Diseo para Todos es el de
simplificar la vida de cualquier persona,
independientemente de su edad y/o capacidad,
ofrecindole los productos, servicios, medios de comunicacin
y entornos construidos susceptibles de ser directamente
utilizado con el menor o nulo coste posible.

La comunicacin grfica
y los principios del diseo para todos

Qu es Diseo para Todos?

DISEO

>

ADAPTACIN DE LA
PERSONA AL MEDIO

> SOCIEDAD

DISEO

>

ADAPTACIN DEL
MEDIO A LA PERSONA

> SOCIEDAD
DIVERSA

PARA TODOS

La comunicacin grfica
y los principios del diseo para todos

Beneficios del Diseo para Todos


ENRIQUECIMIENTO PROCESO CREATIVO

AMPLIACIN MERCADOS

MEJORA DEL PRODUCTO FINAL

MEJORA EN LA CALIDAD DE VIDA


DE LOS USUARIOS

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


1er Principio: Uso equitativo
Que proporcione las mismas formas de uso para todos los
usuarios: idnticas cuando sea posible, equivalentes cuando
no lo sea.
Que evite segregar o estigmatizar a cualquier usuario.
Que las caractersticas de privacidad, garanta y seguridad
estn disponibles para todos los usuarios.
Que el diseo sea atractivo para todos los usuarios.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo 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 cajn
a personas con diversas
capacidades.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


2 Principio: Uso flexible.
Que ofrezca posibilidades de eleccin en los mtodos de
uso.
Que pueda accederse y usarse tanto con la mano derecha
como con la izquierda.
Que facilite al usuario la exactitud y precisin.
Que se adapte al paso o ritmo del usuario.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo 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 comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


3er Principio: Simple e Intuitivo.
Que elimine la complejidad innecesaria.
Que sea consistente con las expectativas e intuicin del
usuario.
Que se acomode a un amplio rango de alfabetizacin y
habilidades lingsticas.
Que dispense la informacin de manera consistente con su
importancia.
Que proporcione avisos eficaces y mtodos de respuesta
durante y tras la finalizacin de la tarea.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


3er Principio: Simple e Intuitivo.
Ejemplo:
Mxima compartimentacin en
estantes de diferentes tamaos
para el armario de un dormitorio.
Permite guardar objetos de
diferentes tamaos. Permite
diferenciar los estantes a personas
con deficiencia visual,
facilitando la bsqueda de objetos.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


4 Principio: Informacin perceptible.
Que use diferentes modos (grfica, verbal, tctil) para una
presentacin redundante de la informacin esencial.
Provea un adecuado contraste entre la informacin
esencial y la adicional.
Diferencie los elementos de forma que puedan ser descritos
(es decir, haga fcil dar instrucciones o direcciones).
Provea compatibilidad con la variedad de tcnicas o
dispositivos usados por las personas con limitaciones
sensoriales.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


4 Principio: Informacin perceptible.
Ejemplo:
Tirador cuyo colorido
destaque del color de la
superficie donde est
colocado.
Facilita la visualizacin del tirador.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


5 Principio: Tolerancia al Error.
Que disponga los elementos para minimizar los riesgos y
errores: elementos ms usados, ms accesibles; elementos
peligrosos, eliminados, aislados o tapados.
Que proporcione advertencias sobre peligros y errores.
Que proporcione caractersticas seguras de interrupcin.
Que desaliente acciones inconscientes en tareas que
requieren vigilancia.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


5 Principio: Tolerancia al Error.
Ejemplo:
Cajones con guas y tope de
apertura.
Facilita la apertura del cajn y
evitar la cada del mismo.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


6 Principio: Que exija poco esfuerzo fsico.
Que permita que el usuario mantenga una posicin
corporal neutra.
Que utilice de manera razonable las fuerzas necesarias
para operar.
Que minimice las acciones repetitivas.
Que minimice el esfuerzo fsico continuado.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


6 Principio: Que exija poco esfuerzo fsico.
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
estn abiertas. Tambin evitan el
peligro de pillarse los dedos al
cerrarlas.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


7 Principio: Tamao y espacio para el acceso y uso.
Que proporcione una lnea de visin 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 tamao de la mano o
del agarre.
Que proporcione el espacio necesario para el uso de
ayudas tcnicas o de asistencia personal.

La comunicacin grfica
y los principios del diseo para todos

7 principios del Diseo para Todos


7 Principio: Tamao y espacio para el acceso y uso.
Ejemplo:
Cajn ms alto en la parte
inferior de la cajonera.
Para facilitar el acceso al tirador,
que, adems, no estar centrado
en altura respecto al cajn, sino
ms elevado. Los objetos ms
grandes que almacenar este cajn
pueden asirse de la parte superior,
sin necesidad de acceder al fondo
del cajn.

2. Comunicacin Grfica interactiva


VS
Comunicacin Grfica no interactiva

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica no interactiva

El mensaje no se relaciona con otro previo.

Es unidireccional, no recibe un feedback explcito e inmediato,


aunque siempre busca una determinada reaccin en el receptor.

Tipos: el diseo grfico publicitario, el diseo editorial, el diseo de


identidad corporativa, el diseo de envase, el diseo tipogrfico, la
cartelera y la sealtica, entre otros.

La comunicacin grfica
y los principios del diseo para todos

Comunicacin grfica interactiva

Una expresin 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 telfonos inteligentes (como el iPhone), las


tabletas (como el iPad), etc.

La interactividad supone un esfuerzo de diseo para planificar una


navegacin entre pantallas en las que el usuario sienta que realmente
controla y maneja una aplicacin.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin
Interactiva

Comunicacin
No Interactiva

Tipo piezas

Juegos
Web
Reproductores
Dispositivos mviles (APP)

Libros
Folletos
Sealtica
Imagen corporativa

Aplicabilidad
accesibilidad

WAI-WCAG
Normas UNE
Principios de interaccin
Usabilidad

Contrastes
Composicin
Tipografas

Tcnicas y
profesionales

Diseo Grfico
Maquetacin
Desarrollo Cdigo

Diseo Grfico
Maquetacin editorial

Aplican siempre los 7 principios del diseo para todos

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
1. Portales de informacin
Se dirigen a una audiencia
activa, no a consumidores
pasivos.
Presenta una informacin
jerarquizada: el usuario busca
informacin, y decide hasta qu
nivel quiere profundizar en ella.
Deben destacar y diferenciar
titulares, entradillas y cuerpos de
noticias.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
2. Portales corporativos
El diseo de la interfaz debe estar
directamente relacionado con su
estrategia de negocio.
Todas las iniciativas de diseo,
edicin y ampliacin de la web
deben mantener coherencia.
Utilizar un diseo diferenciador.
Utilizar sistemas de recoleccin
de datos para saber cunto
tiempo pasan los usuarios en
cada apartado.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
3. Comercio electrnico
Deben transmitir seguridad y
fiabilidad.
La navegacin debe ser sencilla e
intuitiva.
Todos los trminos de la
transaccin deben exponerse de
manera clara al usuario. Por
ejemplo, si existen costes de
transporte, se comunicarn antes
de que el usuario confirme la
compra.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
3. Elementos Comercio electrnico
Sistema de bsqueda optimizada.
Catlogo, donde se muestran los
productos, ordenados por categoras.
Cesta de la compra, donde se
almacenan los productos seleccionados
para la compra, y se desarrollan las
transacciones.
Preguntas frecuentes y poltica de
privacidad.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
4. E-learning
Los usuarios quieren ver, or y hacer
al mismo tiempo, en bloques de 5 a 15
minutos.
Esperan informacin sobre su
progreso y sus resultados (feeback).
Los contenidos deben disearse
previendo mltiples rutas: bsquedas,
enlaces,
Acceso a la ayuda disponible en todas
las fases.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
4. E-learning
Tiempos de espera mnimos.
Mens de no ms de 7 elementos y
nunca ocultos.
Las opciones no deben cambiar de
aspecto o de posicin en pantalla.
Las opciones relacionadas deben
aparecer agrupadas.

Comunicacin Grfica interactiva


VS Comunicacin Grfica no interactiva

Comunicacin grfica interactiva


Principales mbitos de produccin de aplicaciones Interactivas:
5. Intranet
Navegabilidad eficiente que determine
una mayor productividad.
Herramientas de edicin fciles de
utilizar para mantenerla actualizada
Jerarqua de directorios que estructure
todo el contenido.
Buscador
Las noticias de actualidad de la
empresa y de sus empleados.

3. Piezas grficas accesibles

Piezas grficas accesibles

Criterios DALCO
Qu son?
Las posibilidades son tantas que la norma UNE 170001 de Accesibilidad
universal considera las acciones de Deambulacin, Aprehensin,
Localizacin y Comunicacin (DALCO) para explicar, simplificndolas, las
capacidades que las personas ponen en juego cuando utilizan un
espacio. El acceso, uso y disfrute de un entorno conlleva la realizacin de
actividades que requieren la combinacin de esas acciones.

Piezas grficas accesibles

Criterios DALCO
Deambulacin
Accin 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 deambulacin deber tener
adecuados pavimentos, dejar libres y sin obstculos las zonas de
circulacin, tener puertas fciles 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 iluminacin.

Piezas grficas accesibles

Criterios DALCO
Aprehensin
"Accin 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 aprehensin es conseguir que las acciones
que se realizan manipulando objetos de todo tipo resulten fciles en
cualquier situacin y condicin.
Cada objeto debe ser diseado teniendo en cuenta los denominados
criterios del diseo para todos. Adems es muy importante considerar
dnde y cmo se ubican los objetos y si la distancia de aproximacin y
alcance permitir su uso a todas las personas bajas, altas, usuarias de
silla de ruedas, con bastones-.

Piezas grficas accesibles

Criterios DALCO
Localizacin
"Accin de averiguar el lugar o momento preciso en
el que est algo, alguien o puede acontecer un
suceso.
Esta accin se realiza a travs de la orientacin o comprensin del
espacio incluyendo la planificacin de la ruta a seguir y de la identificacin
de los lugares y objetos a los que se desea llegar o se quiere utilizar.
Hacer accesible la localizacin requiere un adecuado diseo de diferentes
elementos tales como seales, elementos publicitarios, elementos
arquitectnicos de diversas formas y volmenes, diferenciacin de
materiales, texturas y colores de paramentos, mobiliario y equipamiento,
iluminacin, etc.

Piezas grficas accesibles

Criterios DALCO
Comunicacin
"Accin de intercambio de la informacin necesaria
para el desarrollo de una actividad.
La comunicacin que llega a travs de los sentidos y la conexin entre
emisor y receptor por caractersticas personales (edad, discapacidad,
despiste,) o por las condiciones del espacio (climatolgicas, ruido,
emergencias) puede fallar.
La comunicacin no interactiva utiliza diversos elementos -seales,
folletos, planos, catlogos, avisos, paneles, etc.- que para ser accesible
deben disearse de manera que sean percibidos a la vez por varios
sentidos; debern emitir visual, auditiva y tctilmente seales acsticas y
luminosas, planos tctiles,

Piezas grficas accesibles

Criterios DALCO

Piezas grficas accesibles

Normas UNE
Conjunto de normas tecnolgicas creadas por los comits
tcnicos de normalizacin (CTN), fabricantes, consumidores y
usuarios, administracin, laboratorios y centros de investigacin
Desde el ao 2007 AENOR ha desarrollado las normas de
accesibilidad TIC mediante comits integrados por expertos:
CTN 139: Tecnologas de la Informacin y las Comunicaciones
para la salud
CTN 153: Ayudas Tcnicas para Personas con Discapacidad
CTN 133: Telecomunicaciones
CTN 170: Necesidades y Adecuaciones para Personas con
Discapacidad

Piezas grficas accesibles

Normas UNE
Desarrollado un amplio catlogo 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 Espaola en redes
informticas
UNE 153010 Subtitulado para personas sordas o con
discapacidad auditiva
UNE 153020 Audiodescripcin para personas con discapacidad
visual
UNE 153030:2008 IN Accesibilidad en televisin digital

Piezas grficas accesibles

Tipografas
Familias tipogrficas:
Una familia tipogrfica es un grupo de signos escriturales que
comparten rasgos de diseo comunes,
Romanas
Las fuentes Romanas son regulares,
tienen una gran armona 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 grficas accesibles

Tipografas
Familias tipogrficas:
Palo Seco
Se caracterizan por reducir los
caracteres a su esquema esencial.
Las maysculas se vuelven a las
formas fenicias y griegas y las
minsculas estn conformadas a base
de lneas rectas y crculos unidos,
reflejando la poca en la que nacen,
la industrializacin y el funcionalismo.

Arial
Futura
Helvtica

Piezas grficas accesibles

Tipografas
Familias tipogrficas:
Rotuladas
Las fuentes rotuladas advierten ms o
menos claramente el instrumento y la
mano que los cre, y la tradicin
caligrfica o cursiva en la que se inspir
el creador.

Brush
Mistral

Piezas grficas accesibles

Tipografas
Familias tipogrficas:
Decorativas
Estas fuentes no fueron concebidas
como tipos de texto, sino para un uso
espordico y aislado.

Grutch Shaded
Bombere
Block-Up

Piezas grficas accesibles

Tipografas
Variantes:
Las variables constituyen alfabetos alternativos dentro de la
misma familia, manteniendo un criterio de diseo que las
emparenta entre s.
Estas fuentes no fueron concebidas como tipos de texto, sino
para un uso espordico y aislado.

Piezas grficas accesibles

Tipografas
Variantes:
Cuerpo o tamao: maysculas, minsculas y capitales.
Grosor del trazado: ultrafina, fina, book, redonda, media,
seminegra, negra y ultranegra.
Inclinacin de los ejes: redonda, cursiva e inclinada.
Proporcin de los ejes: condensada, comprimida, estrecha,
redonda, ancha, ensanchada y expandida.
Otras variantes de una fuente incluyen versalitas, nmeros,
smbolos de puntuacin, monetarios, matemticos, etc.

Piezas grficas accesibles

Tipografas
Composicin:
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


segn la letra. Cada letra ocupa
justamente el espacio que
necesita para poder distinguirse y
para favorecer la legibilidad.

Piezas grficas accesibles

Tipografas
Composicin:
1. Espaciado
Se refiere al espacio entre letras.

Tracking:

Kerning:

Piezas grficas accesibles

Tipografas
Composicin:
2. Longitud de lnea
La longitud de lnea aconsejable depende del tipo de letra, del
interlineado (distancia entre lneas) y del tamao y resolucin
del soporte (offline/online).
Lneas largas: a ms longitud, ms dificultad de lectura.
Lneas estrechas: fragmentan el texto e interrumpen el ritmo
de lectura.

Piezas grficas accesibles

Tipografas
Composicin:
3. Interlineado
El interlineado se refiere a la distancia entre lneas de texto, y se
mide en puntos.
Interlineado estrecho: el proceso de lectura se ve dificultado
por la apreciacin de bloques oscuro.
Interlineado ancho: puede provocar problemas para saltar de
una lnea a la siguiente.

Piezas grficas accesibles

Tipografas
Composicin:
4. Alineacin:
La alineacin es uno de los factores que
contribuyen a dotar al texto de un carcter
determinado.
Izquierda

Derecha

Centrado

Justificado

Piezas grficas accesibles

La accesibilidad en la tipografa
Caracterstica fundamental: la legibilidad
Por legibilidad se entiende el grado de facilidad con el que un texto
puede ser ledo sin que exista ambigedad formal.
Factores fundamentales en la composicin del texto:
1.El contenido del texto que se publica (qu se lee).
2.El tipo de pblico al que va dirigido (infantil, adulto, pblico en general,
comunidad cientfica, etc.).
3.Cul es el soporte (papel, pantalla, etc.).
4.Cul es la finalidad del mensaje (publicidad, divulgacin cientfica,
literatura, arte, etc.).

Piezas grficas accesibles

La accesibilidad en la tipografa
Algunas recomendaciones:
Se recomienda usar tipografas sin srif para la lectura en
pantalla, puesto que se adapta a la retcula de pxeles.
Para piezas impresas la letra con serif es la ms legible,
pues distingue unas letras de otras.
La letra regular acostumbra a resultar ms legible que
cualquiera de sus variantes (cursiva, negrita, versal).
Las palabras deben estar prximas 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 grficas accesibles

La accesibilidad en la tipografa
Algunas recomendaciones:
En soporte papel una lnea debera 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 lnea.
Las letras minsculas son ms legibles que las
maysculas.El intercalado de maysculas dentro de una frase
interrumpe notablemente el ritmo de lectura.
El tamao de letra de pantalla no debera ser inferior a los 10
puntos. La letra ms legible es Arial a 12 puntos, seguida por la
Times New Roman 12 puntos.

Piezas grficas accesibles

La accesibilidad en la tipografa
Algunas recomendaciones:
Aplicar estilos tipogrficos con consistencia: por ejemplo,
cursivas para citas textuales, negritas para resaltar,
No abusar del uso de tipografa heterognea, ya que impide
la observacin de un patrn consistente, y dificulta que el lector
pueda interpretar la funcin asignada a cada bloque de texto.
Usar listas.

Piezas grficas accesibles

Ejemplo de tipografa accesible para dislxicos

Piezas grficas accesibles

Color
La capacidad del ser humano para reconocer y diferenciar
fcilmente los colores est limitada a seis:

Los tres primarios:

Rojo
Azul
Amarillo

Los tres secundarios: Verde


Violeta
Naranja

Piezas grficas accesibles

Contrastes de color
El contraste se produce cuando en una
composicin los colores no tienen nada en
comn o no guardan ninguna similitud.
Tipos:
Contraste cromtico: modifica los colores
en el sentido de la complementariedad
Asimilacin: cuando los matices son
similares, los colores se aproximan en lugar
de acentuar su contraste.

Piezas grficas accesibles

Color y accesibilidad
Caracterstica 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 ms
facilidad por Internet.

Piezas grficas accesibles

Color y accesibilidad
Pautas referentes al color:
2.1 (WCAG 1.0) Asegrese de que toda la informacin transmitida
a travs de los colores tambin 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 grficas accesibles

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

Solucin: Utilizar asteriscos como


marcadores.

Piezas grficas 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 (mnimo): La presentacin visual del
texto y las imgenes 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 presentacin visual del
texto y las imgenes de texto tiene un ratio de contraste de al
menos 7:1, excepto en lo siguiente: (Nivel AAA)

Piezas grficas accesibles

Color y accesibilidad
Ejemplo:
Contraste insuficiente

Contraste suficiente

Piezas grficas accesibles

Color y accesibilidad
Combinaciones de colores
ms 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 grficas accesibles

Color y accesibilidad
Paletas adaptadas:

Piezas grficas accesibles

Color y accesibilidad
Algunas recomendaciones:
Los vnculos 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 grficos estadsticos es necesario mostrar una
leyenda que identifique cada barra con un icono
descriptivo.
Usar iconos que describan la accin o el estado.

Piezas grficas accesibles

Piezas grficas accesibles

Composicin y flujos visuales


El flujo visual es el camino que recorren los ojos a travs
de una pantalla. El orden convencional en Occidente es de
arriba hacia abajo y de izquierda a derecha.
Si el diseo est bien realizado este movimiento es natural y
fluido, el ojo va de un objeto al siguiente sin darse cuenta.
El diseador tiene que presentar los elementos o la
informacin segn se desee que los vea o lea el usuario. Y
debe dirigir la mirada hacia el objetivo buscado, hacia la
llamada a la accin que se desea realice el usuario.

Piezas grficas accesibles

Composicin
Composicin incorrecta:
El usuario, una vez seleccionadas las
fotografas que desea imprimir, ha de
buscar el prximo paso, no se le
ofrece claramente la accin siguiente.

Composicin correcta:

El usuario no tiene que buscar la


accin, est justo despus de los
elementos que ha seleccionado, en
parte inferior derecha.

4. Accesibilidad en documentos

Accesibilidad en documentos

Cmo 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, tambin 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

Cmo hacer un documento Word accesible?


PASO 2: TIPOGRAFAS
Es conveniente utilizar tamaos 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 moderacin.
Use tipo de fuentes estndar, con caracteres claros en las
que sea fcil distinguir maysculas de minsculas. Son
recomendables las de la familia Sans Serif (por ejemplo,
Arial, Verdana, etc.) entre otras.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 3: IMGENES
Deben ir posicionadas en lnea 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
pestaa Diseo de pgina > Posicin > En lnea con el
texto.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 3: IMGENES
Deben contener su correspondiente texto alternativo.
Para aadir un texto alternativo a una imagen, hay que
seleccionarla y hacer click con el botn derecho del ratn.
Una vez dentro del men contextual, seleccionar la opcin
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 Descripcin.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 3: IMGENES
Cuando el texto alternativo es una descripcin larga (p.e.
en grficos o esquemas) se recomienda lo siguiente:
1. Incluir la descripcin larga en el texto normal
referenciando la imagen.
2. Insertar un hipervnculo junto a la imagen que enlace con
la descripcin larga situada en otra parte del documento
(p.e. un anexo). Incluir un hipervnculo que lleve de vuelta a
la imagen.
3. Ofrecer un documento universal como un .txt que
incluya todas las descripciones largas de las imgenes.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 4: COLORES
Elegir correctamente la combinacin de colores de
todos los elementos del documento
Combinacin ms accesible: Texto negro sobre un fondo
blanco.
Para comprobar los niveles de contraste, utilizar las
herramientas ya comentadas.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 5: ESTILOS
Dar una estructura lgica al contenido.
Para conseguirlo, hay que definir grupos de contenidos
principales o secciones, y a cada una de estas secciones
asignarle un encabezado o Ttulo1 dentro de estos se
podr definir otra clasificacin de grupo de contenidos de
segundo nivel que sern Ttulo2, y as sucesivamente.
A travs de la pestaa Inicio > Estilos, y a Ttulo1, Ttulo2,
Ttulo3, se le pueden asignar caractersticas diferentes
de presentacin como tamao, color, sangra, etc.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 6: LISTAS NUMERADAS Y NO NUMERADAS
Es conveniente el uso de numeracin y vietas siempre
que queramos representar listas de elementos.
Para marcar un grupo de elementos como lista, accedemos
a la pestaa Inicio > Numeracin en el grupo de opciones
Prrafo.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 7: COLUMNAS
Solo utilizarlas si realmente es necesario, ya que los
usuarios que usan tecnologas de apoyo tienen dificultades
para acceder a la informacin 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 diseada a tal efecto:
Accederemos a esta opcin a travs de la pestaa Diseo
de pgina > Columnas, en el grupo de opciones de
Configurar pgina.

Accesibilidad en documentos

Cmo 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 pgina. Si tenemos que introducir
una tabla de ms de una pgina por que no hay ms
remedio, deberemos repetir las cabeceras de la tabla en
cada pgina y no dividir filas al pasar de pgina.
Para crear una tabla hay que ir a la pestaa Insertar >
Tabla

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 8: HIPERVNCULOS
El propsito de cada hipervnculo o enlace puede ser
determinado por el texto del enlace (ancla), a travs del
texto contextual o bien mediante texto que acompaa al
hipervnculo, siendo la primera la mejor de las opciones.
Se deben evitar enlaces con un texto del tipo Leer ms o
ms informacin, porque el destino del hipervnculo se
podra deducir del contexto, pero puede no ser advertido en
algunos por algunos usuarios.
La opcin Hipervnculo se encuentra en la pestaa Inicio
> Insertar en el grupo de opciones Vnculos

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 9: COMPRENSIN DE LOS TEXTOS

No utilizar estructuras gramaticales complicadas.


Prescindir de prrafos de texto denso.
Marcar el interlineado para distinguir prrafos.
Utilizar listas con vietas para simplificar los prrafos.
Si se utilizan abreviaturas, dar la forma extendida.

Herramientas para detectar problemas de lectura en textos:


Standards-Schmandards y Juicystudio.

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 10: COMPRENSIN DEL DOCUMENTO

Incluir un ttulo al documento.


Paginar.
Utilizar saltos de pgina, y no pasar de pgina con ENTER.
En documentos largos o de gran extensin:

Uso de la herramienta Panel de Navegacin, que permite


comprobar a medida que se va escribiendo, la correcta estructuracin
del documento.
Vista > Panel de navegacin
Incorporar una Tabla de contenidos, pasar la informacin
que nos ofrece el Panel de navegacin como contenido ndice de
nuestro documento.
Referencias > Tabla de contenido

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 11: EVALUACIN DE LA ACCESIBILIDAD
Word 2010 incluye una herramienta de evaluacin
automtica de accesibilidad llamada comprobador de
accesibilidad.
Podremos acceder a ella en pestaa Archivo > Informacin >
Comprobar si hay problemas > Comprobar accesibilidad

Accesibilidad en documentos

Cmo hacer un documento Word accesible?


PASO 12: EXPORTACIN A PDF ACCESIBLE
Un documento Word accesible puede ser guardado en formato
PDF conservando las caractersticas de accesibilidad
incluidas en el propio documento.
Ir a pestaa Archivo, y seleccionar Guardar como
PDF, seleccionar las opcin Incluir informacin no
imprimible. Adems, la opcin Opciones PDF/Texto de mapas
de bits cuando las fuentes no estn incrustadas no debe
estar seleccionada. Por ltimo, dar Aceptar en el men de
Opciones y Publicar en el Guardar como PDF.

Accesibilidad en documentos

Cmo 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 presentacin de PowerPoint, documentos
creados con programas avanzados de maquetacin
(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

Cmo hacer un documento PDF accesible?


PASO 2: TTULO DEL DOCUMENTO
Definir un nombre adecuado al archivo, no ms de 5 palabras
si es posible.
Ir a Archivo > Propiedades
En la pestaa Descripcin rellenar los campos de Ttulo,
Autor y Palabras clave.

Accesibilidad en documentos

Cmo hacer un documento PDF accesible?


PASO 3: IDIOMA
Identificar el idioma principal del documento.
Ir a Archivo > Propiedades
En la pestaa Avanzadas seleccionar el idioma en Opciones de
idioma.

Accesibilidad en documentos

Cmo 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 pestaa Avanzadas >
Accesibilidad > Retocar orden de lectura.
Seleccionamos la totalidad del contenido de la pgina y
hacemos click sobre el botn Fondo. Esto nos permite aislar
imgenes de fondo y otros elementos que puedan interferir en
la accesibilidad.

Accesibilidad en documentos

Cmo hacer un documento PDF accesible?


PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS
Ahora seleccionamos el primer elemento de texto, por ejemplo
el ttulo del documento y hacemos click en el botn
Encabezado 1. Esto indica que es un Ttulo de primer nivel.
Si hubiera imgenes tambin las seleccionamos y las
marcamos como Figura.
Los prrafos 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

Cmo hacer un documento PDF accesible?


PASO 4: ETIQUETADO O MARCADO DE ELEMENTOS
En el cuadro de dilogo Retocar orden de lectura hacemos
click sobre el botn Mostrar panel de orden.
En la pestaa 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> prrafo
<L> lista
<LI> elemento de lista

Accesibilidad en documentos

Cmo 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 operacin, seleccionamos el elemento como
Texto y cambiamos la etiqueta <P> por <LI>.

Accesibilidad en documentos

Cmo hacer un documento PDF accesible?


PASO 5: ENCABEZADOS Y PIES DE PGINA
Si hay pies de pgina o encabezamientos que se repiten en
todas las pginas, la tcnica es marcar ese contenido solo
en la primera pgina.
En el resto del documento se marcar como fondo.

Accesibilidad en documentos

Cmo hacer un documento PDF accesible?


PASO 6: IMGENES
Las imgenes 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 botn derecho
del ratn y en la opcin Propiedades rellenamos el campo
Texto alternativo.
Las que no aportan informacin se marcan como fondo.

Accesibilidad en documentos

Cmo hacer un PPT accesible?


PASO 1: PATRONES
Los patrones son tiles herramientas para fijar tipos de
estructuras y diseos de diapositiva.
Para crear patrones, vamos a la pestaa Vista > Patrn de
diapositivas. Aqu podemos poner fondo a la presentacin, e ir
insertando marcadores de ttulos, fecha, texto, listas o
imgenes.

Accesibilidad en documentos

Cmo 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 pestaa Inicio hacemos click sobre la flecha de Nueva
diapositiva y seleccionamos el patrn que queremos para esa
diapositiva.
Las imgenes deben contener texto alternativo. Para ello
hacemos click sobre la imagen con el botn derecho del ratn
Formato de imagen > Texto alternativo

Accesibilidad en documentos

Cmo 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 pestaa Esquema de la vista normal.

5. Contenido grfico para publicacin


en web

Contenido grfico para publicacin en web

Componentes para accesibilidad web


Contenido: corresponde a la informacin presente en el sitio
web, incluyendo:
Texto, imgenes y sonidos
Etiquetado de las opciones y de los diferentes apartados
Estructura del sitio.
Navegadores web, reproductores multimedia y otros
agentes de usuario.
Tecnologa 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 adaptacin para la utilizacin de la web.

Contenido grfico para publicacin en web

Componentes para accesibilidad web


Desarrolladores diseadores, 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 evaluacin, como validadores de HTML,
validadores de CSS, etc.

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Discapacidad del usuario:

Deficiencias visuales: ceguera, visin reducida y problemas en


visualizacin 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 travs 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,
percepcin, memoria, etc.

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Edad del usuario:
Nios (0-13 aos):
Navegacin sencilla y directa (orientada a objetivos).
Las opciones deben representar elementos familiares para los nios, que
les orienten de manera sencilla y clara sobre su funcin.
Los botones deben tener un tamao mayor que en el caso del diseo
para adultos, ya que la coordinacin motora de los nios es menor.
Los botones deben mostrar un retorno visual cuando el usuario desplaza
el cursor por encima de ellos (rollover).
Los nios no suelen utilizar el scroll, ni interactan con elementos que se
encuentran debajo del rea visible del navegador

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Edad del usuario:
Adolescentes (0-13 aos):
Los adolescentes prestan ms atencin que los adultos a la apariencia
visual de una aplicacin. 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 rpido de la pgina.

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Edad del usuario:
Senior (ms de 65 aos):
Debe evitarse la proximidad de los colores amarillo, azul y verde, ya que
resultan difciles de discriminar para algunos usuarios snior.
Se deben evitar los fondos decorados, ya que interfieren en la lectura.
Los usuarios snior prefieren tamaos de letra relativamente grandes, de
al menos 12 puntos. Los sitios web diseados con fuentes pequeas
deberan permitir aumentar su tamao a gusto del usuario.
Es recomendable utilizar opciones estticas, que no requieran un ajuste
perfecto del puntero.

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Edad del usuario:
Senior (ms de 65 aos):
Los enlaces visitados y los no visitados deben diferenciarse claramente
mediante colores.
Incluir mapas del sitio para mostrar cmo est organizado.
Se recomienda evitar el doble-clic del ratn para activar opciones.
Incluir sistemas de ayuda para los usuarios que utilizan la aplicacin o
visitan el sitio web. Si es posible, tambin es recomendable incluir un
nmero de telfono para quienes prefieran efectuar consultas verbales.
Glosario de trminos.

Contenido grfico para publicacin en web

Limitaciones de acceso a la web


Adems de las limitaciones propias del individuo, existen otras
derivadas de caractersticas del equipo de navegacin o del
entorno ambiental desde donde accede a la web, como por
ejemplo, usuarios que utilicen pantallas pequeas, accedan
desde entornos llenos de humo, su navegador no soporte los
scripts utilizados en nuestra web, etc.
Todo ello muy relacionado tambin con la usabilidad, ya que
cuanto ms fcil de manejar es una web, ms accesible parece
ser.

Contenido grfico para publicacin en web

Contenidos grficos en web


Algunas recomendaciones de accesibilidad:
Imgenes y animaciones: utilizar texto alternativo.
Mapas de imagen: usar el elemento texto para las zonas
activas.
Multimedia: poner subttulos y transcripcin del sonido, y
descripcin del vdeo.
Enlaces de hipertexto: usar expresiones que tengan sentido
ledo fuera de contexto. Por ejemplo, no utilices expresiones
como click aqu.

Contenido grfico para publicacin en web

Contenidos grficos en web


Algunas recomendaciones de accesibilidad:
Organizacin de las pginas: usar encabezados, listas y
estructura consistente, correctamente etiquetados.
Tablas: Facilita la lectura lnea a lnea. Resume los contenidos
en textos comprensibles y sencillos.
Ttulo de la pgina: 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 pgina.

5. Buenas prcticas

Buenas prcticas

Aeropuerto de Amsterdam
El aeropuerto de
Schiphol cuenta con uno
los mejores sistemas de
sealizacin del mundo.

Buenas prcticas

Aeropuerto de Amsterdam

Los colores identifican diferentes tipos de informacin.


Carteles amarillos: informacin sobre llegadas y salidas.
Carteles azules: informacin 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 prcticas

Aeropuerto de Amsterdam
El trabajo incluye rutas de
acceso, sealtica en
parking y edificios .
Las seales se
complementan con mapas,
informacin sobre vuelos,
instrucciones y salidas de
emergencia.

Buenas prcticas

Apsis4all cajeros automticos


http://193.27.9.153:8080/personaemanager/initialservlet

Plan de accesibilidad Renfe


Noticias Fcil

Vous aimerez peut-être aussi