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

Transcripción

1 Maquetación HTML Edición de textos accesibles Nivel de conformidad AAA Sesión II: Imágenes y enlaces 1

2 Índice 1. Elemento no textual: Imágenes y multimedia 2. Navegación Enlaces 3. Estructura: a. Encabezados b. Listas c. Citas d. Párrafos e. Énfasis f. Tablas 4. Lenguaje y comprensión a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 2

3 Índice 1. Elemento no textual: Imágenes y multimedia 2. Navegación Enlaces 3. Estructura: a. Encabezados b. Listas c. Citas d. Párrafos e. Énfasis f. Tablas 4. Lenguaje y comprensión a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 3

4 1. Imágenes y multimedia Porqué es necesaria la inclusión de una alternativa textual a los contenidos no textuales? Es leído por lectores de pantalla. 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. 4

5 1.1 Imágenes Decorativas: El texto alternativo ha de estar vacío. 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 (Ej. Un logotipo). Imágenes que funcionan como enlaces Texto alternativo Función que realiza y depende del texto del enlace. Imágenes complejas (Ej. Gráficos estadísticos) Texto alternativo + Descripción larga 5

6 1.1 Imágenes En el campo descripción se incluye la alternativa textual. 6

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

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

9 1.1 Imágenes 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 9

10 1.1 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/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 ser breve y lo más informativo posible. El texto alternativo debe servir como reemplazo del contenido no textual 10

11 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 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? Redacta el texto como si se lo estuvieses contando a una persona. 11

12 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). Inserción de alternativa textual a través de ejemplos: E J E M P L O 1 ICONO 12

13 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 1 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. 13

14 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O ICONO DE FORMATO 2 14

15 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 2 Normativa UA de adaptación a la modificación de la LOU. Un lector de pantalla leería: Enlace Normativa UA de adaptación a la modificación de la LOU en formato PDF. Un navegador sin descargar imágenes mostraría: Normativa UA de adaptación a la modificación de la LOU en formato PDF. 15

16 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 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. 3 16

17 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 3 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. 17

18 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 3 FOTOGRAFÍA CONTEXTO? Vestuario rectores universidades Manuel Palomar, rector de la UA, viste con un traje gris, camisa gris y corbata granate. 18

19 1.1 Imágenes E J E M P L O Cuál sería su alternativa textual corta correcta? 3 FOTOGRAFÍA 19

20 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O Imágenes con texto Universitat d Alacant. Universidad de Alicante Logo de XX (no ponerlo) 4 Campus Virtual. Intranet de la UA. Docencia, gestión e investigación. Ejemplo 20

21 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 5 Grupo de imágenes Texto alternativo: 3 de 5 21

22 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O Imágenes que funcionan como enlaces Texto alternativo vacío para no ser redundantes 6 Texto alternativo: Página principal 22

23 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 6 Imágenes que funcionan como enlaces IMPORTANTE! Una imagen sola que funciona como enlace siempre debe tener una alternativa textual, en otro caso un lector de pantalla, o no lee nada, o lee el nombre del archivo. Enlace sin texto alternativo en la imagen NVDA lee: Enlace no visitado impresora.jpg Otros lectores se saltan el enlace y no leen nada Enlace con una imagen que posee un texto alternativo Imprimir Enlace no visitado imprimir Ejemplo página principal de la UA, gráfico Portal Datos abiertos 23

24 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 7 Imágenes que funcionan como enlaces y 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. 24

25 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O Imágenes que funcionan como enlaces y aportan información adicional al texto del enlace Salón de grados de la Universidad de Alicante. Ver ubicación en Google Maps 7 Salón de grados de la Universidad de Alicante. Ver ubicación en Google Maps enlace 25

26 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 7 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 26

27 1.1 Imágenes CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres). E J E M P L O 8 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

28 1.1 Imágenes 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. 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. 28

29 1.1 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. 29

30 Ejemplo de aplicación en las páginas de la UA Servicio de informática. Estadísticas Texto alternativo: Debates abiertos + Descripción larga: Número de debates abiertos por años: En 2004: 854 debates En 2005: 1062 debates En 2006: 1521 debates.. En 2013: 7949 debates. 30

31 1.1 Imágenes 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. 31

32 1.1 Imágenes 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. 32

33 1.1 Imágenes TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). Texto Imagen Imagen 33

