freeCodeCamp

2.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9c	Add a Text Alternative to Images for Visually Impaired Accessibility	0		Añadir un texto alternativo a las imágenes para que sean accesibles a personas con discapacidad visual

Descripción

Es probable que hayas visto un atributo alt en una etiqueta img en otros desafíos. En este contexto, alt significa texto alternativo y se utiliza para describir el contenido de la imagen y/o proporcionar un texto alternativo que se mostraría en caso de que la imagen no cargue correctamente o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender cual es el contenido de la imagen e incluirlo en los resultados de búsqueda. Aquí hay un ejemplo: <img src="importantLogo.jpeg" alt="Company logo"> Las personas con discapacidades visuales dependen de los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si sólo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo alt y leer su contenido para entregar información clave. Un buen texto alt es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo alt en tu imagen. Esto es considerado actualmente obligatorio en la especificación HTML5.

Instrucciones

Resulta que Camper Cat es tanto un ninja programador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo alt en la etiqueta img que explique que Camper Cat está haciendo karate. (La imagen src no está vinculada a ningún archivo real, por lo que debería ver el texto alt en la pantalla).

Pruebas

tests:
  - text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacía.'
    testString: 'assert($("img").attr("alt"), "Tu etiqueta <code>img</code> debe tener un atributo <code>alt</code>, y no debe estar vacía.");'

Challenge Seed

<img src="doingKarateWow.jpeg">

Solución

// solución requerida

2.6 KiB Raw Blame History