Maquetación HTML. Edición de textos accesibles. Nivel de conformidad AAA. Edición textos accesibles [SESIÓN II] Imágenes

Transcripción

1 Maquetación HTML Edición de textos accesibles Nivel de conformidad AAA 1

2 Índice 1. Imágenes [sesión II] 2. Enlaces [sesión III] 3. Estructura: [sesión IV] a. Orden lógico de lectura b. Encabezados c. Listas d. Citas e. Párrafos f. Énfasis g. Tablas 4. Lenguaje y comprensión [sesión V] a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación [en todas las sesiones] 2

3 Maquetación HTML Imágenes y su evaluación 3

4 1. Elemento no textual: Imágenes Ejemplo: Biblioteca de Ciencias He perdido información? NO SÍ He perdido información? 4

5 1. Elemento no textual: Imágenes Dónde incluyo la alternativa textual necesaria para no perder información? En Vualà, en el campo descripción se incluye la alternativa textual. 5

6 Porqué es necesaria la inclusión de una alternativa textual a los contenidos no textuales? Es leído por lectores de pantalla. Discapacidad visual: ceguera, sordocegera Cierre de la biblioteca de ciencias del 25 de julio al 9 de septiembre por mantenimiento. Lector de pantalla 6

7 Porqué es necesaria la inclusión de una alternativa textual a los contenidos no textuales? Se muestra en el lugar de la imagen en aquellos navegadores que no admiten o no se desea visualizar las imágenes. 7

8 Qué ventaja obtenemos? Mejora de posicionamiento SEO ya que el texto alternativo sí puede ser leído por los motores de búsqueda. 8

9 2. Tipos de imágenes No perdemos información, no transmiten información importante. Imágenes decorativas Perdemos información, transmiten información importante. Imágenes necesarias No poseen contenido textual. Poseen contenido textual. Imágenes que funcionan como enlaces. Imágenes complejas. 9

10 CASO 1: Imágenes decorativas. Si no perdemos información, el texto alternativo ha de estar vacío. 10

11 CASO 1: Imágenes decorativas. El texto alternativo ha de estar vacío. 11

12 CASO 1: Imágenes decorativas. Cuál es el fallo más común? Usar en la descripción como alternativa textual para las imágenes decorativas: nombre del archivo (mi_archivo.jpg), imagen, foto, etc. Ver ejemplo 12

13 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Proporcionar una alternativa textual corta para el contenido no textual que cumpla la misma función y/o presente la misma información que el contenido no textual. 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 servir como reemplazo del contenido no textual 13

14 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. 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? Estrategia de evaluación: Deshabilita la imagen y comprueba: si has perdido información. si hay alguna alternativa textual insertada incorrectamente. 14

15 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Inserción de alternativa textual a través de ejemplos: ICONOS CON SIGNIFICADO 15

16 Es perceptible? En un navegador convencional vemos: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante. Un lector de pantalla leería: Importante Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante. Un navegador sin descargar imágenes mostraría: Importante Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante. 16

17 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. ICONO DE FORMATO 17

18 Es perceptible? En un navegador convencional vemos: Normativa UA de adaptación a la modificación de la LOU. Un lector de pantalla leería: Normativa UA de adaptación a la modificación de la LOU en formato PDF enlace no visitado. Un navegador sin descargar imágenes mostraría: Normativa UA de adaptación a la modificación de la LOU en formato PDF. 18

19 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Iconos que transmiten información ALTERNATIVA TEXTUAL: Información que transmiten En formato PDF, Word, Excel... Google Maps Facebook, Twitter, Instagram, Enviar correo Ir a la página principal Buscar Ayuda Importante 19

20 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. FOTOGRAFÍA CONTEXTO? Noticia sobre algún acuerdo De izquierda a derecha aparecen XX, YY, ZZ, MM. ZZ e YY se están dando la mano. 20

21 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. FOTOGRAFÍA CONTEXTO? Noticia: Relaciones diplomáticas De izquierda a derecha aparecen XX, YY, ZZ, MM. ZZ e YY se están dando la mano, ambos sonrientes. Al fondo pueden verse las banderas de. 21

22 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. FOTOGRAFÍA CONTEXTO? Vestuario rectores universidades Manuel Palomar, rector de la UA, viste con un traje gris, camisa gris y corbata granate. 22

23 Qué alternativa textual pondríais? Excepción FOTOGRAFÍA Actualidad UA Si la información que queremos transmitir con la imagen se encuentra junto a ella, no incluiremos la alternativa textual para no ser redundantes. 23

24 Fotografías 2 Tipos de imágenes ALTERNATIVA TEXTUAL: Información que queremos que transmitan según el contexto < caracteres De izquierda a derecha. El rector de la Universidad de Alicante viste traje gris. Nombre del hotel Sin esta alternativa textual estaríamos perdiendo información. 24

