Accesibilidad Web por principios perceptibles

Accesibilidad Web por
principios
Principio 1: Perceptible

Principio 1: Perceptible
La información y los componentes de la
interfaz de usuario deben ser presentados a
los usuarios de modo que ellos puedan
percibirlos.
• Los usuarios deben ser capaces de percibir la información
presentada (no puede ser invisible a todos sus sentidos)
Pauta 1.1
•Alternativas
textuales
Pauta 1.2
•Medios
tempodependientes
Pauta 1.3
•Adaptable
Pauta 1.4
•Distinguible

1.1 Alternativas textuales
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales
Proporcionar alternativas textuales para todo contenido no
textual de modo que se pueda convertir a otros formatos que las
personas necesiten, tales como textos ampliados, braille, voz,
símbolos o en un lenguaje más simple.
Propósito: asegurar que el contenido no textual esté
también disponible en texto
• “texto” refiere a texto electrónico (no imágenes de texto). Su presentación
es neutral: puede ser presentada de la mejor manera según las
necesidades del usuario.

1.1.1 Contenido no textual (Nivel A)
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual
Personas que no pueden ver una imagen pueden tener
una alternative de texto que se lea usando un lector de
pantalla
Personas que no pueden escuchar un audio pueden
leer la alternative textual
Tener la misma información de dos formas diferentes
ayudará a cualquier persona que tenga dificultades
para comprender un contenido.
Permiten las traducciones más facilmente: otro
idioma, lengua de señas, simplificar el mismo lenguaje
Todo contenido no textual que se presenta al usuario tiene una alternativa
textual que cumple el mismo propósito.

Alternativas textuales cortas
El texto alternativo debe presentar contenido y función, muy raramente es una
descripción.
alt = “Mafalda escuchando música en la radio”
alt = “Imagen 344”
alt = “Ingrese el texto alternativo aquí”
alt = “Mafalda”
alt = “Nena con radio”

Si una descripción corta no es suficiente
<img src="grafico1.gif“
alt = "Variación porcentual en el
incremento de colombianos y
ecuatorianos en España. 1998 - 2007.“
longdesc="grafico1.html" />
Otras opciones:
• Enlace inmediatamente adyacente al contenido no textual
• Descripción larga de texto cerca del contenido no textual, con una referencia a la
ubicación de la descripción larga en la descripción corta

¿Qué descripción le pondría a cada imagen?
• Ítem 1
• Ítem 2
1 2 3
4 5 6

Una posible solución…
• Ítem 1
• Ítem 2
1 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
alt = “3 años de
garantía”
alt= "Introduzca las letras
de la imagen"alt = “”

Excepciones: Controles, Entrada de datos
• Si es un control o acepta datos introducidos
por el usuario, tiene un nombre que describe
su propósito. (Pauta 4.1).
<label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name="busqueda" type="text"
title="Término para la búsqueda" />
input type="submit" value="Buscar" />

Excepciones: Contenido multimedia tempodependiente
• Si es una presentación multimedia con desarrollo temporal, las
alternativas textuales proporcionan al menos una identificación
descriptiva. (Pauta 1.2)
• Ejemplos:
– Una grabación de audio de un discurso. El texto del enlace es "El discurso del Presidente de la
Asamblea“ y hay un enlace a una transcripción del texto inmediatamente después del enlace al clip
de audio.
– Una animación que muestra cómo funciona un motor de coche. Una animación muestra cómo
funciona un motor de automóvil. No hay audio y la animación es parte de un tutorial que describe
cómo funciona un motor. Dado que el texto del tutorial ya proporciona una explicación completa, la
imagen es una alternativa para el texto y el texto alternativo sólo incluye una breve descripción de la
animación y se refiere al texto tutorial para más información.
– Una cámara de tráfico web. Un sitio web permite a los usuarios seleccionar entre una variedad de
cámaras web situadas a lo largo de una gran ciudad. Después se selecciona una cámara, la imagen se
actualiza cada dos minutos. Un breve texto alternativo identifica la cámara Web como "cámara de
Web del tráfico." El sitio también ofrece una tabla de tiempos de recorrido para cada una de las
rutas cubiertas por las cámaras web. En el cuadro también se actualiza cada dos minutos.

