Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creación de contenido accesible

132 views

Published on

Cómo crear contenidos accesibles.
Orientado a editores de contenido

Published in: Education
  • Visit Here to Download eBook === http://ebookdfsrewsa.justdied.com/B07H8RHPTH-la-historia-de-pascualina.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Creación de contenido accesible

  1. 1. Creación de contenidos accesibles
  2. 2. 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
  3. 3. 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.
  4. 4. 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)
  5. 5. Como ingresar el texto alternativo corto Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  6. 6. 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)
  7. 7. 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)
  8. 8. 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.
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Enlaces Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)
  13. 13. Listas: numeradas y sin numerar Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)
  14. 14. 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 Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A)
  15. 15. 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 …... Perceptible | Operable | Comprensible | Robusto >> 1.3 Adaptable >> 1.3.1 Información y relaciones (A) Título 1 Título 2 Título 3 Lista sin numerar Título 3 Lista numerada Título 2 Título 3 …..
  16. 16. 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.
  17. 17. 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)
  18. 18. 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
  19. 19. 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)
  20. 20. Contraste suficiente Debe 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)
  21. 21. 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 Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.3 Contraste (mínimo) (AA)
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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>
  26. 26. 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
  27. 27. 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
  28. 28. Silvia Da Rosa @okactivist C.C. www.mutuaspalabras.blogspot.com

×