universidad de alicante - maquetación html · 2015-11-10 · ester serna berná / responsable...

Edición textos accesibles [SESIÓN II]

Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]

Maquetación HTML Edición de textos accesibles

Nivel de conformidad AAA

Sesión II: Imágenes y enlaces

1



Í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óna. Lenguaje claro y sencillob. Abreviaturas y acrónimosc. Cambio de idiomad. Metadatos

5. Herramientas de evaluación

2



Índice




b. Listas

c. Citas

d. Párrafos

e. Énfasis

f. Tablas



3



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



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 textualTexto 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



1.1 Imágenes

6

En el campo

descripción se incluye

la alternativa textual.



1.1 Imágenes

El texto alternativo ha de estar vacío.

CASO 1: Imágenes decorativas.

7



1.1 Imágenes

El texto alternativo ha de estar vacío.


8



1.1 Imágenes

¿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

http://web.ua.es/es/actualidad-universitaria/noviembre2012/noviembre2012-5-11/la-universidad-de-alicante-descubre-en-sudafrica-nuevas-especies-emparentadas-con-los-jacintos.html



1.1 Imágenes

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”

CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).

10



1.1 Imágenes

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



1.1 Imágenes

Inserción de alternativa textual a través de ejemplos:


12

E

J

E

M

P

L

O

1ICONO



1.1 Imágenes


13

E

J

E

M

P

L

O

1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante.

Importante Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante.

Importante Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et dolor ante.

Un lector de pantalla leería:

Un navegador sin descargar imágenes mostraría:



1.1 Imágenes


14

E

J

E

M

P

L

O

2

ICONO DE FORMATO



1.1 Imágenes


15

E

J

E

M

P

L

O

2

• Normativa UA de adaptación a la modificación de la LOU .

• Enlace Normativa UA de adaptación a la modificación de la

LOU en formato PDF.

• Normativa UA de adaptación a la modificación de la LOU en formato

PDF.

Un lector de pantalla leería:

Un navegador sin descargar imágenes mostraría:

http://www.boua.ua.es/pdf.asp?pdf=742.pdf&c=0

http://www.boua.ua.es/pdf.asp?pdf=742.pdf&c=0



1.1 Imágenes


16

E

J

E

M

P

L

O

3

FOTOGRAFÍACONTEXTO ¿?

Noticia sobre algún acuerdo

De izquierda a derecha

aparecen XX, YY, ZZ, MM. ZZ e

YY se están dando la mano.



1.1 Imágenes


17

E

J

E

M

P

L

O

3


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



1.1 Imágenes


18

E

J

E

M

P

L

O

3


Vestuario rectores universidades

Manuel Palomar, rector de la

UA, viste con un traje gris,

camisa gris y corbata granate.



1.1 Imágenes

19

E

J

E

M

P

L

O

3

FOTOGRAFÍA

¿Cuál sería su

alternativa

textual corta

correcta?



1.1 Imágenes


20

E

J

E

M

P

L

O

4

Imágenes con texto

Universitat d’Alacant. Universidad

de Alicante

Campus Virtual. Intranet de la UA.

Docencia, gestión e investigación.

Logo de XX (no ponerlo)

Ejemplo

http://educacio.ua.es/es/



1.1 Imágenes


21

E

J

E

M

P

L

O

5

Grupo de imágenes

Texto alternativo: 3 de 5



1.1 Imágenes


22

E

J

E

M

P

L

O

6

Imágenes que funcionan como enlaces

Texto alternativo: Página principal

Texto alternativo vacío para no ser redundantes



1.1 Imágenes


23

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



1.1 Imágenes


24

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.



1.1 Imágenes


25

E

J

E

M

P

L

O

7



Salón de grados de la

Universidad de Alicante . Ver ubicación en Google

Maps

Salón de grados de la Universidad de Alicante. Ver ubicación en

Google Maps enlace



1.1 Imágenes


26

E

J

E

M

P

L

O

7



¡IMPORTANTE!

“Combinar enlaces y recursos contiguos al mismo recurso”

Salón de grados de la Universidad de Alicante. .

“Único enlace”



1.1 Imágenes


27

E

J

E

M

P

L

O

8

Fórmulas matemáticas no complejas

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

2009”

ImagenTexto



1.1 Imágenes

En resumen, texto alternativo corto:

28

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.



1.1 Imágenes

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.

CASO 3: Imágenes necesarias que requieren alternativa textual larga.

29


Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 30

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.

+

Ejemplo de aplicación en las páginas de la UA• Servicio de informática. Estadísticas

http://si.ua.es/es/ite/servicios/campus-virtual/estadisticas.html#debates_abiertos



1.1 Imágenes

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.


31

“Recordar: Alternativa textual corta + alternativa textual larga.”



1.1 Imágenes

32

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.



1.1 Imágenes

33

Texto

Imagen


Imagen



1.1 Imágenes

34

