freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9d	Know When Alt Text Should be Left Blank	0		Sepa cuándo el texto alternativo debe dejarse en blanco

Description

En el último desafío, aprendiste que incluir un atributo alt en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto alt puede parecer redundante o innecesario. En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el img aún necesita un atributo alt , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: <img src="visualDecoration.jpeg" alt=""> Las imágenes de fondo también suelen caer bajo la etiqueta 'decorativa'. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. Nota
Para imágenes con un título, es posible que desee incluir texto alt , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.

Instructions

Camper Cat ha codificado una página de esqueleto para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo alt a la etiqueta img y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen src no se enlaza con un archivo real, no se preocupe si no se ven espadas en la pantalla).

Tests

tests:
  - text: Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> .
    testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
  - text: El atributo <code>alt</code> debe establecer en una cadena vacía.
    testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'

Challenge Seed

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

Solution

// solution required

2.7 KiB Raw Blame History