SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Imágenes accesibles
Agenda
• Introducción a los diferentes tipos de imágenes y contextos
• Acceso a datos y descripciones más largas de diagramas,
gráficos, fotografías, etc.
• Uso de CSS para incluir imágenes decorativas y de formato
• Imágenes de texto
• Ejercicio práctico práctico, por ejemplo para mejorar la
accesibilidad de algunas páginas de gran tamaño
• Introducción a temas adicionales relacionados con la imagen,
como experiencias sensoriales y uso de CAPTCHA
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)
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
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
¿Qué descripción le pondría a cada imagen?
• Ítem 1
• Ítem 2
1 2 3
4 5 6
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
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= "I???"
alt = “”
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
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.
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
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
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
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
Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
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)
Imágenes de texto
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
• Las imágenes que transmiten información textual
tienen un texto alternativo que proporciona la
misma información textual.
Imágenes de texto
alt = “inc” alt = “Brasil 2014”
Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
Trencito: imágenes
• Texto alternativo: texto que transmite la
misma información que la imagen
• Descripción larga: si la imagen es compleja,
por ejemplo una gráfica y necesita una
descripción demasiado larga para un
alternativo
Obligatorio!
Solo si
necesario
<img
src=“dirección de la imagen”
alt=“texto alternativo”
>
Trencito: casos particulares de imágenes
• Decorativa y no aporta información
– Texto alternativo vacío
• Enlace
– Describir a dónde dirige, en vez de la imagen
– No es necesario decir “enlace a..” (el lector avisa)
• Imagen de texto
– Escribir lo que dice el texto
Imágenes en enlaces
Imágenes en enlaces
• Las imágenes que funcionan como enlaces tienen un texto
alternativo que describe el destino del enlace y no la imagen.
alt=“Icono de una casa",
alt=“Sobre",
alt=“Impresora"
alt=“Signo de interrogación";
alt="Página principal del sitio",
alt="Contacto“
alt="Versión imprimible"
alt="Ayuda".
Resumen
From Understanding WCAG 2.0:
1.1.1 Non-text Content
1.4.9 Images of Text (No Exception)
From Techniques for WCAG 2.0:
C9: Using CSS to include decorative images
Silvia Da Rosa
@okactivist
C.C. www.mutuaspalabras.blogspot.com

Weitere ähnliche Inhalte

Andere mochten auch

1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad webtayzee
 
7 wcag2.0 para comunicadores - Accesibilidad parte 3
7   wcag2.0 para comunicadores - Accesibilidad parte 37   wcag2.0 para comunicadores - Accesibilidad parte 3
7 wcag2.0 para comunicadores - Accesibilidad parte 3tayzee
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad webtayzee
 
Estándares Web. Algunos "axiomas".
Estándares Web. Algunos "axiomas".Estándares Web. Algunos "axiomas".
Estándares Web. Algunos "axiomas".tayzee
 
Una introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadoresUna introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadorestayzee
 
Congreso latinoamericano de ciegos tic y diseño universal
Congreso latinoamericano de ciegos  tic y diseño universalCongreso latinoamericano de ciegos  tic y diseño universal
Congreso latinoamericano de ciegos tic y diseño universaltayzee
 

Andere mochten auch (7)

1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web1.2 Componentes de la accesibilidad web
1.2 Componentes de la accesibilidad web
 
7 wcag2.0 para comunicadores - Accesibilidad parte 3
7   wcag2.0 para comunicadores - Accesibilidad parte 37   wcag2.0 para comunicadores - Accesibilidad parte 3
7 wcag2.0 para comunicadores - Accesibilidad parte 3
 
HCI
HCIHCI
HCI
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad web
 
Estándares Web. Algunos "axiomas".
Estándares Web. Algunos "axiomas".Estándares Web. Algunos "axiomas".
Estándares Web. Algunos "axiomas".
 
Una introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadoresUna introducción a la accesibilidad para comunicadores
Una introducción a la accesibilidad para comunicadores
 
Congreso latinoamericano de ciegos tic y diseño universal
Congreso latinoamericano de ciegos  tic y diseño universalCongreso latinoamericano de ciegos  tic y diseño universal
Congreso latinoamericano de ciegos tic y diseño universal
 

Ähnlich wie Imagenes accesibles