Resultados a continuación


Texto

Imagen



1.1 Imágenes

35

Visitas a obras del portal por países….


Imagen

“Visitas a obras del portal por países.

Resultados a continuación.”

“Ya tenemos la alternativa textual corta”¿Cómo incluimos la alternativa textual larga?

Texto: Título del gráfico

Alternativa textual

de la imagen:

Resultados a

continuación

Texto: Tabla de datos

TÉCNICA 1

Texto: Título del gráfico

Alternativa textual

de la imagen:

Resultados a

continuación

Texto: Lista

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.

• España: 96 visitas

• Estados Unidos: 71 visitas

• Reino Unido: 23 visitas

• Italia: 18 visitas

• Ecuador: 16 visitas

• Argentina: 14 visitas

• ….

TÉCNICA 1

• España: 96 visitas

• Estados Unidos: 71 visitas

• Reino Unido: 23 visitas

• Italia: 18 visitas

• Ecuador: 16 visitas

• Argentina: 14 visitas

• ….

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



1.1 Imágenes

39

Texto

Imagen

TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual.

> Resultados

Enlace destino es

la descripción

larga



1.1 Imágenes

40

TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual.

> Resultados

Visitas a obras del

portal por países.

Enlace Resultados.

“La imagen no debe tener

alternativa textual”

Imagen + Enlace

en un mismo enlace

Texto



1.1 Imágenes

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.


41

¿Qué técnica es más utilizada?

Encuesta WEBAIM:Screen Reader User Survey #6 Results. Complex Images

http://webaim.org/projects/screenreadersurvey6/#compleximages



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



1.2 Vídeo

Ejemplo de inserción de un vídeo embebido de YouTube

43

1. Incluir en la descripción del

vídeo:

Presentación de Svisual.



1.2 Vídeo


44

1. Incluir en la descripción del

vídeo: Presentación de

Svisual.

¿Iniciar

automáticamente? NO



1.2 Vídeo


45

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.

https://www.youtube.com/watch?v=TXYoMaeFPOU&feature=youtu.be



Evaluación. Barras de ayuda

WAVE:

46

Para Firefox

Para Chrome




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



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




Web Developer:

50

Para Firefox

Para Chrome



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 dejarlocomo estaba ;-). )

2. Images Display Alt attributes.

51



1. Imágenes y Multimedia

Ahora os toca a vosotros

Entrar en la página imagenes.html y realizar los ejercicios

52



Índice




b. Listas

c. Citas

d. Párrafos

e. Énfasis

f. Tablas



53



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

http://web.ua.es/es/ice/seminarios/2013/microscopia-optica-y-laser-confocal.html




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




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”

56

Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo



Envíe su voto y aprenda más acerca de la Comisión sobre Voto Electrónico.

57

MAL

Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto.

BIEN

“La información adicional que aclare el contexto siempre debe ir antes

del enlace.”


REQUISITO 1:

2 Navegación. Enlaces



Aprenda más acerca de la Comisión sobre Voto Electrónico. Envíe su voto.

58

MAL


BIEN

“Texto del enlace + contexto deben estar en el mismo párrafo.”


REQUISITO 2:





.

59

MAL

Comisión sobre Voto Electrónico: envíenos su voto.BIEN

“Texto del enlace sea descriptivo por sí mismo”.

Para cumplir con las directrices marcadas por la UA, nivel de conformidad AAA:

Texto del enlace descriptivo por sí mismo.

REQUISITO:





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

60

“Comisión sobre Voto Electrónico: envíenos su voto.” Nivel de

conformidad AAA, cumplimos con la ley y con la UA.

Nivel de conformidad AA, cumplimos con la ley.

Ejemplo 3:

“ Comisión sobre el voto electrónico”Imagen +

Texto en un mismo

enlace




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

61

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.



62


Ejemplo de aplicación en las páginas de la UA• Estatuto Universidad de Alicante

http://web.ua.es/es/estatuto-ua/




En el texto del enlace y si además se conoce el peso, incluirlo también.

¿Cómo indicamos el formato de archivo en un enlace?

63



¡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




Alternativa textual de la imagen“en formato PDF”




Ejemplo 5: ¿Qué opción elegiríais para las páginas de la UA?

1. Opción Aa. Título de la noticia 1

Descripción de la noticia 1.

b. Título de la noticia 2Descripción de la noticia 2.

2. Opción Ba. Título de la noticia 1

Descripción de la noticia 1 [leer más]

b. Título de la noticia 2Descripción de la noticia 2 [leer más]

67




68

Lector de pantalla NVDA

Lista de enlaces (Teclas:

BLOQMAYUS+ F7)

MAL

BIEN



¿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


Opción B

• Título de la noticia 1


• Título de la noticia 2





A través del título del enlace.

Algunos lectores de pantalla son capaces de leer:

¿Cómo se incluye? En el campo descripción del enlace desde Vualà.