34 1.1 Imágenes TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). Texto Resultados a continuación Imagen 34

35 1.1 Imágenes TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen). Visitas a obras del portal por países. Resultados a continuación. Visitas a obras del portal por países. Imagen Ya tenemos la alternativa textual corta Cómo incluimos la alternativa textual larga? 35

36 TÉCNICA 1 Texto: Título del gráfico Alternativa textual de la imagen: Resultados a continuación Texto: Tabla de datos

37 TÉCNICA 1 Texto: Título del gráfico Alternativa textual de la imagen: Resultados a continuación Texto: Lista España: 96 visitas Estados Unidos: 71 visitas Reino Unido: 23 visitas Italia: 18 visitas Ecuador: 16 visitas Argentina: 14 visitas. Cuando la tabla de datos es sencilla como la de este ejemplo, en vez de usar una tabla podemos usar una lista para marcar nuestros contenidos.

38 TÉCNICA 1 Visitas a obras del portal por países. Resultados a continuación. España 96 visitas, Estados Unidos 71 visitas, Reino Unido 23 visitas. España: 96 visitas Estados Unidos: 71 visitas Reino Unido: 23 visitas Italia: 18 visitas Ecuador: 16 visitas Argentina: 14 visitas.

39 1.1 Imágenes TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Texto Imagen > Resultados Enlace destino es la descripción larga 39

40 1.1 Imágenes TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual. Texto Imagen + Enlace en un mismo enlace La imagen no debe tener alternativa textual > Resultados Visitas a obras del portal por países. Enlace Resultados. 40

41 1.1 Imágenes 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. Qué técnica es más utilizada? Encuesta WEBAIM: Screen Reader User Survey #6 Results. Complex Images 41

42 1.2 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. 42

43 1.2 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. 43

44 1.2 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 44

45 1.2 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. 45

46 Evaluación. Barras de ayuda WAVE: Para Firefox Para Chrome 46

47 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. 47

48 48

49 Evaluación. Imágenes WAVE: (En firefox, tenemos que pinchar en el botón Errors, Features, and Alerts ) 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. 49

50 Evaluación. Barras de ayuda Web Developer: Para Firefox Para Chrome 50

51 Evaluación. Imágenes 1. Cómo mostrar la descripción de una imagen? a. Web Developer Toolbar: 1. Images Disable images Disable all. (Acordaros siempre de dejarlo como estaba ;-). ) 2. Images Display Alt attributes. 51

52 1. Imágenes y Multimedia Ahora os toca a vosotros Entrar en la página imagenes.html y realizar los ejercicios 52

53 Índice 1. Elemento no textual: Imágenes y multimedia 2. Navegación Enlaces 3. Estructura: a. Encabezados b. Listas c. Citas d. Párrafos e. Énfasis f. Tablas 4. Lenguaje y comprensión a. Lenguaje claro y sencillo b. Abreviaturas y acrónimos c. Cambio de idioma d. Metadatos 5. Herramientas de evaluación 53

54 2. 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. 54

55 2. Navegación. Enlaces Objetivo: a. Ayudar a los usuarios a comprender el propósito de cada enlace de forma que puedan decidir seguir el enlace o no. Dos consideraciones: a. Enlaces con el mismo destino han de tener el mismo texto descriptivo. b. Y enlaces con diferente destino han de tener diferentes textos descriptivos. 55

56 2. 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 Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo 56

57 2 Navegación. Enlaces Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo REQUISITO 1: BIEN MAL Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto. Envíe su voto y aprenda más acerca de la Comisión sobre Voto Electrónico. La información adicional que aclare el contexto siempre debe ir antes del enlace. 57

58 2 Navegación. Enlaces Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo REQUISITO 2: BIEN MAL Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto. Aprenda más acerca de la Comisión sobre Voto Electrónico. Envíe su voto. Texto del enlace + contexto deben estar en el mismo párrafo. 58

59 2 Navegación. Enlaces Para cumplir con las directrices marcadas por la UA, nivel de conformidad AAA: Texto del enlace descriptivo por sí mismo. REQUISITO: BIEN Comisión sobre Voto Electrónico: envíenos su voto. MAL Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto.. Texto del enlace sea descriptivo por sí mismo. 59

60 2. 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. Nivel de conformidad AA, cumplimos con la ley. Comisión sobre Voto Electrónico: envíenos su voto. Nivel de conformidad AAA, cumplimos con la ley y con la UA. Ejemplo 3: Comisión sobre el voto electrónico Imagen + Texto en un mismo enlace 60