Video 3 accesibilidad en los documentos
Video 3 accesibilidad en los documentosVideo 3 accesibilidad en los documentos
Video 3 accesibilidad en los documentosTelescopio de Galileo
 
Las presentaciones visuales
Las presentaciones visuales Las presentaciones visuales
Las presentaciones visuales Florencia Brol
 
Presentaciones visuales
Presentaciones visuales Presentaciones visuales
Presentaciones visuales Vivi Boriani
 
Presentaciones Visuales
Presentaciones VisualesPresentaciones Visuales
Presentaciones VisualesVivi Boriani
 
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...oscar751007
 
Pautas elaboracion power_point
Pautas elaboracion power_pointPautas elaboracion power_point
Pautas elaboracion power_pointgus1710
 

Ähnlich wie Imagenes accesibles (7)

Video 3 accesibilidad en los documentos
Video 3 accesibilidad en los documentosVideo 3 accesibilidad en los documentos
Video 3 accesibilidad en los documentos
 
Las presentaciones visuales
Las presentaciones visuales Las presentaciones visuales
Las presentaciones visuales
 
Presentaciones visuales
Presentaciones visuales Presentaciones visuales
Presentaciones visuales
 
Presentaciones Visuales
Presentaciones VisualesPresentaciones Visuales
Presentaciones Visuales
 
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...
Criterios y recomendaciones técnicas y de diseño gráfico para producción y ev...
 
Power point
Power pointPower point
Power point
 
Pautas elaboracion power_point
Pautas elaboracion power_pointPautas elaboracion power_point
Pautas elaboracion power_point
 

Mehr von tayzee

Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0tayzee
 
Documentos accesibles (word, ppt, pdf)
Documentos accesibles  (word, ppt, pdf)Documentos accesibles  (word, ppt, pdf)
Documentos accesibles (word, ppt, pdf)tayzee
 
4 introducción a wcag2.0
4   introducción a wcag2.04   introducción a wcag2.0
4 introducción a wcag2.0tayzee
 
Beneficios accesibilidad
Beneficios accesibilidadBeneficios accesibilidad
Beneficios accesibilidadtayzee
 
2 diseño universal
2   diseño universal2   diseño universal
2 diseño universaltayzee
 
1) introducción
1)  introducción1)  introducción
1) introduccióntayzee
 
Costos de la accesibilidad
Costos de la accesibilidadCostos de la accesibilidad
Costos de la accesibilidadtayzee
 
Evaluación de accesibilidad web
Evaluación de accesibilidad webEvaluación de accesibilidad web
Evaluación de accesibilidad webtayzee
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad webtayzee
 
Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)tayzee
 
Para que te encuentren
Para que te encuentrenPara que te encuentren
Para que te encuentrentayzee
 
Evaluacion de accesibilidad
Evaluacion de accesibilidadEvaluacion de accesibilidad
Evaluacion de accesibilidadtayzee
 
Introducción a la evaluación de accesibilidad
Introducción a la evaluación de accesibilidadIntroducción a la evaluación de accesibilidad
Introducción a la evaluación de accesibilidadtayzee
 
Accesibilidad y HTML para editores
Accesibilidad y HTML para editoresAccesibilidad y HTML para editores
Accesibilidad y HTML para editorestayzee
 
Accesibilidad - Introducción
Accesibilidad  - IntroducciónAccesibilidad  - Introducción
Accesibilidad - Introduccióntayzee
 
Entregables de la AI
Entregables de la AIEntregables de la AI
Entregables de la AItayzee
 

Mehr von tayzee (16)

Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0Checklist accesibilidad wcag 2.0
Checklist accesibilidad wcag 2.0
 
Documentos accesibles (word, ppt, pdf)
Documentos accesibles  (word, ppt, pdf)Documentos accesibles  (word, ppt, pdf)
Documentos accesibles (word, ppt, pdf)
 
4 introducción a wcag2.0
4   introducción a wcag2.04   introducción a wcag2.0
4 introducción a wcag2.0
 
Beneficios accesibilidad
Beneficios accesibilidadBeneficios accesibilidad
Beneficios accesibilidad
 
2 diseño universal
2   diseño universal2   diseño universal
2 diseño universal
 
1) introducción
1)  introducción1)  introducción
1) introducción
 
