Maquetación HTML Edición de textos accesibles Nivel de conformidad AA Sesión 2: Imágenes y enlaces 1
Introducción Porqué estamos aquí? Norma UNE 139803 basada en las Pautas de Accesibilidad al Contenido Web (WCAG) 2
Introducción Porqué vosotros? Personal de la universidad que edita textos en el sitio web de la UA 3
Índice Elementos gráficos: Imágenes y multimedia Navegación Enlaces Estructura: Encabezados Listas Citas Párrafos Énfasis Tablas Lenguaje y comprensión Lenguaje claro y sencillo Abreviaturas y acrónimos Cambio de idioma Metadatos Herramientas de evaluación 4
Índice Elementos gráficos: Imágenes y Multimedia Navegación Enlaces Estructura: Encabezados Listas Citas Párrafos Énfasis Tablas Lenguaje y comprensión Cambio de idioma Abreviaturas y acrónimos Lenguaje claro y sencillo Metadatos Herramientas de evaluación 5
Imágenes Decorativas: No es necesario texto alternativo. Necesarias: Obligatorio el texto alternativo a no ser que el contenido que transmite la imagen se encuentra en un texto junto a ella. No poseen contenido textual (Ej. Una fotografía). Texto alternativo Contenido que representa. Poseen contenido textual Texto alternativo El mismo texto que en la imagen. Imágenes que funcionan como enlaces Texto alternativo Función que realiza y depende del texto del enlace. Imágenes complejas (Ej. gráficos) Texto alternativo + Descripción larga 6
Imágenes 7
Imágenes CASO 1: Imágenes decorativas. El texto alternativo ha de estar vacío. 8
Imágenes 9
Imágenes CASO 1: Imágenes decorativas Fallo más común: No uses para las imágenes decorativas como alternativa textual: nombre del archivo (mi_archivo.jpg), imagen, foto, etc. Ver ejemplo 10
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). Proporcionar una alternativa textual corta para el contenido no textual que cumpla la misma función y presente la misma información que el contenido no textual. Deben cumplir el mismo propósito y transmitir la misma información. No se trata de describir los detalles gráficos (a no ser que eso sea lo adecuado), sino de proporcionar la misma información o funcionalidad. El texto alternativo debe ser breve y lo más informativo posible El texto alternativo debe servir como reemplazo del contenido no textual 11
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. Preguntas de ayuda para escoger una alternativa textual Por qué está aquí la imagen? Qué información está transmitiendo? Cuál es su propósito? Si no pudiese usar la imagen qué palabras usaría para transmitir la misma información y/o función? Redacta el texto como si se lo estuvieses contando a una persona. 12
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. Inserción de alternativa textual a través de ejemplos Ejemplo 1: Iconos 13
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 2: Iconos 14
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 3: Fotografías De izquierda a derecha aparecen XX, YY, ZZ, MM. ZZ e YY se están dando la mano. 15
Imágenes Fotografía ubicada en un contexto. Cuál sería su alternativa textual corta correcta? 16
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 4: Imágenes que transmiten información textual Universitat d Alacant. Universidad de Alicante Logo de XX (no ponerlo) Campus Virtual. Intranet de la UA. Docencia, gestión e investigación. Ejemplo 17
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. Algunos fallos más comunes: Usar alternativas incorrectas que no proporcionan la misma información o función, como por ejemplo usar nombres de archivos, texto de relleno o genéricos, etc. No actualizar las alternativas textuales cuando cambia el contenido no textual. Usar alternativas textuales redundantes con el contexto en el que está ubicada la imagen. 18
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 5: Grupo de imágenes Texto alternativo: 3 de 5 19
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 6: Imágenes que funcionan como enlaces Texto alternativo vacío para no ser redundantes Texto alternativo: Casa Texto alternativo: Página principal 20
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 7: Imágenes que funcionan como enlaces y aportan información adicional al del texto del enlace Salón de grados de la Universidad de Alicante. 21
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 7: Imágenes que funcionan como enlaces y aportan información adicional al del texto del enlace Cuando desactivemos las imágenes o leamos con un lector de pantalla la información es transmitida así: Salón de grados de la Universidad de Alicante. Google Maps 22
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS IMPORTANTE! Combinar enlaces y recursos contiguos al mismo recurso 23
Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga. EJEMPLOS Ejemplo 8: Fórmulas matemáticas 24
Imágenes Texto alternativo: Breve y conciso (no más de 150 caracteres). Lo más significativo posible con lo que representa la imagen. No redundante. Enlazar texto e imagen en el mismo vínculo. No se han de usar textos como foto, imagen, nombres de archivos, etc. 25
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Cuando una alternativa textual corta NO PUEDE cumplir el mismo propósito y presentar la misma información que el contenido no textual. Alternativa textual corta + alternativa textual larga. 26
Imágenes Necesarias Imágenes complejas + 27
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 1: Descripción larga cerca del contenido no textual 28
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 1: Descripción larga cerca del contenido no textual Visita por días de la semana. Descrip Alternativa textual corta: Visita por días de la semana. Descripción a continuación. 29
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 1: Descripción larga cerca del contenido no textual Lunes: 71 Martes: 155 Miércoles: 197 Jueves: 184 Lunes Martes Miércoles Jueves 71 155 197 184. 30
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 2: Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Visitas por día de la semana 31
Imágenes CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 2: Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Visitas por día de la semana Ejemplo de una compañera 32
Multimedia Inserción de un vídeo embebido Proporcionar una alternativa textual corta al insertar el vídeo. 33
Multimedia Inserción de un vídeo embebido Si el vídeo lo hemos producido nosotros (transcripción textual + subtitulado + audiodescripción). Si el vídeo lo insertamos de una fuente externa podemos incorporar un resumen a continuación o en otra página, siguiendo las técnicas anteriormente comentadas, destacando lo más importante del mismo, su finalidad, etc. 34
Imágenes Porqué es necesario? Es leído por lectores de pantalla, el cual permite que dicha imagen sea accesible para usuarios con ciertas discapacidades visuales o cognitivas. Se muestra en el lugar de la imagen para aquellos navegadores que no admiten la visualización de imágenes. Proporciona una descripción y un significado a las imágenes que pueden ser leídos por los motores de búsqueda, y determina el contenido de la imagen. 35
Imágenes Ahora os toca a vosotros Entrar en la página imagenes.html y realizar los ejercicios 36
Índice Elementos gráficos Navegación Enlaces Estructura: Encabezados Listas Citas Párrafos Énfasis Tablas Lenguaje y comprensión Cambio de idioma Abreviaturas y acrónimos Lenguaje claro y sencillo Metadatos Herramientas de evaluación 37
Navegación. Enlaces El texto de un enlace debe de indicar claramente cual es su propósito, como el contenido o información que se encuentra en el documento de destino o una descripción de la acción o funcionalidad que invocan. Los enlaces del tipo "pinche aquí" o "siga este enlace" no son significativos ya que ocultan hacia dónde dirigen. (Ejemplo) Ha de ser corto y significativo como para tener sentido fuera del contexto. 38
Navegación. Enlaces Objetivo Ayudar a los usuarios a comprender el propósito de cada enlace de forma que puedan decidir seguir el enlace o no. Dos consideraciones: Enlaces con el mismo destino han de tener el mismo texto descriptivo. Y enlaces con diferente destino han de tener diferentes textos descriptivos. 39
Navegación. Enlaces Ejemplo 1: Había mucho derramamiento de sangre durante la época medieval". Ejemplo 2: Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto. Ejemplo 3: Comisión sobre Voto Electrónico. 40
Navegación. Enlaces Ejemplo 4: Qué opción es la mejor? Opción A Título del libro 1 en formato: HTML, PDF, mp3. Título del libro 2 en formato: HTML, PDF, mp3. Opción B Título del libro 1 en formato HTML, PDF, mp3. Título del libro 2 en formato HTML, PDF, mp3. 41
MAL BIEN Ejemplo 4: Ejemplo
Navegación. Enlaces Si elegimos la opción A Cuidado! Existe un error. Cuál es? Opción A Título del libro 1 en formato: HTML, PDF, mp3. Título del libro 2 en formato: HTML, PDF, mp3. 43
Navegación. Enlaces Cómo diferenciamos los enlaces? Con el campo descripción del enlace. Nunca hemos de repetir el texto que aparece en el enlace ni usar la palabra Enlace de en la descripción. Sólo lo usaremos para complementar la información. Consejo: Aunque esta práctica está permitida por las WCAG 2.0 es mejor, siempre que se pueda, hacer el texto del enlace lo más descriptivo posible. 44
Navegación. Enlaces Si elegimos la opción B Existiría el mismo error? Opción B Título del libro 1 en formato HTML, PDF, mp3. Título del libro 2 en formato HTML, PDF, mp3. 46
Navegación. Enlaces Ejemplo 5: Qué opción es más adecuada? Opción A Título de la noticia 1. Descripción de la noticia 1. Título de la noticia 2. Descripción de la noticia 2. Opción B Título de la noticia 1. Descripción de la noticia 1. [leer más] Título de la noticia 2. Descripción de la noticia 2. [leer más] 47
Si elegimos la opción B hay que diferenciar los enlaces a través del campo descripción. 48
Navegación. Enlaces Ejemplo 6: Enlace a un documento PDF, Word, etc. Qué enlace es más significativo? Estatuto de la Universidad de Alicante. Estatuto de la Universidad de Alicante (PDF, 10 MG). 49
Navegación. Enlaces Ejemplo 6: Enlace a un documento PDF, Word, etc. Ejemplo en la UA 50
Navegación. Enlaces Ejemplo 6: Enlace a un documento PDF, Word, etc. Solución 51
Navegación. Enlaces Ejemplo 6: Enlace a un documento PDF, Word, etc. CUIDADO! Es información relevante y por lo tanto hay que incluirla dentro del enlace. Bien: Ley Orgánica 4/2006 (PDF, 6Mb). Mal: Ley Orgánica 4/2006 (PDF, 6Mb). 52
Navegación. Enlaces Ejemplo 7: Enlaces que provocan un cambio de contexto. Existen enlaces en los menús horizontales y verticales que provocan un gran cambio de contexto. Ejemplo Soluciones: Hacer más descriptivo el enlace Integrantes del servicio (Directorio de la UA) O a través del campo descripción. 53
Navegación. Enlaces Ejemplo 8: Abrir enlace en una nueva ventana La apertura de contenido en una nueva ventana es una mala práctica mejor evitarla. Si se usa, la mejor solución es: 54
Navegación. Enlaces Ejemplo 8: Abrir enlace en una nueva ventana Abre en una nueva ventana. 55
Navegación. Enlaces Ejemplo 9: Enlace a otro sitio web diferente de la UA 56
Navegación. Enlaces Ejemplo 9: Enlace a otro sitio web diferente de la UA Abre un enlace externo 57
Navegación. Enlaces Ejemplo 10: Enlace externo + apertura de nueva ventana Abre un enlace externo en una nueva ventana. 58
Navegación. Enlaces Ejemplo 11: Enlaces consecutivos Enlace 1 Enlace 2 Crear una lista Enlace 1 Enlace 2 Enlace 3 NO O separarlos con caracteres imprimibles rodeados de espacios. Importante! El espacio en blanco no es un carácter imprimible. Enlace 1 Enlace 2 Enlace 3 59
Navegación. Enlaces Ejemplo 12: No incluir como texto del enlace la url del mismo. 60
Navegación. Enlaces Ejemplo 10: No incluir como texto del enlace la url del mismo. 61
En resumen: Navegación. Enlaces 1. Los enlaces tienen que tener sentido fuera de contexto. 2. No todos los enlaces tienen que llevar una descripción, a no ser que sea necesaria por no cumplirse el punto anterior. Es más adecuado mejorar el texto del enlace que proporcionar una descripción. 3. Las descripciones, al igual que el texto de los enlaces han de ser cortas y lo más significativas posible por lo que: 1. No repetir el texto del enlace. 2. No incluir las palabras Enlace a. 3. Ejemplo 62
Imágenes Ahora os toca a vosotros Entrar en la página enlaces.html y realizar los ejercicios 63
Conocer más sobre accesibilidad Pautas de Accesibilidad al Contenido de la Web 1.0 (WCAG 1.0) Pautas de Accesibilidad al contenido de la Web 2.0 (WCAG 2.0) Norma UNE 139803:2004 Norma UNE 139803:2012 Certificación AENOR-Marca N de Accesibilidad TIC The Web Content Accessibility Guidelines Normativa legal Usable y Accesible: Olga Carreras Accesibilidad Web: Sergio Luján Planes y Estrategias Europeas en Materia de Sociedad de la Información W3C: How People with Disabilities Use the Web W3C: Web Accessibility Initiative (WAI) 64
Gracias por vuestra atención Ester Serna Berná Responsable técnico área desarrollo web Analista accesibilidad web ester.serna@eltallerdigital.com Tel. 965 90 95 67 Fax. 965 90 94 77 65