61 2. Navegación. Enlaces Ejemplo 4: Enlace a un documento en formato PDF, Word, Excel, A. Estatuto de la Universidad de Alicante. B. Estatuto de la Universidad de Alicante (PDF). REQUISITO: En los enlaces a documentos no HTML se debe proporcionar algún indicativo al usuario de que va acceder a otro formato de documento. 61

62 2 Navegación. Enlaces Ejemplo de aplicación en las páginas de la UA Estatuto Universidad de Alicante 62

63 2 Navegación. Enlaces Cómo indicamos el formato de archivo en un enlace? En el texto del enlace y si además se conoce el peso, incluirlo también. 63

64 2 Navegación. Enlaces CUIDADO! Es información relevante y por lo tanto hay que incluirla dentro del enlace. Bien: Ley Orgánica 4/2006 (PDF). Mal: Ley Orgánica 4/2006 (PDF). 64

65 65

66 Alternativa textual de la imagen en formato PDF 66

67 2. Navegación. Enlaces Ejemplo 5: Qué opción elegiríais para las páginas de la UA? 1. Opción A a. Título de la noticia 1 Descripción de la noticia 1. b. Título de la noticia 2 Descripción de la noticia Opción B a. Título de la noticia 1 Descripción de la noticia 1 [leer más] b. Título de la noticia 2 Descripción de la noticia 2 [leer más] 67

68 2 Navegación. Enlaces BIEN MAL Lector de pantalla NVDA Lista de enlaces (Teclas: BLOQMAYUS+ F7) 68

69 2 Navegación. Enlaces 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] Qué problemas presenta? 1. El texto del enlace es poco descriptivo. 2. El contexto cercano no es el título de la noticia. 3. Existen dos enlaces con diferente destino e igual texto del enlace. Qué solución nos plantean las WCAG 2.0? 1. Diferenciar los enlaces. 69

70 2 Navegación. Enlaces Cómo diferenciamos dos enlaces? A través del título del enlace. Algunos lectores de pantalla son capaces de leer: Enlace noticias más noticias en la Universidad de Alicante Cómo se incluye? En el campo descripción del enlace desde Vualà. 70

71 2 Navegación. Enlaces EDICIÓN VISUALIZACIÓN 71

72 2 Navegación. Enlaces Cómo diferenciamos dos enlaces? Consideraciones importantes para la descripción del enlace: No debemos repetir el texto que aparece en el enlace, en la descripción del enlace, ya que el lector de pantalla que lo leerá dos veces generando ruido. Errores en la página estatutos. Ni usar la palabra Enlace. El lector de pantalla ya nos dice que es un enlace. 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 al ser soportado por todas las ayudas técnicas. 72

73 2 Navegación. Enlaces Ahora ambos ejemplos son accesibles: Para cumplir con un nivel AAA. Para cumplir con un nivel AA. 73

74 2. Navegación. Enlaces Ejemplo 6: Qué opción elegiríamos para las páginas de la UA? 1. Opción A a.título del libro 1 en formato: HTML, PDF, mp3. b.título del libro 2 en formato: HTML, PDF, mp3. 2. Opción B a.título del libro 1 en formato HTML, PDF, mp3. b.título del libro 2 en formato HTML, PDF, mp3. 3. Opción C a.título del libro 1 (HTML), Título del libro 1 (PDF), Título del libro 1 ( mp3). b.título del libro 2 (HTML), Título del libro 2 (PDF), Título del libro 2 ( mp3). 74

75 Nivel de conformidad AAA Opción A Opción B Opción C 75

76 2 Navegación. Enlaces Opción A Título del libro 1 en formato: HTML, PDF, mp3. Título del libro 2 en formato: HTML, PDF, mp3. La opción A para un nivel de conformidad AAA sería incorrecta ya que el enlace en sí no es descriptivo y necesitaría ojear en el contexto para conseguir más información. En un nivel de conformidad AA el texto del enlace junto a su contexto serían descriptivos pero qué problema adicional existe? Recordar: Enlaces con diferente destino han de tener diferentes textos descriptivos. 76

