Accesibilidad web por principios - Principio 1: Perceptible

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ídeoTranscripción

textual o Alternativa en

audio- - - Transcripción

textual -

Multimedia sincronizad

o

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

PascualinaIngredientes•Masa•AcelgaPreparación1. Poner la masa en la asadera.2. Poner la acelga.3. Llevar al horno.

Tarta de zapallitosIngredientes

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 colorNo 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 suficienteDebe existir un contraste suficiente entre color de fondo y de letra.


2/09/10

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/10

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 - Principio 1: Perceptible

Education

Transcript of Accesibilidad web por principios - Principio 1: Perceptible