25 Imágenes con texto ALTERNATIVA TEXTUAL: Texto que aparece en la imagen < caracteres Universitat d Alacant. Universidad de Alicante Campus Virtual. Intranet de la UA. Docencia, gestión e investigación. Preinscripción y Matrícula. Teléfono: Horario: De Lunes a Viernes de 9:00 a 19:45. Ejemplo: desactivar las imágenes 25

26 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Imágenes que funcionan como enlaces Obligatorio una alternativa textual Sino se incluye, un lector de pantalla no detectará el enlace o incluirá el nombre del archivo como texto del enlace. Extraer con el lector los enlaces: 26

27 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Imágenes que funcionan como enlaces Ejemplo correcto Ejemplo incorrecto Evaluación: Con Web Developer, mostrar la alternativa textual En las imágenes de los carruseles que funcionan como enlaces siempre hemos de incluir una alternativa textual que indique el contenido de la página destino. 27

28 Imágenes que funcionan como enlaces Si para cada imagen nos hemos preocupado de proporcionar una alternativa textual adecuada. Seguiremos teniendo la información tanto si accedemos con un lector de pantalla, con un navegador modo texto, etc. 28

29 Imágenes que funcionan como enlaces GRAVE ERROR!! Ejemplo de imágenes insertadas en un enlace sin alternativa textual No poseen alternativa textual y son enlaces Textised!, simula sólo texto 29

30 Imágenes que funcionan como enlaces Obligatorio una alternativa textual Alternativa textual que describa el propósito del enlace o el contenido destino del enlace. Imprimir o impresora? Imprimir 30

31 Imágenes que funcionan como enlaces Excepción enlace Parque Científico de Alicante Un mismo enlace Imagen + texto Parque Científico de Alicante Parque Científico de Alicante enlace No seamos redundantes. Alternativa textual vacía. 31

32 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Imágenes que aportan información adicional al texto del enlace Salón de grados de la Universidad de Alicante. Si esta imagen no lleva alternativa textual Salón de grados de la Universidad de Alicante enlace. 32

33 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Imágenes que aportan información adicional al texto del enlace Salón de grados de la Universidad de Alicante. ALTERNATIVA TEXTUAL: Ver ubicación en Google Maps Salón de grados de la Universidad de Alicante. Ver ubicación en Google Maps enlace 33

34 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Imágenes que funcionan como enlaces y aportan información adicional al texto del enlace IMPORTANTE! Combinar enlaces y recursos contiguos al mismo recurso Salón de grados de la Universidad de Alicante.. Único enlace 34

35 CASO 2: Imágenes necesarias cuya alternativa textual < caracteres. Fórmulas matemáticas no complejas Texto Imagen Alternativa Textual: número de citas recibidas por la revista en 2010 dividido por el número de documentos publicados en la revista entre 2008 y

36 En resumen, texto alternativo corto: Breve y conciso (no más de 150 caracteres). Lo más significativo posible con lo que representa la imagen y si se trata de un enlace, con la información contenida en el destino del mismo. No redundante. Enlazar texto e imagen en el mismo vínculo. Actualizar el texto alternativo cuando cambia la imagen. No se han de usar textos como foto, imagen, nombres de archivos, etc. Una imagen que funcione como enlace siempre ha de tener una alternativa textual. 36

37 CASO 3: Imágenes necesarias que requieren alternativa textual larga. Alternativa textual > caracteres Ejemplo: Aulas de la conferencia 37

38 CASO 3: Imágenes necesarias que requieren alternativa textual larga. Alternativa textual CORTA + Alternativa textual LARGA 38

39 Texto alternativo: Aulas en las que tendrá lugar cada una de las conferencias para el día 18 de marzo de Descripción larga: Distribución de aulas según grado: Matemáticas: A las 9:00h. en el Aula 7X. Biología: A las 9:00h. en el Aula 36X. Trabajo social: A las 9:00h. en el Aula 37X.. Geología: A las 12:15h. en el Aula 8G. 39

40 CASO 3: Imágenes necesarias que requieren alternativa textual larga. Técnica 1: Descripción larga cerca del contenido no textual (contenido visual, una imagen). Técnica 2: Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Recordar: Alternativa textual corta + alternativa textual larga. 40

41 TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). 1. Definir alternativa textual corta: En ella tenemos que indicar dónde se encuentra la descripción detallada de la imagen. ALTERNATIVA TEXTUAL CORTA: Aulas en las que tendrá lugar cada una el de día las 18 conferencias de marzo de para para el día 18 de marzo de Detalle a continuación. Aulas en las que tendrá lugar cada. < caracteres 41

42 TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). 2. Definir alternativa textual larga: En formato tabla o lista a continuación de la imagen. el día 18 de marzo de