77 2 Navegación. Enlaces Opción C Título del libro 1 (HTML), título del libro 1 (PDF), título del libro 1 (mp3). Título del libro 2 (HTML), título del libro 2 (PDF), título del libro 2 (mp3). La opción C podría ser correcta ya que todos los enlaces son descriptivos. Cuál es el problema? La repetición del título dificulta la lectura del texto para ciertos grupos de usuarios. La lectura sería más lenta. Ejemplo: Estatutos de la UA 77

78 2 Navegación. Enlaces 78

79 2 Navegación. Enlaces Opción B Título del libro 1 en formato HTML, PDF, mp3. Título del libro 2 en formato HTML, PDF, mp3. La opción B para un nivel de conformidad AAA sería correcta ya que el primer enlace es descriptivo y al recorrerlos de forma secuencial se leería el título del libro. Es muy importante que todos los enlaces estén marcados como una lista y dentro de cada elemento de la lista estén los diferentes formatos de cada libro, o dentro de un mismo párrafo. Párrafo 1 Párrafo 2 Título del libro 1 en formato HTML PDF / mp3. Título del libro 2 en formato HTML PDF / mp3. Título del libro 1 en formato HTML PDF mp3. Título del libro 2 en formato HTML PDF mp3. 79

80 2 Navegación. Enlaces Título del libro 1 Título del libro 1 Título del libro 1 Opción A Título del libro 1 en formato: HTML, PDF, mp3. Título del libro 2 en formato: HTML, PDF, mp3. Título del libro 2 Título del libro 2 Título del libro 2 Nivel de conformidad AA. Título del libro 1 Título del libro 1 Opción B Título del libro 1 en formato HTML, PDF, mp3. Título del libro 2 en formato HTML, PDF, mp3. Título del libro 2 Título del libro 2 Nivel de conformidad AAA. 80

81 2 Navegación. Enlaces Ejemplo de aplicación en las páginas de la UA Registro general. Modelo de impresos 81

82 2 Navegación. Enlaces Otro ejemplo de aplicación en las páginas de la UA Registro general. Modelo de impresos Acciones: 1. Enlazar los títulos de los documentos. 2. Crear un marcado correcto. 82

83 2. Navegación. Enlaces Ejemplo 7: Enlace que abre en una nueva ventana. Consejo: La apertura de nueva ventana es una práctica desaconsejada por lo que mejor evitarla. 83

84 2 Navegación. Enlaces Cómo indicamos la apertura de nueva ventana? a. Indicarlo en el texto del enlace, 84

85 2 Navegación. Enlaces Cómo indicamos la apertura de nueva ventana? b. Indicarlo en el título del enlace (a través del campo descripción). Abre en una nueva ventana. Incluir en la descripción del enlace Abre en nueva ventana 85

86 2 Navegación. Enlaces Qué opción elegimos? Opción A: Si se trata de una página con muchos enlaces generaremos ruido visual, dificultaremos su lectura. No podemos usar programación para ocultarlo de forma visual y eliminar ese ruido. Opción B: El texto es suficientemente descriptivo, estamos completando información. Indicamos la apertura de nueva ventana a través del campo descripción 86

87 2 Navegación. Enlaces No debemos abrir nueva ventana cuando estemos en el mismo sitio web. Ejemplo 87

88 2. Navegación. Enlaces Ejemplo 8: Enlaces que provocan un cambio de contexto. 1. Qué es un cambio de contexto? Cuando enlazamos una página con diferente estructura, diferente disposición de contenidos, diferente menú principal, etc se produce un cambio de contexto. 2. Cuándo ocurre? a. Un enlace externo siempre provoca un cambio de contexto. b. Existen enlaces internos, entre páginas de la UA que también provocan cambios de contexto. (Servicio Jurídico, menú Integrantes del Servicio) 88

89 2. Navegación. Enlaces Ejemplo 8: Enlaces que provocan un cambio de contexto. 3. Qué tenemos que hacer? a. Hemos de avisar al usuario que el enlace provoca un cambio de contexto. 4. Cómo lo hacemos? a. En el texto del enlace, o b. en el campo descripción del enlace. 89

90 2 Navegación. Enlaces ENLACE INTERNO Ejemplo de aplicación en las páginas de la UA Servicio Jurídico, menú Integrantes del Servicio UNA SOLUCIÓN: En el texto del enlace. 90

91 2 Navegación. Enlaces ENLACE INTERNO Ejemplo de aplicación en las páginas de la UA Servicio Jurídico, menú Integrantes del Servicio OTRA SOLUCIÓN: En el título del enlace. 91

