freeCodeCamp/improve-chart-accessibility-with-the-figure-element.spanish.md at da38c969b2c4da34ebb7a5047c7c088150a33322

Files

Sebastián da38c969b2 Fix(curriculum): Added Spanish translations and corrected grammar issues (#37799 )

* Fix(curriculum): Added Spanish translations and corrected grammar issues

* Fixed typos and added Spanish translations

Co-authored-by: sebastiansaenz <52339334+sebastiansaenz@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

2019-12-22 11:49:25 -08:00

4.9 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d778a367417b2b2512aa5	Improve Chart Accessibility with the figure Element	0		Mejora la accesibilidad de la carta con la figura Elemento.

Description

HTML5 introdujo el elemento figure , junto con la figcaption relacionada. Usados juntos, estos elementos envuelven una representación visual (como una imagen, diagrama o gráfico) junto con su título. Esto proporciona un aumento de accesibilidad doble al agrupar semánticamente el contenido relacionado y al proporcionar una alternativa de texto que explica la figure . Para visualizaciones de datos como cuadros, la leyenda se puede usar para observar brevemente las tendencias o conclusiones para usuarios con discapacidades visuales. Otro desafío es cómo mover una versión de tabla de los datos del gráfico fuera de la pantalla (mediante CSS) para los usuarios de lectores de pantalla. Aquí hay un ejemplo: tenga en cuenta que la figcaption va dentro de las etiquetas de la figure y se puede combinar con otros elementos:

<figure>
<img src = "roundhouseDestruction.jpeg" alt = "Foto de Camper Cat ejecutando una patada circular">
<br>
<figcaption>
Master Camper Cat demuestra la forma correcta de una patada circular.
</figcaption>
</figure>

Instructions

Camper Cat está trabajando duro para crear un gráfico de barras apiladas que muestre la cantidad de tiempo por semana para pasar el entrenamiento en sigilo, combate y armas. Ayúdelo a estructurar mejor su página cambiando la etiqueta div que usó por una etiqueta de figure , y la etiqueta p que rodea el título a una etiqueta de figcaption.

Tests

tests:
  - text: Su código debe tener una etiqueta de <code>figure</code> .
    testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
  - text: Su código debe tener una etiqueta de <code>figcaption</code> .
    testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
  - text: Su código no debe tener ninguna etiqueta <code>div</code> .
    testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
  - text: Su código no debe tener ninguna etiqueta <code>p</code> .
    testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
  - text: La <code>figcaption</code> debe ser un hijo de la etiqueta de la <code>figure</code> .
    testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
  - text: Asegúrese de que el elemento de su <code>figure</code> tenga una etiqueta de cierre.
    testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'

Challenge Seed

<body>
  <header>
    <h1>Entrenamiento</h1>
    <nav>
      <ul>
        <li><a href="#stealth">Sigilo &amp; Agilidad</a></li>
        <li><a href="#combat">Combate</a></li>
        <li><a href="#weapons">Armas</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>

      <!-- Agrega tu código debajo de esta línea -->
      <div>
        <!-- El gráfico de barras irá aquí -->
        <br>
        <p>Desglose por semana del tiempo destinado a entrenar sigilo, combate y armas.</p>
      </div>
      <!-- Agrega tu código por encima de esta línea -->

    </section>
    <section id="stealth">
      <h2>Entrenamiento Sigilo &amp; Agilidad</h2>
      <article><h3>Trepa el follaje rápidamente usando la técnica del árbol recubridor mínimo (Minimum Spanning Tree)</h3></article>
      <article><h3>Ningún entrenamiento es NP-completo sin parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Entrenamiento de Combate</h2>
      <article><h3>Despacha múltiples enemigos con tácticas multi-hilo</h3></article>
      <article><h3>Adiós, mundo: 5 maneras comprobadas de aniquilar a tu oponente</h3></article>
    </section>
    <section id="weapons">
      <h2>Entrenamiento de Armas</h2>
      <article><h3>Espadas: la mejor herramienta para literalmente dividir y triunfar</h3></article>
      <article><h3>Breadth-first (amplitud) o depth-first (profundidad) en entrenamiento multi-arma?</h3></article>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solución requerida

4.9 KiB Raw Blame History Unescape Escape