Creación de contenido accesible
Transcript of Creación de contenido accesible
![Page 1: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/1.jpg)
Creación de contenidos accesibles
![Page 2: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/2.jpg)
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
![Page 3: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/3.jpg)
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.
![Page 4: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/4.jpg)
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)
![Page 5: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/5.jpg)
Como ingresar el texto alternativo corto
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
![Page 6: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/6.jpg)
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)
![Page 7: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/7.jpg)
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)
![Page 8: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/8.jpg)
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.
![Page 9: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/9.jpg)
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
![Page 10: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/10.jpg)
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
![Page 11: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/11.jpg)
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
![Page 12: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/12.jpg)
Enlaces
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)
![Page 13: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/13.jpg)
Listas: numeradas y sin numerar
Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)
![Page 14: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/14.jpg)
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)
![Page 15: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/15.jpg)
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…..
![Page 16: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/16.jpg)
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.
![Page 17: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/17.jpg)
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)
![Page 18: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/18.jpg)
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
![Page 19: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/19.jpg)
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)
![Page 20: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/20.jpg)
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)
![Page 21: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/21.jpg)
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)
![Page 22: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/22.jpg)
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
![Page 23: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/23.jpg)
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
![Page 24: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/24.jpg)
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
![Page 25: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/25.jpg)
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>
![Page 26: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/26.jpg)
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
![Page 27: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/27.jpg)
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
![Page 28: Creación de contenido accesible](https://reader031.fdocuments.es/reader031/viewer/2022021801/58ef8ced1a28ab053b8b4593/html5/thumbnails/28.jpg)
Silvia Da Rosa@okactivist
C.C. www.mutuaspalabras.blogspot.com