universidad de alicante - maquetación html · 2015-11-10 · ester serna berná / responsable...
TRANSCRIPT
![Page 1: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/1.jpg)
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
![Page 2: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/2.jpg)
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
![Page 3: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/3.jpg)
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
![Page 4: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/4.jpg)
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
![Page 5: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/5.jpg)
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
![Page 6: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/6.jpg)
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.
![Page 7: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/7.jpg)
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
![Page 8: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/8.jpg)
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
![Page 9: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/9.jpg)
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
![Page 10: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/10.jpg)
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
![Page 11: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/11.jpg)
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
![Page 12: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/12.jpg)
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
![Page 13: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/13.jpg)
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:
![Page 14: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/14.jpg)
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
![Page 15: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/15.jpg)
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:
![Page 16: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/16.jpg)
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.
![Page 17: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/17.jpg)
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….
![Page 18: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/18.jpg)
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.
![Page 19: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/19.jpg)
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?
![Page 20: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/20.jpg)
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
![Page 21: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/21.jpg)
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
![Page 22: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/22.jpg)
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
![Page 23: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/23.jpg)
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
![Page 24: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/24.jpg)
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.
![Page 25: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/25.jpg)
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
![Page 26: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/26.jpg)
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”
![Page 27: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/27.jpg)
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
![Page 28: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/28.jpg)
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.
![Page 29: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/29.jpg)
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
![Page 30: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/30.jpg)
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
![Page 31: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/31.jpg)
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.”
![Page 32: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/32.jpg)
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.
![Page 33: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/33.jpg)
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
![Page 34: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/34.jpg)
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
![Page 35: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/35.jpg)
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?
![Page 36: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/36.jpg)
Texto: Título del gráfico
Alternativa textual
de la imagen:
Resultados a
continuación
Texto: Tabla de datos
TÉCNICA 1
![Page 37: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/37.jpg)
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
![Page 38: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/38.jpg)
• 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….
![Page 39: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/39.jpg)
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
![Page 40: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/40.jpg)
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
![Page 41: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/41.jpg)
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
![Page 42: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/42.jpg)
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
![Page 43: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/43.jpg)
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.
![Page 44: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/44.jpg)
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
![Page 45: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/45.jpg)
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.
![Page 46: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/46.jpg)
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
![Page 47: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/47.jpg)
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
![Page 48: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/48.jpg)
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 48
![Page 49: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/49.jpg)
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
![Page 50: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/50.jpg)
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
![Page 51: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/51.jpg)
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
![Page 52: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/52.jpg)
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
![Page 53: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/53.jpg)
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
![Page 54: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/54.jpg)
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
![Page 55: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/55.jpg)
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
![Page 56: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/56.jpg)
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
![Page 57: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/57.jpg)
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
![Page 58: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/58.jpg)
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
![Page 59: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/59.jpg)
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
![Page 60: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/60.jpg)
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
![Page 61: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/61.jpg)
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.
![Page 62: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/62.jpg)
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
![Page 63: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/63.jpg)
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
![Page 64: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/64.jpg)
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
![Page 65: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/65.jpg)
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 65
![Page 66: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/66.jpg)
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”
![Page 67: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/67.jpg)
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
![Page 68: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/68.jpg)
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
![Page 69: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/69.jpg)
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]
![Page 70: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/70.jpg)
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
![Page 71: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/71.jpg)
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
![Page 72: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/72.jpg)
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
![Page 73: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/73.jpg)
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.
![Page 74: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/74.jpg)
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
![Page 75: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/75.jpg)
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
![Page 76: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/76.jpg)
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.
![Page 77: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/77.jpg)
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
![Page 78: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/78.jpg)
Edición textos accesibles [SESIÓN II]
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 78
2 Navegación. Enlaces
![Page 79: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/79.jpg)
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.
![Page 80: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/80.jpg)
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.
![Page 81: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/81.jpg)
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
![Page 82: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/82.jpg)
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.
![Page 83: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/83.jpg)
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.
![Page 84: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/84.jpg)
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
![Page 85: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/85.jpg)
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.
![Page 86: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/86.jpg)
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”
![Page 87: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/87.jpg)
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
![Page 88: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/88.jpg)
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
![Page 89: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/89.jpg)
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
![Page 90: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/90.jpg)
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
![Page 91: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/91.jpg)
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
![Page 92: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/92.jpg)
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
![Page 93: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/93.jpg)
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
![Page 94: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/94.jpg)
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
![Page 95: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/95.jpg)
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.
![Page 96: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/96.jpg)
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
![Page 97: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/97.jpg)
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.
![Page 98: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/98.jpg)
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
![Page 99: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/99.jpg)
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
![Page 100: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/100.jpg)
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
![Page 101: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/101.jpg)
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
![Page 102: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/102.jpg)
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
![Page 103: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/103.jpg)
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
![Page 104: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/104.jpg)
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.”
![Page 105: Universidad de Alicante - Maquetación HTML · 2015-11-10 · Ester Serna Berná / Responsable técnico área desarrollo Web / ester.serna@eltallerdigital.com 1.1 Imágenes CASO 2:](https://reader034.vdocuments.site/reader034/viewer/2022042210/5eaf74d41a4c4c47dd400edb/html5/thumbnails/105.jpg)
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