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



Í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



Maquetación HTML Imágenes y su evaluación

3



1. Elemento no textual: Imágenes

4

¿He perdido

información?

¿He perdido

información?

Ejemplo: Biblioteca de Ciencias

NO SÍ

http://biblioteca.ua.es/es/ciencias/biblioteca-de-ciencias.html



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



¿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



¿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



¿Qué ventaja obtenemos?Mejora de posicionamiento SEO ya que el texto alternativo sí puede ser leído por los motores de búsqueda.

8



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.



2 Tipos de imágenes

Si no perdemos información, el texto alternativo ha de estar vacío.

CASO 1: Imágenes decorativas.

10




El texto alternativo ha de estar vacío.


11




¿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


12

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




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.




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.


14




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


15

ICONOS CON SIGNIFICADO




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?




17

ICONO DE FORMATO





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:

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

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




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

• ……





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.





21


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





22


Vestuario rectores universidades

Manuel Palomar, rector de la UA, viste

con un traje gris, camisa gris y corbata

granate.





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

https://web.ua.es/es/actualidad-universitaria/2016/septiembre16/26-30/la-revista-quo-elige-al-profesor-de-la-ua-francis-mojica-como-uno-de-los-mejores-investigadores-del-pais.html




24

Fotografías


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.




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


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.

https://fcsalud.ua.es/es/estudios/masteres/masteres.html




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/


https://eps.ua.es/




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


Evaluación: Con Web Developer,

mostrar la alternativa textual

https://educacio.ua.es/es/

https://economicas.ua.es/es/vri/




28


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.




29


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

https://fcsalud.ua.es/es/estudios/masteres/masteres.html

https://www.textise.net/




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




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.




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.





33

Imágenes que 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





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”





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





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.




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

37

Alternativa textual > 100-150 caracteres

Ejemplo: Aulas de la conferencia

https://web.ua.es/es/charlastitulaciones/aulas-de-las-conferencias.html





38

Alternativa textual CORTA

Alternativa textual LARGA

+


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.

+




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.


40

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




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




42


2. Definir alternativa textual larga:• En formato tabla o lista a continuación de la imagen.





43


2. Definir alternativa textual larga:• En formato tabla o lista a continuación de la imagen.


• Distribución de aulas según grado:


• 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:


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

• ……




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




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.


47

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

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

EJEMPLO

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

https://web.ua.es/es/curso-accesibilidad/curso-2016/grafico-complejo.html



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



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.



3 Vídeo


50

1. Incluir en la descripción del

vídeo: Presentación de

Svisual.

¿Iniciar

automáticamente? NO



3 Vídeo


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.

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



4 Evaluación. Barras de ayuda

WAVE:

52

Para Chrome




WAVE:a. Los iconos en rojo, con alternativa textual "Error",

son los errores detectados de forma automática que deberemos corregir.

b. Los iconos en amarillo, con alternativa textual "Alert", son las advertencias detectadas de forma automática, es decir, deberemos evaluar si existe o no un error y corregirlo.

c. Los iconos en verde, con alternativa textual "Feature", son los criterios satisfactorios detectados de forma automática, deberemos comprobar de forma manual si son correctos o no.

d. Iconos de estructura, son los iconos que muestran los “elementos estructurales” de nuestro sitio web (listas, encabezados, etc..) y veremos en detalle.

53


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



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




Web Developer:

56

Para Chrome



Web Developer Toolbar:

1. Images Disable images Disable all. (Acordaros siempre de dejarlocomo estaba ;-). )

2. Images Display Alt attributes.

Evaluación. Imágenes

57



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

https://web.ua.es/es/curso-accesibilidad/documentos/noviembre2016/mapa-decision.pdf

http://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php

http://www.usableyaccesible.com/textosalternativosaccesibles/texto_alternativo_wizard.php



Gracias por vuestra atenciónEster Serna Berná

Responsable técnico área desarrollo web

Consultora y analista accesibilidad web

[email protected]

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

59

maquetación html · 2016-11-16 · ester serna berná / responsable técnico área desarrollo web...

Documents