2.7 KiB
2.7 KiB
id | title | challengeType | videoUrl | guideUrl | localeTitle |
---|---|---|---|---|---|
587d774c367417b2b2512a9c | Add a Text Alternative to Images for Visually Impaired Accessibility | 0 | https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility | Agregar una alternativa de texto a las imágenes para la accesibilidad de personas con discapacidad visual |
Description
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 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 dependen de 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. El 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
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ía.'
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