creación de contenido accesible

Creación de contenidos accesibles

Agenda

• Introducción a los requisitos de accesibilidad para hacer que el contenido web sea legible y comprensible

• Introducción a otras funciones de accesibilidad importantes para el contenido:

–Describir el propósito de las imágenes usando alt-text

–Organización de páginas

–Presentación visual del texto (por ejemplo, colores, tamaño, espaciado, etc.)

• Ejercicio práctico de contenido accesible, por ejemplo uno de los siguientes:

–Reescribir el material para hacerlo más legible y comprensible

–Organización / estructuración del contenido de la página

–Escribir texto alternativo apropiado para una variedad de imágenes diferentes en diferentes contextos

–Mejorar la presentación visual de la página

• Requisitos adicionales para preparar contenido accesible

Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

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”

Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

Como ingresar el texto alternativo corto

Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)

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.

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

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

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

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

Encabezados y etiquetas describen el tema o propósito

Perceptible | Operable | Comprensible | Robusto >> 2.4 Navegable >> Encabezado y etiquetas (AA)

Usar encabezados.

2.4.10 Encabezados de sección (Nivel AAA): Se usan encabezados de sección para organizar el contenido.

Encabezados (títulos)

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

OJO!● En general el título de la nota es un título 1● No usar estos elementos solo por su imagen visual, respetar el significado

Título 1

Resaltar texto: negrita

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

OJO!● No usar estos elementos solo por su imagen visual, respetar el significado

Enfatizar texto: “itálica”

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

OJO!● No usar estos elementos solo por su imagen visual, respetar el significado

Enlaces

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

Listas: numeradas y sin numerar

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

Ejemplo de elementos semánticos

Recetas de cocina

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

Tarta de zapallitosIngredientes

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

Ejemplo de elementos semánticos

Recetas de cocina

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

Tarta de zapallitosIngredientes…...

Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)

Título 1

Título 2Título 3Lista sin numerar

Título 3Lista numerada

Título 2Título 3…..

Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.1 Uso del color (A)

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 (A)

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 (mínimo) (AA)

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

• 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

Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste (mínimo) (AA)

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

Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste (mínimo) (AA)

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

Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste (mínimo) (AA)

Presentación visualEn 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 (AA)

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

Propósito de los enlaces

Perceptible | Operable | Comprensible | Robusto >> 2.4 Navegable >> Propósito de enlaces (en contexto) (A)

• El propósito de cada enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general.

2.4.9 Propósito de los enlaces (sólo enlaces) (Nivel AAA): Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general.

Click aquíLeer más

Palabras inusuales

Usuarios de magnificadores que pueden perder el contexto

Personas con dificultades para comprender palabras y frases

Se proporciona un mecanismo para identificar las definiciones específicas de palabras o frases usadas de modo inusual o restringido, incluyendo expresiones idiomáticas y jerga.

Perceptible | Operable | Comprensible | Robusto >> 3.1 Legible >> 3.1.3 Palabras inusuales (AAA)

• Incluir en el texto la definición• Incluir un glosario• Incluir la definición al final de la página, con un enlace interno desde la palabra

Abreviaturas Se proporciona un mecanismo para identificar la forma expandida o el significado de las abreviaturas.

Perceptible | Operable | Comprensible | Robusto >> 3.1 Legible >> 3.1.4 Abreviaturas (AAA)

Usuarios de magnificadores que pueden perder el contexto

Personas con dificultades para comprender palabras y frases, con limitaciones de memoria

<acronym title="World Wide Web Consortium" xml:lang="en">W3C</acronym>

Nivel de lectura

Útil para todas las personas

Cuando un texto requiere un nivel de lectura más avanzado que el nivel mínimo de educación secundaria una vez que se han eliminado nombres propios y títulos, se proporciona un contenido suplementario o una versión que no requiere un nivel de lectura mayor a ese nivel educativo.

Perceptible | Operable | Comprensible | Robusto >> 3.1 Legible >> 3.1.5 Nivel de lectura (AAA)

• Ilustraciones que ayuden a explicar• Resumen• texto fácil de leer: texto corto, párrafos cortos

Resumen

• 1.1.1 Non-text Content• 1.3.1 Info and Relationships• 1.4.1 Use of Color• 1.4.3 Contrast (Minimum)• 2.4.4 Link Purpose (In Context)• 2.4.6 Headings and Labels• 1.4.8 Visual Presentation• 2.4.10 Section Headings• 3.1.3 Unusual Words• 3.1.4 Abbreviations• 3.1.5 Reading Level

Silvia Da Rosa@okactivist

C.C. www.mutuaspalabras.blogspot.com