Excepciones: pruebas, sensorial
• Pruebas:
– Si es una prueba o un ejercicio que no sería
válido si se presentara en forma de texto,
entonces se proporciona al menos una
identificación descriptiva.
• Por ejemplo, una prueba de audición, una
prueba de ortografía.
• Sensorial:
– Si el objetivo principal el crear una
experiencia sensorial específica, entonces se
proporciona al menos una identificación
descriptiva.
• Por ejemplo un concierto sinfónico, obras
de arte visual, etc.

Excepciones: CAPTCHA
• Si el propósito es confirmar que quien está accediendo al
contenido es una persona y no una computadora, entonces:
– se proporcionan alternativas textuales que identifican y describen el
propósito
– se proporcionan formas alternativas de CAPTCHA
• Recomendaciones adicionales
– Más de dos modalidades de CAPTCHAs (¿captchas lógicos?)
– Acceso a Atención al Cliente humano
– No requerir CAPTCHAs para usuarios autorizados

Excepciones: Decoración, formato, invisible
• Si es simple decoración, se utiliza únicamente
para definir el formato visual o no se presenta a
los usuarios, entonces se implementa de forma
que pueda ser ignorado por las ayudas técnicas.
• Imágenes decorativas: no aportan
información
• Incluirlas mediante la hoja de estilos
• Si no es posible, usar texto alternativo
vacío (alt=””) y no usar title
• Ejemplo: imágenes empleadas como
viñetas

1.2 Medios Tempodependientes
Perceptible | Operable | Comprensible | Robusto >> 1.2 Medios Tempodependientes
Proporcionar alternativas para los medios
tempodependientes.
Propósito: proporcionar acceso a los multimedios tempodependientes y
sincronizados. Esto incluye a medios que son:
• sólo audio (sin vídeo y sin interacción)
• sólo vídeo (sin sonidos (audio) ni interacción)
• audio y vídeo
• audio y/o video combinado con interacción

Alternativas para multimedia (1)
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
• Transcripción textual: Documento que incluye una secuencia correcta de
descripciones textuales de la información visual y auditiva tempodependiente,
y que proporciona los medios para lograr los resultados de cualquier
interacción basada en el tiempo.
• Subtítulos: Alternativa visual y/o alternativa textual, sincronizada, para la
información sonora necesaria para comprender el contenido multimedia, que
puede ser tanto hablada como no hablada.
• Los subtítulos para sordos incluyen equivalentes para la información sonora que no es diálogo y
es necesaria para comprender el contenido del programa, incluyendo efectos sonoros, música,
risas, identificación del hablante y localización.
• Los subtítulos ocultos o codificados ("closed captions") pueden activarse o desactivarse en
algunos reproductores.
• Los subtítulos abiertos son cualquier subtítulo que no se puede desactivar u ocultar.
• No deberían ocultar u obstaculizar la percepción de la información relevante de la pista de
vídeo.

Transcripción textual
[Sonido de calle]
[Entra música]
En la calle casi todas las personas van en silla de ruedas. Una chica que
no usa silla de ruedas entra en un banco.
La chica dice: Buenos días, querría abrir una cuenta.
El empleado le habla en lengua de signos. La chica sonríe
desconcertada, porque no entiende nada.
Vuelve a verse la calle y está lloviendo. Varias personas en sillas de
rueda suben y bajan por ella sin problemas, un hombre que camina, se
escurre por la lluvia.
[ … ]

