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

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”

Como ingresar el texto alternativo corto

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

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)
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
OJO!

Enfatizar texto: “itálica”
OJO!

Enlaces

Listas: numeradas y sin numerar

Ejemplo de elementos semánticos
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

Ejemplo de elementos semánticos
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
…...
Título 1
Título 2
Título 3
Lista sin numerar
Título 3
Lista numerada
Título 2
Tí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 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 (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

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

Presentación visual
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 (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

Creación de contenido accesible

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (7)

Similar a Creación de contenido accesible

Similar a Creación de contenido accesible (20)

Más de tayzee

Más de tayzee (14)

Último

Último (20)

Creación de contenido accesible