43 TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). 2. Definir alternativa textual larga: En formato tabla o lista a continuación de la imagen. Distribución de aulas según grado: Matemáticas: A las 9:00h. en el Aula 7X. Biología: A las 9:00h. en el Aula 36X. el día 18 de marzo Trabajo de social: A las 9:00h. en el Aula 37X.. Geología: A las 12:15h. en el Aula 8G. 43

44 TÉCNICA 1 Alternativa textual de la imagen: Aulas en las que tendrá lugar cada una de las conferencias para para el día 18 de marzo de Detalle a continuación. Texto: Tabla de datos

45 TÉCNICA 1 Alternativa textual de la imagen: Aulas en las que tendrá lugar cada una de las conferencias para para el día 18 de marzo de Detalle a continuación. Distribución de aulas según grado: Matemáticas: A las 9:00h. en el Aula 7X. Biología: A las 9:00h. en el Aula 36X. Trabajo social: A las 9:00h. en el Aula 37X.. Geología: A las 12:15h. en el Aula 8G. Texto: Lista

46 TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Imagen [Distribución de aulas en formato texto] Imagen + texto en un mismo enlace Enlace destino es la descripción larga 46

47 CASO 3: Imágenes necesarias que requieren alternativa textual larga. En Vualà solo es posible una de estas dos técnicas: Técnica 1: Descripción larga cerca del contenido no textual (contenido visual, una imagen). Técnica 2: Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. EJEMPLO Qué técnica es más utilizada? Encuesta WEBAIM: Screen Reader User Survey #6 Results. Complex Images 47

48 3 Vídeo Inserción de un vídeo embebido a través de Vualà 1. Proporcionar una descripción con el título del vídeo, al insertarlo en una página. 2. Proporcionar un resumen de lo que se muestra en el vídeo, destacando lo más importante del mismo. 48

49 3 Vídeo Ejemplo de inserción de un vídeo embebido de YouTube 1. Incluir en la descripción del vídeo: Presentación de Svisual. 49

50 3 Vídeo Ejemplo de inserción de un vídeo embebido de YouTube 1. Incluir en la descripción del vídeo: Presentación de Svisual. Iniciar automáticamente? NO 50

51 3 Vídeo Ejemplo de inserción de un vídeo embebido de YouTube 2. Incluir una descripción de lo que se explica en el vídeo junto al vídeo. SVisual es una plataforma de vídeo interpretación que permite la comunicación telefónica entre personas sordas y oyentes. Disponible las 24 horas del día, los 365 días al año. SVisual presta un servicio gratuito para las personas sordas. El acceso a SVisual es multicanal, se puede acceder desde un ordenador personal, un videoteléfono, una videocámara con marcación IP y desde cualquier dispositivo móvil 3G y tableta. Para más información ver el vídeo de presentación de SVisual en YouTube, en el que podrás encontrar ejemplos de uso de la plataforma. 51

52 4 Evaluación. Barras de ayuda WAVE: Para Chrome 52

53 4 Evaluación. Barras de ayuda WAVE: a. Los iconos en rojo, con alternativa textual "Error", son los errores detectados de forma automática que deberemos corregir. b. Los iconos en amarillo, con alternativa textual "Alert", son las advertencias detectadas de forma automática, es decir, deberemos evaluar si existe o no un error y corregirlo. c. Los iconos en verde, con alternativa textual "Feature", son los criterios satisfactorios detectados de forma automática, deberemos comprobar de forma manual si son correctos o no. d. Iconos de estructura, son los iconos que muestran los elementos estructurales de nuestro sitio web (listas, encabezados, etc..) y veremos en detalle. 53

54 54

55 4 Evaluación. Imágenes WAVE: Este icono indica que no existe el atributo de alternativa textual "alt". (Este caso en vuestros contenidos no se os va a dar). El icono nos indica que hay una imagen enlazada sin alternativa textual. El icono nos indica que hay una imagen enlazada con alternativa textual. Cuando existe una alternativa textual vacía deberéis de comprobar si es correcto o no. Este icono alerta que cerca de la imagen se repite el texto alternativo de ésta y hemos de revisar que no comentamos redundancia. Este icono indica que existe una alternativa textual, en este caso hemos de comprobar que sea la correcta. 55

56 4 Evaluación. Barras de ayuda Web Developer: Para Chrome 56

57 Evaluación. Imágenes Web Developer Toolbar: 1. Images Disable images Disable all. (Acordaros siempre de dejarlo como estaba ;-). ) 2. Images Display Alt attributes. 57

58 Ejercicio práctico sobre contenido no textual Ahora os toca a vosotros Mapa de decisión, adaptación del Mapa de decisión de Olga Carreras Wizzard online creado por Olga Carreras. Entrar en Vualà y abrir la página imagenes.html para realizar los ejercicios. 58

59 Gracias por vuestra atención Ester Serna Berná Responsable técnico área desarrollo web Consultora y analista accesibilidad web ester.serna@eltallerdigital.com Tel Fax