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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Í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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Í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
3
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
6
En el campo
descripción se incluye
la alternativa textual.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
El texto alternativo ha de estar vacío.
CASO 1: Imágenes decorativas.
7
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
El texto alternativo ha de estar vacío.
CASO 1: Imágenes decorativas.
8
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
CASO 1: Imágenes decorativas.
9
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.”
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
11
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
Inserción de alternativa textual a través de ejemplos:
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
12
E
J
E
M
P
L
O
1ICONO
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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:
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
14
E
J
E
M
P
L
O
2
ICONO DE FORMATO
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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:
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
17
E
J
E
M
P
L
O
3
FOTOGRAFÍACONTEXTO ¿?
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….
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
18
E
J
E
M
P
L
O
3
FOTOGRAFÍACONTEXTO ¿?
Vestuario rectores universidades
Manuel Palomar, rector de la
UA, viste con un traje gris,
camisa gris y corbata granate.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
19
E
J
E
M
P
L
O
3
FOTOGRAFÍA
¿Cuál sería su
alternativa
textual corta
correcta?
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
21
E
J
E
M
P
L
O
5
Grupo de imágenes
Texto alternativo: 3 de 5
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
25
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 . Ver ubicación en Google
Maps
Salón de grados de la Universidad de Alicante. Ver ubicación en
Google Maps enlace
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
26
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”
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
CASO 2: Imágenes necesarias que no requieren alternativa textual larga (no más de 150 caracteres).
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
CASO 3: Imágenes necesarias que requieren alternativa textual larga.
31
“Recordar: Alternativa textual corta + alternativa textual larga.”
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
33
Texto
Imagen
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
Imagen
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
34
Resultados a continuación
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
Texto
Imagen
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.1 Imágenes
35
Visitas a obras del portal por países….
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
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….
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
CASO 3: Imágenes necesarias que requieren alternativa textual larga.
41
¿Qué técnica es más utilizada?
Encuesta WEBAIM:Screen Reader User Survey #6 Results. Complex Images
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.2 Vídeo
Ejemplo de inserción de un vídeo embebido de YouTube
44
1. Incluir en la descripción del
vídeo: Presentación de
Svisual.
¿Iniciar
automáticamente? NO
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1.2 Vídeo
Ejemplo de inserción de un vídeo embebido de YouTube
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Barras de ayuda
WAVE:
46
Para Firefox
Para Chrome
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 48
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Evaluación. Barras de ayuda
Web Developer:
50
Para Firefox
Para Chrome
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1. Imágenes y Multimedia
Ahora os toca a vosotros
Entrar en la página imagenes.html y realizar los ejercicios
52
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Í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
53
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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”
56
Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.”
Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo
REQUISITO 1:
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Aprenda más acerca de la Comisión sobre Voto Electrónico. Envíe su voto.
58
MAL
Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto.
BIEN
“Texto del enlace + contexto deben estar en el mismo párrafo.”
Para cumplir con la ley, nivel de conformidad AA: Texto del enlace + contexto del enlace determinado por software = enlace descriptivo
REQUISITO 2:
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Aprenda más acerca de la Comisión sobre Voto Electrónico y envíe su voto.
.
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:
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.”
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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).
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
62
2 Navegación. Enlaces
Ejemplo de aplicación en las páginas de la UA• Estatuto Universidad de Alicante
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¡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
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 65
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 66
Alternativa textual de la imagen“en formato PDF”
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
68
Lector de pantalla NVDA
Lista de enlaces (Teclas:
BLOQMAYUS+ F7)
MAL
BIEN
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿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
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]
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
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 textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 71
2 Navegación. Enlaces
EDICIÓN
VISUALIZACIÓN
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. 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.
¿Cómo diferenciamos dos enlaces?
72
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 73
2 Navegación. Enlaces
Ahora ambos ejemplos son accesibles:
Para cumplir
con un nivel AA.
Para cumplir con
un nivel AAA.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 75
Nivel de conformidad AAA
Opción A
Opción B
Opción C
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.”
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
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).
Ejemplo: Estatutos de la UA
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 78
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
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.
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
80
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.
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
81
2 Navegación. Enlaces
Ejemplo de aplicación en las páginas de la UA• Registro general. Modelo de impresos
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
a. Indicarlo en el texto del enlace,
¿Cómo indicamos la apertura de nueva ventana?
84
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
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.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
2 Navegación. Enlaces
¿Qué opción elegimos?
86
“Indicamos la apertura de nueva ventana a través del campo descripción”
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
No debemos abrir nueva ventana cuando estemos en el mismo sitio web.
87
Ejemplo
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
90
2 Navegación. Enlaces
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
91
2 Navegación. Enlaces
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
92
2 Navegación. Enlaces
Ejemplo de aplicación en las páginas de la UA• Servicio Jurídico. Estatuto de Autonomía
ENLACE EXTERNO
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
93
2 Navegación. Enlaces
Ejemplo de aplicación en las páginas de la UA• Servicio Jurídico. Estatuto de Autonomía
ENLACE EXTERNO
En el propio
enlace
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
94
2 Navegación. Enlaces
Ejemplo de aplicación en las páginas de la UA• Servicio Jurídico. Estatuto de Autonomía
ENLACE EXTERNO
A través del
campo
descripción del
enlace
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
Ejemplo 9: Enlace externo + apertura nueva ventana.
95
Leer estatuto en la web del Gobierno de Aragón en
una nueva ventana.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
Ejemplo 10: Enlaces consecutivos
96
Ejemplo de aplicación en las páginas de la UA• Registro General. Modelo de impresos.
NO
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
• Instancia normalizada en Word
• Otros formatos: OPENOFFICE, PDF
2 Navegación. Enlaces
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
¡Importante! El espacio en blanco no es un carácter imprimible.
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
2 Navegación. Enlaces
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Navegación. Enlaces
¿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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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.
2 Navegación. Enlaces
Texto del enlace descriptivo
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
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
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Navegación. Enlaces
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.”
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Gracias por vuestra atenciónEster Serna Berná
Responsable técnico área desarrollo web
Consultora y analista accesibilidad web
Tel. 965 90 95 67 – Fax. 965 90 94 77
105