A fin de identificar con textos la acción de un
gráfico, describiremos imágenes en un documento HTML, según las recomendaciones
oficiales de este lenguaje.
En algunos casos, cuando el navegador web tiene problemas de soporte y deja de
mostrar una imagen, el usuario comprende parcialmente un texto, debido a la
falta de identificación de la misma. Para evitar esta carencia, identificaremos,
paso a paso, la implementación de etiquetas, como alt y figcaption.
Mediante un lector de pantalla, las
personas con discapacidad acceden a páginas web
y conocen toda la información. En estos casos es cuando más favorece una
descripción en la imagen, pues podría explicar el contenido de la misma. En HTML
se conoce como texto alternativo, debido al aporte de información de una imagen
cuando el navegador tiene problemas al cargarla, como en el ejemplo de la
ilustración.
061-01_1109_ilu01. Visualización de texto alternativo
A continuación, observaremos cómo
es la estructura de la instrucción para agregar texto alternativo a una imagen:
- Abrimos la
intrucción con img.
- Especificamos
la ubicación de la imagen con src.
- Agregamos el
atributo alt, de alternate text, en inglés.
- Definimos
la descripción de la imagen dentro de las comillas.
061-01_1109_ilu02. Instrucción de texto
alternativo
Al agregar esta instrucción en el
código HTML, veremos:
- En la
primera foto, la descripción de la imagen, por problemas del navegador web al mostrarla
- En la
segunda foto, la vista del usuario cuando está sin el atributo alt.
- En la
tercera foto, la imagen insertada en el código HTML.
061-01_1109_ilu03. Resultado del atributo
alt
La etiqueta figcaption permite ser más específicos para describir una imagen, pues
mediante esta es posible agregar identificaciones más largas. Para su correcto
funcionamiento, es necesario una etiqueta de inicio y cierre, para envolver la
descripción. Es indispensable agregar la etiqueta figcaption como descendiente de la etiqueta figure, ambas se ubican dentro de la clasificación de agrupar
contenido del lenguaje HTML.
061-01_1109_ilu04. Creación de la etiqueta
figure
Es necesario tomar en cuenta la
diferencia entre figcaption y alt:
- Es
necesario agregar el atributo alt dentro
de la etiqueta img.
- El usuario
lee la información dentro de alt solo
si el navegador tiene problemas para cargar la imagen.
- En el pie
de la imagen puede ser leído siempre el texto dentro de figcaption.
- El
atributo alt se agrega a una etiqueta
img; por lo tanto, solo a una imagen
pertenece la descripción.
- La
etiqueta figcaption se agrega a un
grupo de imágenes y a todas les pertenece la descripción.
- El
atributo alt es recomendable agregarlo
a todas las imágenes de una págin web, y
figcaption es opcional.
061-01_1109_ilu05. Diferencia entre figcaption
y alt
Keynotes
- Mediante un lector de pantalla, las personas
con discapacidad acceden a páginas web
y conocen toda la información. En estos casos es cuando más favorece una
descripción en la imagen, pues podría explicar el contenido de la misma.
- La etiqueta figcaption permite ser más específicos para describir una imagen, pues
mediante esta es posible agregar identificaciones más largas. Para su correcto
funcionamiento, es necesaria una etiqueta de inicio y cierre, para envolver la
descripción
- Es indispensable agregar la etiqueta figcaption como descendiente de la
etiqueta figure, ambas pueden ser
ubicadas dentro de la clasificación de agrupar contenido del lenguaje HTML.
- El atributo alt se agrega a una etiqueta img;
por lo tanto, solo a una imagen pertenece la descripción.
- El atributo alt es recomendable agregarlo a todas las imágenes de una págin web, y figcaption es opcional.
RetoRealizar una descripción de imágenes en un
documento HTML, según las recomendaciones oficiales de este lenguaje.
¡Comparte el resultado del reto en tu vPages, y contacta a un experto en la materia para pedir una sugerencia de
optimización de tu código y junto a tus compañeros debate sobre ello!
Tiempo disponible: entre 15 y 30 minutos.
CierreGracias a la descripción de imágenes en un
documento HTML, según las recomendaciones oficiales de este lenguaje, aseguramos
al usuario una comprensión completa del texto, aun cuando tenga problemas para
cargar todas las ilustraciones. Identificamos eficientemente, con textos, la
acción de un gráfico. Con disciplina y orden, aplicaremos correctamente las
etiquetas alt y figcaption.
