freeCodeCamp

2.6 KiB

Raw Blame History

id	title	localeTitle	challengeType	videoUrl	guideUrl
587d774c367417b2b2512a9c	Add a Text Alternative to Images for Visually Impaired Accessibility	Agregar una alternativa de texto a las imágenes para la accesibilidad de personas con discapacidad visual	0		https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility

Description

Es probable que haya visto un atributo alt en una etiqueta img en otros desafíos. Alt texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: <img src="importantLogo.jpeg" alt="Company logo"> personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo 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. 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. Por especificación de HTML5, esto ahora se considera obligatorio.

Instructions

Camper Cat es tanto un ninja codificador 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 explica que Camper Cat está haciendo karate. (La imagen src no se vincula a un archivo real, por lo que debería ver el texto alt en la pantalla).

Tests

tests:
  - text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacío'
    testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'

Challenge Seed

<img src="doingKarateWow.jpeg">

Solution

// solution required

2.6 KiB Raw Blame History