Alternativas para multimedia (2)
• Audiodescripción: narración agregada a la pista de sonido para describir los
detalles visuales importantes que no se pueden entender sólo con la banda de
sonido principal.
• Proporciona información sobre las acciones, personajes, cambios de escena, textos
que aparecen en pantalla y otros contenidos visuales.
• Se añade durante las pausas existentes en el diálogo.
• Cuando toda la información sobre el vídeo ya se proporciona en el audio de la
presentación, no es necesaria ninguna audiodescripción adicional.
• Audiodescripción ampliada: se agrega a una presentación audiovisual
poniendo en pausa el vídeo, de manera que haya tiempo suficiente para
agregar una descripción adicional.
• Se emplea sólo cuando el sentido del vídeo se perdería sin el añadido de una
audiodescripción y las pausas entre el diálogo o la narración son demasiado cortas.
• Interpretación en lengua de señas

Resumen
A AA AAA
Grabado En directo Grabado En directo Grabado En directo
Solo audio
Transcripción
textual
- - - -
Transcripción
textual
Solo vídeo
Transcripción
textual o
Alternativa en
audio
- - -
Transcripción
textual
-
Multimedia
sincronizado
Subtítulos
+
Transcripción
textual o
Audiodescripción
-
Audiodescripció
n
Subtítulos
Interpretación
en lengua de
señas
+
Audiodescripció
n ampliada
+
Transcripción
textual
-
Fuente: http://olgacarreras.blogspot.com.es/2012/08/tabla-resumen-de-los-requisitos-de.html

1.3 Adaptable
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable
Crear contenido que pueda presentarse de diferentes
formas (por ejemplo, con una disposición más simple)
sin perder información o estructura.
Propósito: asegurar que toda la información está disponible en
una forma que pueda ser percibida por todos los usuarios.
• Si toda la información está disponible en una forma que puede
ser determinado por el software, entonces se puede presentar
a los usuarios en diferentes formas (visual, audible, tacto, etc.)

1.3.1 Información y Relaciones (Nivel A)
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones
Personas que no pueden ver, pueden
transformar el contenido a voz o braille
Permite que cualquier persona pueda
adaptar los contenidos a sus
necesidades y preferencias
La información, estructura y relaciones comunicadas a través de la presentación
pueden ser determinadas por software o están disponibles como texto.

Técnicas
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
El contenido debe poder
presentarse de diferentes
formas sin perder información o
estructura:
• Audio mediante un lector
de pantalla
• Braille por medio de una
línea braille
• Sin hoja de estilos
• Sólo texto…
Separar contenido y estructura de presentación, y usar elementos semánticos
para estructurar el contenido.
Ejercicio
www.zengarden.com

Marcar estructura con elementos
semánticos
• Usar <h1> - <h6> para encabezados.
• Marcar los párrafos con <p>
• Usar <ul>, <ol> y <dl> para las listas
• Marcar los encabezados en las tablas de datos (<th>) y relacionarlos con
las celdas de datos (<td>)
Y no usarlos solamente por su presentación visual!

Ejemplo de elementos semánticos
<h1>Recetas de cocina</h1>
<h2>Pascualina</h2>
<h3>Ingredientes</h3>
<ul>
<li>Masa</li>
<li>Acelga</li>
</ul>
<h3>Preparación</h3>
<ol>
<li>Poner la masa en la asadera.</li>
<li>Poner la acelga.</li>
<li>Llevar al horno.</li>
</ol>
<h2>Tarta de zapallitos</h2>
<h3>Ingredientes</h3>
Recetas de cocina
Pascualina
Ingredientes
•Masa
•Acelga
Preparación
1. Poner la masa en la asadera.
2. Poner la acelga.
3. Llevar al horno.
Tarta de zapallitos
Ingredientes
Nuestro contenido En HTML