¿Cómo diferenciamos dos enlaces?

70

Enlace noticias más noticias en la

Universidad de Alicante




EDICIÓN

VISUALIZACIÓN




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.

¿Cómo diferenciamos dos enlaces?

72





Ahora ambos ejemplos son accesibles:

Para cumplir

con un nivel AA.

Para cumplir con

un nivel AAA.




Ejemplo 6: ¿Qué opción elegiríamos para las páginas de la UA?

1. Opción Aa.Título del libro 1 en formato: HTML, PDF, mp3.b.Título del libro 2 en formato: HTML, PDF, mp3.

2. Opción Ba.Título del libro 1 en formato HTML, PDF, mp3.b.Título del libro 2 en formato HTML, PDF, mp3.

3. Opción Ca.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



Nivel de conformidad AAA

Opción A

Opción B

Opción C



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?

76

Recordar: “Enlaces con diferente destino han de tener diferentes textos descriptivos.”


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

77


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

Ejemplo: Estatutos de la UA




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.

79


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 1 en formato HTML

PDF / mp3.

Título del libro 2 en formato HTML

PDF / mp3.

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.



80


Opción B

• Título del libro 1 en formato HTML, PDF, mp3.• Título del libro 2 en formato HTML, PDF, mp3.

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

Título del libro 1 Título del libro 1 Título del libro 1

Título del libro 2 Título del libro 2

Título del libro 1 Título del libro 1

Nivel de conformidad AAA.

Nivel de conformidad AA.



81


Ejemplo de aplicación en las páginas de la UA• Registro general. Modelo de impresos

http://sar.ua.es/es/registro/impresos/modelos-de-impresos.html



82


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.





Ejemplo 7: Enlace que abre en una nueva ventana.

83

Consejo:

La apertura de nueva

ventana es una práctica

desaconsejada por lo que

mejor evitarla.




a. Indicarlo en el texto del enlace,

¿Cómo indicamos la apertura de nueva ventana?

84




b. Indicarlo en el título del enlace (a través del campo descripción).

¿Cómo indicamos la apertura de nueva ventana?

85

Incluir en la descripción del enlace “Abre en nueva ventana”

Abre en una nueva ventana.



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.


¿Qué opción elegimos?

86

“Indicamos la apertura de nueva ventana a través del campo descripción”




No debemos abrir nueva ventana cuando estemos en el mismo sitio web.

87

Ejemplo

http://web.ua.es/es/vr-cultura/




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

http://sj.ua.es/es/servicio-juridico.html




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


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.

ENLACE INTERNO




91


OTRA SOLUCIÓN:

En el título del enlace.

Ejemplo de aplicación en las páginas de la UA• Servicio Jurídico, menú Integrantes del Servicio

ENLACE INTERNO




92


Ejemplo de aplicación en las páginas de la UA• Servicio Jurídico. Estatuto de Autonomía

ENLACE EXTERNO

http://sj.ua.es/es/normativa/estatuto-de-autonomia.html



93



ENLACE EXTERNO

En el propio

enlace




94



ENLACE EXTERNO

A través del

campo

descripción del

enlace





Ejemplo 9: Enlace externo + apertura nueva ventana.

95

Leer estatuto en la web del Gobierno de Aragón en

una nueva ventana.




Ejemplo 10: Enlaces consecutivos

96

Ejemplo de aplicación en las páginas de la UA• Registro General. Modelo de impresos.

NO




• Instancia normalizada en Word

• Otros formatos: OPENOFFICE, PDF


1. Creando una lista.

2. Insertando caracteres imprimibles rodeados de espacios.

¿Cómo lo solucionamos?

97

La coma es un carácter

imprimible rodeado de

espacios.

Otros: / - |

• Instancia normalizada en Word, otros formatos:

• OPENOFFICE

• PDF

¡Importante! El espacio en blanco no es un carácter imprimible.



Ejemplo 11: Dirección del enlace (URL) como texto del enlace

98

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.

NO


http://web.ua.es/es/actualidad-universitaria/2015/julio2015/julio2015-27-31/la-preinscripcion-para-cursar-el-doctorado-en-la-universidad-de-alicante-comienza-el-1-de-septiembre.html




¿Cuál es el problema?

99

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



10

0

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

http://s.ua.es/8TQB




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

http://sa.ua.es/es/practicas-empresa/empresas/informacion.html



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



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




Ahora os toca a vosotros

Entrar en la página enlaces.html y realizar los ejercicios

10

4

“Es muy importante entrar en el destino del enlace para comprobar si el texto es o no descriptivo del mismo.”



Gracias por vuestra atenciónEster Serna Berná

Responsable técnico área desarrollo web

Consultora y analista accesibilidad web

[email protected]

Tel. 965 90 95 67 – Fax. 965 90 94 77

105

universidad de alicante - maquetación html · 2015-11-10 · ester serna berná / responsable...

Documents