Maquetación HTML · 2016-11-16 · Ester Serna Berná / Responsable técnico área desarrollo Web...
Transcript of Maquetación HTML · 2016-11-16 · Ester Serna Berná / Responsable técnico área desarrollo Web...
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Maquetación HTML Edición de textos accesibles
Nivel de conformidad AAA
1
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Índice 1. Imágenes [sesión II]
2. Enlaces [sesión III]
3. Estructura: [sesión IV]a. Orden lógico de lectura
b. Encabezados
c. Listas
d. Citas
e. Párrafos
f. Énfasis
g. Tablas
4. Lenguaje y comprensión [sesión V]
a. Lenguaje claro y sencillob. Abreviaturas y acrónimosc. Cambio de idiomad. Metadatos
5. Herramientas de evaluación [en todas las sesiones]
2
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Maquetación HTML Imágenes y su evaluación
3
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
1. Elemento no textual: Imágenes
4
¿He perdido
información?
¿He perdido
información?
Ejemplo: Biblioteca de Ciencias
NO SÍ
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿Dónde incluyo la alternativa textual necesaria para no perder información?
1. Elemento no textual: Imágenes
5
En Vualà, en el
campo descripción se
incluye la alternativa
textual.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿Porqué es necesaria la inclusión de una alternativa textual a los contenidos no textuales?
Es leído por lectores de pantalla.
6
Discapacidad visual:
ceguera, sordocegera
Cierre de la biblioteca de
ciencias del 25 de julio al 9 de
septiembre por
mantenimiento.
Lector de pantalla
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿Porqué es necesaria la inclusión de una alternativa textual a los contenidos no textuales?
Se muestra en el lugar de la imagen en aquellos navegadores que no admiten o no se desea visualizar las imágenes.
7
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
¿Qué ventaja obtenemos?Mejora de posicionamiento SEO ya que el texto alternativo sí puede ser leído por los motores de búsqueda.
8
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2. Tipos de imágenes
9
No perdemos información,
no transmiten información
importante.
Perdemos información,
transmiten información
importante.
Imágenes decorativas
Imágenes necesarias
• No poseen contenido textual .
• Poseen contenido textual.
• Imágenes que funcionan como
enlaces.
• Imágenes complejas.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
Si no perdemos información, el texto alternativo ha de estar vacío.
CASO 1: Imágenes decorativas.
10
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
El texto alternativo ha de estar vacío.
CASO 1: Imágenes decorativas.
11
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de 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.
12
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de 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 servir como reemplazo del contenido no textual”
13
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de 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?
Estrategia de evaluación:
Deshabilita la imagen y comprueba: si has perdido información.
si hay alguna alternativa textual insertada incorrectamente.
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
14
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
Inserción de alternativa textual a través de ejemplos:
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
15
ICONOS CON SIGNIFICADO
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
16
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:
En un navegador convencional vemos:
¿Es perceptible?
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
17
ICONO DE FORMATO
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
18
• Normativa UA de adaptación a la modificación de la LOU .
• Normativa UA de adaptación a la modificación de la LOU en
formato PDF enlace no visitado.
• Normativa UA de adaptación a la modificación de la LOU en formato
PDF.
¿Es perceptible?
Un lector de pantalla leería:
Un navegador sin descargar imágenes mostraría:
En un navegador convencional vemos:
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
19
Iconos que transmiten
información
ALTERNATIVA TEXTUAL:
Información que transmiten
• En formato PDF, Word, Excel...
• Google Maps
• Facebook, Twitter, Instagram, …
• Enviar correo
• Ir a la página principal
• Buscar
• Ayuda
• Importante
• ……
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
20
FOTOGRAFÍA CONTEXTO ¿?
Noticia sobre algún acuerdo
De izquierda a derecha aparecen XX,
YY, ZZ, MM. ZZ e YY se están dando la
mano.
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
21
FOTOGRAFÍA CONTEXTO ¿?
Noticia: Relaciones diplomáticas
De izquierda a derecha aparecen
XX, YY, ZZ, MM. ZZ e YY se están
dando la mano, ambos sonrientes.
Al fondo pueden verse las
banderas de….
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
22
FOTOGRAFÍA CONTEXTO ¿?
Vestuario rectores universidades
Manuel Palomar, rector de la UA, viste
con un traje gris, camisa gris y corbata
granate.
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
23
FOTOGRAFÍA
¿Qué alternativa textual pondríais?
Actualidad UA
Si la información que queremos transmitir con la imagen
se encuentra junto a ella, no incluiremos la alternativa
textual para no ser redundantes.
Excepción
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
24
Fotografías
ALTERNATIVA TEXTUAL:
Información que queremos
que transmitan según el
contexto < 100-150 caracteres
• De izquierda a derecha….
• El rector de la Universidad de
Alicante viste traje gris….
• Nombre del hotel
Sin esta alternativa textual
estaríamos perdiendo
información.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
25
Imágenes con texto
Universitat d’Alacant. Universidad de Alicante
Campus Virtual. Intranet de la UA. Docencia, gestión e
investigación.
Ejemplo: desactivar las imágenes
ALTERNATIVA TEXTUAL:
Texto que aparece en la
imagen < 100-150 caracteres
Preinscripción y Matrícula. Teléfono: + 34
965 90 99 00. Horario: De Lunes a Viernes
de 9:00 a 19:45.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
26
Imágenes que funcionan como
enlaces
Obligatorio una
alternativa textual
Sino se incluye, un lector
de pantalla no detectará el
enlace o incluirá el
nombre del archivo como
texto del enlace.
Extraer con el lector los enlaces:
https://eps.ua.es/
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
27
Imágenes que funcionan como enlaces
En las imágenes de los carruseles que funcionan como enlaces
siempre hemos de incluir una alternativa textual que indique el
contenido de la página destino.
Ejemplo correcto
Ejemplo incorrecto
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Evaluación: Con Web Developer,
mostrar la alternativa textual
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
28
Imágenes que funcionan como enlaces
Si para cada imagen nos
hemos preocupado de
proporcionar una
alternativa textual
adecuada.
Seguiremos teniendo la información
tanto si accedemos con un lector de
pantalla, con un navegador modo texto,
etc.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
29
Imágenes que funcionan como enlaces
Ejemplo de imágenes insertadas en un
enlace sin alternativa textual¡¡GRAVE ERROR!!
Textised!, simula sólo textohttps://www.textise.net/
No poseen alternativa
textual y son enlaces
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
30
Imágenes que funcionan
como enlaces
Obligatorio una
alternativa textual
Alternativa textual que describa el propósito del
enlace o el contenido destino del enlace.
¿Imprimir o impresora? Imprimir
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
31
Imágenes que funcionan como
enlaces
Excepción
Parque Científico de Alicante Un mismo enlace
Imagen + texto
enlace
Parque Científico de
Alicante Parque
Científico de Alicante
enlace
No seamos redundantes.
Alternativa textual vacía.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
32
Imágenes que aportan información adicional al texto del enlace
Salón de grados de la
Universidad de Alicante .
Si esta imagen no lleva
alternativa textual
Salón de grados de la Universidad de Alicante
enlace.
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
33
Imágenes que aportan información adicional al texto del enlace
Salón de grados de la
Universidad de Alicante .
ALTERNATIVA TEXTUAL:
Ver ubicación en Google
Maps
Salón de grados de la Universidad de Alicante. Ver ubicación en
Google Maps enlace
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
34
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”
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
35
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
CASO 2: Imágenes necesarias cuya alternativa textual < 100-150 caracteres.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
En resumen, texto alternativo corto:
36
Breve y conciso (no más de 150 caracteres). Lo más significativo posible con lo que representa la
imagen y si se trata de un enlace, con la información contenida en el destino del mismo.
No redundante. Enlazar texto e imagen en el mismo vínculo. Actualizar el texto alternativo cuando cambia la imagen. No se han de usar textos como “foto”, “imagen”, nombres
de archivos, etc. Una imagen que funcione como enlace siempre ha de
tener una alternativa textual.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
CASO 3: Imágenes necesarias que requieren alternativa textual larga.
37
Alternativa textual > 100-150 caracteres
Ejemplo: Aulas de la conferencia
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
CASO 3: Imágenes necesarias que requieren alternativa textual larga.
38
Alternativa textual CORTA
Alternativa textual LARGA
+
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 39
Texto alternativo: Aulas en las que tendrá lugar cada una de las conferencias para el día 18 de marzo de 2016.
Descripción larga:• Distribución de aulas según grado:
• Matemáticas: A las 9:00h. en el Aula 7X.
• Biología: A las 9:00h. en el Aula 36X.• Trabajo social: A las 9:00h. en el Aula
37X.• ….• Geología: A las 12:15h. en el Aula 8G.
+
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de 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.
40
“Recordar: Alternativa textual corta + alternativa textual larga.”
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
41
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
1. Definir alternativa textual corta:• En ella tenemos que indicar dónde se encuentra la
descripción detallada de la imagen.
el día 18 de marzo de 2016.
ALTERNATIVA TEXTUAL CORTA:
Aulas en las que tendrá lugar cada
una de las conferencias para para
el día 18 de marzo de 2016. Detalle
a continuación.
Aulas en las que tendrá lugar cada….
< 100-150 caracteres
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
42
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
2. Definir alternativa textual larga:• En formato tabla o lista a continuación de la imagen.
el día 18 de marzo de 2016.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
43
TÉCNICA 1 Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
2. Definir alternativa textual larga:• En formato tabla o lista a continuación de la imagen.
el día 18 de marzo de 2016.
• Distribución de aulas según grado:
• Matemáticas: A las 9:00h. en el Aula 7X.
• Biología: A las 9:00h. en el Aula 36X.
• Trabajo social: A las 9:00h. en el Aula 37X.
• ….
• Geología: A las 12:15h. en el Aula 8G.
• ……
Alternativa textual de la imagen:
Aulas en las que tendrá lugar
cada una de las conferencias
para para el día 18 de marzo de
2016. Detalle a continuación.
Texto: Tabla de datos
TÉCNICA 1
Alternativa textual de la imagen:
Aulas en las que tendrá lugar
cada una de las conferencias
para para el día 18 de marzo de
2016. Detalle a continuación.
Texto: Lista
TÉCNICA 1
Distribución de aulas según grado:
• Matemáticas: A las 9:00h. en el Aula 7X.
• Biología: A las 9:00h. en el Aula 36X.
• Trabajo social: A las 9:00h. en el Aula 37X.
• ….
• Geología: A las 12:15h. en el Aula 8G.
• ……
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
46
Imagen
TÉCNICA 2 Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual.
[Distribución de aulas en formato texto]Enlace destino es
la descripción
largaImagen + texto en un mismo enlace
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
2 Tipos de imágenes
En Vualà solo es posible una de estas dos técnicas:
Técnica 1: Descripción larga cerca del contenido no textual (contenido visual, una imagen) .
Técnica 2: Descripción larga en otra ubicación, incluyendo un enlace a la misma cerca del contenido no textual.
CASO 3: Imágenes necesarias que requieren alternativa textual larga.
47
¿Qué técnica es más utilizada?
Encuesta WEBAIM:Screen Reader User Survey #6 Results. Complex Images
EJEMPLO
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3 Vídeo
Inserción de un vídeo embebido a través de Vualà
1. Proporcionar una descripción con el título del vídeo, al insertarlo en una página.
2. Proporcionar un resumen de lo que se muestra en el vídeo, destacando lo más importante del mismo.
48
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3 Vídeo
Ejemplo de inserción de un vídeo embebido de YouTube
49
1. Incluir en la descripción del
vídeo:
Presentación de Svisual.
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3 Vídeo
Ejemplo de inserción de un vídeo embebido de YouTube
50
1. Incluir en la descripción del
vídeo: Presentación de
Svisual.
¿Iniciar
automáticamente? NO
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
3 Vídeo
Ejemplo de inserción de un vídeo embebido de YouTube
51
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] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4 Evaluación. Barras de ayuda
WAVE:
52
Para Chrome
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4 Evaluación. Barras de ayuda
WAVE:a. Los iconos en rojo, con alternativa textual "Error",
son los errores detectados de forma automática que deberemos corregir.
b. Los iconos en amarillo, con alternativa textual "Alert", son las advertencias detectadas de forma automática, es decir, deberemos evaluar si existe o no un error y corregirlo.
c. Los iconos en verde, con alternativa textual "Feature", son los criterios satisfactorios detectados de forma automática, deberemos comprobar de forma manual si son correctos o no.
d. Iconos de estructura, son los iconos que muestran los “elementos estructurales” de nuestro sitio web (listas, encabezados, etc..) y veremos en detalle.
53
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected] 54
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4 Evaluación. Imágenes
WAVE:
• Este icono indica que no existe el atributo de alternativa textual "alt". (Este
caso en vuestros contenidos no se os va a dar).
• El icono nos indica que hay una imagen enlazada sin alternativa textual.
• El icono nos indica que hay una imagen enlazada con alternativa textual.
• Cuando existe una alternativa textual vacía deberéis de comprobar si es
correcto o no.
• Este icono alerta que cerca de la imagen se repite el texto alternativo de
ésta y hemos de revisar que no comentamos redundancia.
• Este icono indica que existe una alternativa textual, en este caso hemos de
comprobar que sea la correcta.
55
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
4 Evaluación. Barras de ayuda
Web Developer:
56
Para Chrome
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Web Developer Toolbar:
1. Images Disable images Disable all. (Acordaros siempre de dejarlocomo estaba ;-). )
2. Images Display Alt attributes.
Evaluación. Imágenes
57
Edición textos accesibles [SESIÓN II] – Imágenes
Ester Serna Berná / Responsable técnico área desarrollo Web / [email protected]
Ejercicio práctico sobre contenido no textual
Ahora os toca a vosotros
• Mapa de decisión, adaptación del Mapa de decisión de Olga Carreras
• Wizzard online creado por Olga Carreras.
Entrar en Vualà y abrir la página imagenes.html para realizar los ejercicios.
58
Edición textos accesibles [SESIÓN II] – Imágenes
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
59