Marcar texto especial con elementos
semánticos
• Usar <em> y <strong> para el texto enfatizado
• Usar <q> para las citas cortas en línea (frases dentro de otro párrafo)
• Usar <blockquote> para las citas largas en bloques de texto (párrafos).
• Usar <cite> para identificar las referencias
• Usar <abbr> para abreviaturas y <acronym> para acrónimos
• Usar <a> para enlaces
Y no usarlos solamente por su presentación visual!

Ejemplos para marcar texto especial
La accesibilidad web beneficia además a las personas
sin discapacidad.
Ejemplo 1
Ejemplo 2
En su discurso, Tabárez recordó que el éxito “no son sólo los
resultados sino las dificultades que se pasan para alcanzarlo”.
<p>
La accesibilidad web <strong>beneficia</strong> además a las personas
<em>sin</em> discapacidad.
</p>
<p>
En su discurso, Tabárez recordó que el éxito <q>no son sólo los
resultados sino las dificultades que se pasan para alcanzarlo</q>.
</p>

Ejemplos para marcar texto especial
Ejemplo 3
Extracto del libro El Quijote de Miguel de Cervantes:
En un lugar de la mancha, de cuyo nombre no quiero acordarme…
<p>
Extracto del libro <cite>El Quijote</cite> de Miguel de Cervantes:
</p>
<blockquote cite="http://www.elquijote.com/cap1">
<p>
En un lugar de la mancha, de cuyo nombre no quiero acordarme...
</p>
</blockquote>

Ejemplos
• Un formulario con los campos requeridos
– Un formulario contiene varios campos requeridos. Las etiquetas de los campos obligatorios aparecen en rojo. Además, al final
de cada etiqueta es un carácter de asterisco, *. Las instrucciones para completar el formulario indican que "todos los campos
obligatorios aparecen en rojo y marcados con un asterisco *", seguido de un ejemplo.
• Un formulario que utiliza el color y el texto para indicar los campos obligatorios
– Un formulario contiene ambos campos obligatorios y opcionales. Instrucciones en la parte superior de la forma de explicar
que los campos requeridos están marcados con el texto en rojo y también con un icono cuyo texto alternativo dice:
"Requerido". Tanto el texto rojo y el icono se mediante programación asociados con los campos de formulario adecuados
para que los usuarios de tecnología de asistencia pueden determinar los campos obligatorios.
• Una tabla de horarios de autobuses, donde los encabezados para cada celda se pueden determinar mediante
programación
– Un horario de autobús consiste en una mesa con las paradas de autobús listadas verticalmente en la primera columna y los
diferentes autobuses que figuran horizontalmente a través de la primera fila. Cada celda contiene el momento en que el
autobús estará en esa parada de autobús. Las células de las paradas de autobús y autobús son identificados como los
encabezados por su correspondiente fila o columna para que la tecnología de asistencia puede determinar mediante
programación qué autobús y parada de autobús que se asocian con el tiempo en cada celda.
• Una forma en que las etiquetas de las casillas de verificación se pueden determinar mediante programación
– En un formulario, las etiquetas para cada casilla de verificación se pueden determinar mediante programación por las ayudas
técnicas.
• Un documento de texto
– Un documento de texto simple está formateado con líneas en blanco antes de dobles títulos, asteriscos para indicar los
elementos de lista y otras convenciones de formato estándar, por lo que su estructura se puede determinar mediante
programación.

1.3.2 Secuencia significativa (Nivel A)
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.2 Secuencia Significativa
Personas que usan tecnología de asistencia
podrán accede al contenido en el orden
correcto.
Cualquier persona que deba o quiera leer el
contenido sin estilos, o sin usar alguna
tecnología específica podrá hacerlo sin
problemas.
Cuando la secuencia en que se presenta el contenido afecta a su significado, se
puede determinar por software la secuencia correcta de lectura.

Técnicas
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.2 Secuencia Significativa
• Posicionar el contenido usando la estructura
HTML y no modificar el orden de lectura
usando CSS
• Asegurarse que las tablas se leen
correctamente al ser linealizadas