92 2 Navegación. Enlaces ENLACE EXTERNO Ejemplo de aplicación en las páginas de la UA Servicio Jurídico. Estatuto de Autonomía 92

93 2 Navegación. Enlaces ENLACE EXTERNO Ejemplo de aplicación en las páginas de la UA Servicio Jurídico. Estatuto de Autonomía En el propio enlace 93

94 2 Navegación. Enlaces ENLACE EXTERNO Ejemplo de aplicación en las páginas de la UA Servicio Jurídico. Estatuto de Autonomía A través del campo descripción del enlace 94

95 2. Navegación. Enlaces Ejemplo 9: Enlace externo + apertura nueva ventana. Leer estatuto en la web del Gobierno de Aragón en una nueva ventana. 95

96 2. Navegación. Enlaces Ejemplo 10: Enlaces consecutivos NO Ejemplo de aplicación en las páginas de la UA Registro General. Modelo de impresos. 96

97 2 Navegación. Enlaces Cómo lo solucionamos? 1. Creando una lista. Instancia normalizada en Word, otros formatos: OPENOFFICE PDF 2. Insertando caracteres imprimibles rodeados de espacios. Instancia normalizada en Word Otros formatos: OPENOFFICE, PDF La coma es un carácter imprimible rodeado de espacios. Otros: / - Importante! El espacio en blanco no es un carácter imprimible. 97

98 2 Navegación. Enlaces Ejemplo 11: Dirección del enlace (URL) como texto del enlace NO Ejemplo de aplicación en las páginas de la UA Actualidad Universitaria. La preinscripción para cursar el Doctorado en la Universidad de Alicante comienza el 1 de septiembre. 98

99 2 Navegación. Enlaces Cuál es el problema? Noticias relacionadas dos puntos enlace no visitado http dos puntos barra web punto ua punto es barra es barra actualidad menos universitaria barra 2015 barra 99

100 2 Navegación. Enlaces Ejemplo de aplicación en las páginas de la UA Actualidad Universitaria. ArchDaily incluye Mo_Gallery, diseñado por un alumno de la UA, entre los mejores proyectos universitarios del mundo. Texto del enlace descriptivo 10 0

101 2. Navegación. Enlaces En resumen: 1. Los enlaces tienen que ser lo suficientemente descriptivos para tener sentido fuera de contexto. 2. Dos enlaces con el mismo texto han de tener la misma página destino, en otro caso hemos de diferenciarlos a través del título del enlace. 3. Si enlazamos a un archivo de formato PDF, Word, etc.. indicarlo en el texto del enlace. 4. Enlaces consecutivos, separarlos con un carácter imprimible o crear una lista. 5. Enlaces que abran en una nueva ventana indicarlo en el título del enlace (campo descripción). Ej: Abre en nueva ventana. 6. Enlaces que provoquen un cambio de contexto indicarlo en el título del enlace (campo descripción) Ej: Visitar sitio web.. 7. No todos los enlaces tienen que llevar una descripción (título del enlace), a no ser que sea necesaria. Si necesitan de una descripción: 1. No repetir el texto del enlace (Ejemplo). 2. No incluir las palabras Enlace a. 8. No incluir la dirección web (URL) como texto del enlace a no ser que refiera a la de la página de entrada al sitio. 10 1

102 Evaluación. Enlaces 1. Cómo mostrar el título (descripción) de los enlaces? a. Web Developer Toolbar: 1. Information Display Alt attributes. 2. Information Link details 102

103 Evaluación. Enlaces b. WAVE: (En firefox, tenemos que pinchar en el botón Errors, Features, and Alerts ) El icono nos indica que puede existir un enlace sin sentido fuera del contexto, detecta dos enlaces con el mismo texto y diferente destino, enlaces demasiado cortos, etc. Este icono nos alerta de la apertura de una nueva ventana. Iconos que indican un enlace a un archivo en otro formato: Este icono que detecta redundantes links, enlaces al mismo destino con diferente texto del enlace (sólo Chrome). 103

104 2. Navegación. Enlaces Ahora os toca a vosotros Entrar en la página enlaces.html y realizar los ejercicios Es muy importante entrar en el destino del enlace para comprobar si el texto es o no descriptivo del mismo. 10 4

105 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