Costos de la accesibilidad
Costos de la accesibilidadCostos de la accesibilidad
Costos de la accesibilidad
 
Evaluación de accesibilidad web
Evaluación de accesibilidad webEvaluación de accesibilidad web
Evaluación de accesibilidad web
 
Introducción a la accesibilidad web
Introducción a la accesibilidad webIntroducción a la accesibilidad web
Introducción a la accesibilidad web
 
Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)Accesibilidad Web (Una introducción de 3 horas)
Accesibilidad Web (Una introducción de 3 horas)
 
Para que te encuentren
Para que te encuentrenPara que te encuentren
Para que te encuentren
 
Evaluacion de accesibilidad
Evaluacion de accesibilidadEvaluacion de accesibilidad
Evaluacion de accesibilidad
 
Introducción a la evaluación de accesibilidad
Introducción a la evaluación de accesibilidadIntroducción a la evaluación de accesibilidad
Introducción a la evaluación de accesibilidad
 
Accesibilidad y HTML para editores
Accesibilidad y HTML para editoresAccesibilidad y HTML para editores
Accesibilidad y HTML para editores
 
Accesibilidad - Introducción
Accesibilidad  - IntroducciónAccesibilidad  - Introducción
Accesibilidad - Introducción
 
Entregables de la AI
Entregables de la AIEntregables de la AI
Entregables de la AI
 

Kürzlich hochgeladen

SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.JonathanCovena1
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaAlejandraFelizDidier
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxpvtablets2023
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfpatriciaines1993
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOPsicoterapia Holística
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxYadi Campos
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxlclcarmen
 

Kürzlich hochgeladen (20)

Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundaria
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptxSEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
SEXTO SEGUNDO PERIODO EMPRENDIMIENTO.pptx
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 

Imagenes accesibles

  • 2. Agenda • Introducción a los diferentes tipos de imágenes y contextos • Acceso a datos y descripciones más largas de diagramas, gráficos, fotografías, etc. • Uso de CSS para incluir imágenes decorativas y de formato • Imágenes de texto • Ejercicio práctico práctico, por ejemplo para mejorar la accesibilidad de algunas páginas de gran tamaño • Introducción a temas adicionales relacionados con la imagen, como experiencias sensoriales y uso de CAPTCHA
  • 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. 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. 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 Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 6. ¿Qué descripción le pondría a cada imagen? • Ítem 1 • Ítem 2 1 2 3 4 5 6 Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 7. 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= "I???" alt = “” Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 8. 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. Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 9. 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 Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 10. 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 Perceptible | Operable | Comprensible | Robusto >> 1.1 Alternativas textuales >> 1.1.1 Contenido no textual (A)
  • 11. 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)
  • 12. Imágenes de texto Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
  • 13. • Las imágenes que transmiten información textual tienen un texto alternativo que proporciona la misma información textual. Imágenes de texto alt = “inc” alt = “Brasil 2014” Perceptible | Operable | Comprensible | Robusto >> 1.4 Distinguible >> 1.4.5 Imágenes de texto
  • 14. Trencito: imágenes • Texto alternativo: texto que transmite la misma información que la imagen • Descripción larga: si la imagen es compleja, por ejemplo una gráfica y necesita una descripción demasiado larga para un alternativo Obligatorio! Solo si necesario <img src=“dirección de la imagen” alt=“texto alternativo” >
  • 15. Trencito: casos particulares de imágenes • Decorativa y no aporta información – Texto alternativo vacío • Enlace – Describir a dónde dirige, en vez de la imagen – No es necesario decir “enlace a..” (el lector avisa) • Imagen de texto – Escribir lo que dice el texto
  • 17. Imágenes en enlaces • Las imágenes que funcionan como enlaces tienen un texto alternativo que describe el destino del enlace y no la imagen. alt=“Icono de una casa", alt=“Sobre", alt=“Impresora" alt=“Signo de interrogación"; alt="Página principal del sitio", alt="Contacto“ alt="Versión imprimible" alt="Ayuda".
  • 18. Resumen From Understanding WCAG 2.0: 1.1.1 Non-text Content 1.4.9 Images of Text (No Exception) From Techniques for WCAG 2.0: C9: Using CSS to include decorative images
  • 19. Silvia Da Rosa @okactivist C.C. www.mutuaspalabras.blogspot.com