1.3.3 Características sensoriales (Nivel A)
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.3 Características sensoriales
Personas ciegas o con baja visión no
podrán distinguir formas y colores
para identificar el contenido
Las instrucciones proporcionadas para entender y operar el contenido no
dependen exclusivamente en las características sensoriales de los componentes
como su forma, tamaño, ubicación visual, orientación o sonido.

Ejemplos de fallos
• “Para ir a la página siguiente, presione el
botón de la derecha”
• “Para terminar, presione el botón redondo”

1.4 Distinguible
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible
Facilitar a los usuarios ver y oír el contenido,
incluyendo la separación entre el primer plano y el
fondo.
Propósito: que la presentación "por defecto" sea fácil de
percibir. Lo principal es que sea fácil diferenciar la información
de primer plano de la de segundo plano.

1.4.1 Uso del Color (Nivel A)
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.1 Uso del color
El color no se usa como único medio visual para transmitir la información, indicar
una acción, solicitar una respuesta o distinguir un elemento visual.
Personas con limitaciones visuales pueden tener limitaciones
para visualizar los colores, esto incluye a personas de edad
avanzada. Personas con limitaciones para visualizar colores y
aquellas que usan dispositivos braille.
Usuarios de pantallas de solo texto, con paleta de colores
limitada o monocromo.

Por ejemplo:
•“Los campos marcados en rojo son
obligatorios.”
•“Por favor revisa los campos obligatorios
marcados en rojo.”
Cual es un enlace?
Uso del color
No usar el color como único medio de transmitir información.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Adaptable >> 1.4.1 Uso del color

1.4.2 Control del audio (Nivel A)
Si el audio de una página web suena automáticamente durante más de 3
segundos, se proporciona ya sea un mecanismo para pausar o detener el audio, o
un mecanismo para controlar el volumen del sonido que es independiente del
nivel de volumen global del sistema.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.2 Control del audio
Usuarios de lector de pantalla tendrán
dificultades con sonidos que interfieran
con la voz del lector
Usuarios que tengan dificultades para
concentrarse en la lectura del texto al
mismo tiempo que escucha otro sonido.

1.4.3 Contraste (mínimo) (Nivel AA)
La presentación visual de texto e imágenes de texto
tiene una relación de contraste de, al menos, 4.5:1
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste
Personas con baja visión tienen
dificultades para leer texto que no
contraste con el fondo. También personas
que tengan dificultades para visualizar
colores.
Puede resultar cansador para cualquier
persona leer textos con poco contraste
1.4.6 Contraste (mejorado)
(Nivel AAA): La presentación
visual de texto e imágenes de texto
tiene una relación de contraste
de, al menos, 7:1

Excepciones
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste
• Textos grandes:
– Los textos de gran tamaño y las imágenes de texto de gran
tamaño tienen una relación de contraste de, al menos, 3:1.
• Incidental:
– Los textos o imágenes de texto que forman parte de un
componente inactivo de la interfaz de usuario, que son
simple decoración, que no resultan visibles para nadie o
forman parte de una imagen que contiene otros elementos
visuales significativos, no tienen requisitos de contraste.
• Logotipos:
– El texto que forma parte de un logo o nombre de marca no
tiene requisitos de contraste mínimo

Contraste suficiente
Debe existir un contraste suficiente entre color de fondo y de letra.

2/09/1
Verificar Contraste
• Simular discapacidades visuales:
http://colorfilter.wickline.org/
Ejemplo:
http://www.distancia.edu.uy/
• Herramienta para verificar contraste:
http://www.paciellogoup.com/resources/contrast-
analyser.html
Ejemplo 3
Filtro de color

1.4.4 Cambio de tamaño del texto (Nivel AA)
A excepción de los subtítulos y las imágenes de texto, todo el texto puede ser
ajustado sin ayudas técnicas hasta un 200 por ciento sin que se pierdan el
contenido o la funcionalidad.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.4 Cambio de tamaño del texto
Personas con baja
visión
Otros dispositivos

2/09/1
Formato y tamaño de los textos
• Utilizar tamaños relativos (em, %)
Permitir aumentar hasta un 200% el texto
sin desarmar la estructura
sin scroll horizontal para leer una línea de texto.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.4 Cambio de tamaño del texto

Silvia Da Rosa
@okactivist
C.C. www.mutuaspalabras.blogspot.com

1.4.5 Imágenes de texto (Nivel AA)
Si con las tecnologías que se están utilizando se puede conseguir la presentación
visual deseada, se utiliza texto para transmitir la información en vez de imágenes
de texto, excepto en los siguientes casos:
• Configurable: La imagen de texto es visualmente configurable según los requisitos del usuario.
• Esencial: Una forma particular de presentación del texto resulta esencial para la información que
se transmite. Los logotipos (textos que son parte de un logo o de un nombre de marca) se
consideran esenciales..
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
Personas con baja visión (que puede tener problemas
para leer el texto con la familia de la fuente, el tamaño y
/ o color de autor).
Las personas con discapacidades cognitivas que afectan
a la lectura
Cualquier persona que pueda tener dificultades para
leer el texto con con el interlineado autor y / o
alineación
1.4.9 Imágenes de texto (sin
excepciones) (Nivel AAA):
sólo se utilizan como simple
decoración o cuando una forma de
presentación particular del texto
resulta esencial para la información
transmitida. (Nivel AAA)

1.4.7 Sonido de fondo bajo o ausente (Nivel AAA)
Para el contenido de sólo audio grabado que
(1) contiene habla en primer plano,
(2) no es un CAPTCHA sonoro o un audiologo, y
(3) que no es una vocalización cuya intención principal es servir como expresión musical (como el
canto o el rap),
se cumple al menos uno de los siguientes casos:
• Ningún sonido de fondo: El audio no contiene sonidos de fondo.
• Apagar: Los sonidos de fondo pueden ser apagados.
• 20 dB: Los sonidos de fondo son, al menos, 20 decibelios más bajos que el discurso en
primer plano, con la excepción de sonidos ocasionales que duran solamente uno o dos
segundos.
• Nota: Por la definición de "decibelio", el sonido de fondo que cumple con este requisito es
aproximadamente cuatro veces más silencioso que la locución principal.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.7 Sonido de fondo
Personas condificultades auditivas tienen
dificultades para separar el audio principal
de sonidos de fondo

1.4.8 Presentación visual (Nivel AAA)
En la presentación visual de bloques de texto, se proporciona algún mecanismo para
lograr lo siguiente:
• Los colores de fondo y primer plano pueden ser elegidos por el usuario.
• El ancho no es mayor de 80 caracteres o signos (40 si es CJK).
• El texto no está justificado (alineado a los márgenes izquierdo y derecho a la vez).
• El espacio entre líneas (interlineado) es de, al menos, un espacio y medio dentro de los
párrafos y el espacio entre párrafos es, al menos, 1.5 veces mayor que el espacio entre
líneas.
• El texto se ajusta sin ayudas técnicas hasta un 200 por ciento de modo tal que no requiere
un desplazamiento horizontal para leer una línea de texto en una ventana a pantalla
completa.
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.8 Presentación visual
Personas con dificultades cognitivas pueden leer mejor cuando
seleccionan sus propias combinaciones de fondo y letra, pueden
encontrar más facilmente cuando los bloques de texto son angostos,
pueden configurar el espacio entre lineas y párrafos y el espaciado es
regular.
Facilita a todos la lectura

Accesibilidad Web por principios perceptibles

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Accesibilidad Web por principios perceptibles

Similar to Accesibilidad Web por principios perceptibles (20)

More from tayzee

More from tayzee (15)

Recently uploaded

Recently uploaded (20)

Accesibilidad Web por principios perceptibles