freeCodeCamp/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.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

6.1 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d778d367417b2b2512aaa	Make Elements Only Visible to a Screen Reader by Using Custom CSS	0		Haga que los elementos solo sean visibles para un lector de pantalla utilizando CSS personalizado

Description

¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico y el uso de etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual. Sin embargo, la magia de CSS también puede mejorar la accesibilidad en su página cuando desea ocultar visualmente el contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios de lectores de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos de solo lectura de pantalla fuera del área visual de la ventana del navegador. Aquí hay un ejemplo de las reglas CSS que logran esto:

.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}

Nota
Los siguientes enfoques de CSS NO harán lo mismo:

display: none; o visibility: hidden; oculta el contenido para todos, incluidos los usuarios de lectores de pantalla
Valores cero para tamaños de píxeles, tales como width: 0px; height: 0px; elimina ese elemento del flujo de tu documento, lo que significa que los lectores de pantalla lo ignorarán

Instructions

Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y puso los datos en una tabla para sus usuarios con discapacidades visuales. La tabla ya tiene una clase sr-only , pero las reglas de CSS aún no están completas. Asigne a la position un valor absoluto, el valor left a -10000px, y el width y el height ambos valores de 1px.

Tests

tests:
  - text: Su código debe establecer la propiedad de <code>position</code> de la clase <code>sr-only</code> en un valor absoluto.
    testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
  - text: Su código debe establecer la propiedad <code>left</code> de la clase <code>sr-only</code> a un valor de -10000px.
    testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
  - text: Su código debe establecer la propiedad de <code>width</code> de la clase <code>sr-only</code> en un valor de 1 píxel.
    testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
  - text: Su código debe establecer la propiedad de <code>height</code> de la clase <code>sr-only</code> en un valor de 1 píxel.
    testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'

Challenge Seed

<head>
  <style>
  .sr-only {
    position: ;
    left: ;
    width: ;
    height: ;
    top: auto;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <header>
    <h1>Training</h1>
    <nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <h2>El Programa de Entrenamiento para Principantes de Tres Semanas del Maestro Camper Cat</h2>
    <figure>
      <!-- Gráfico de barras de entrenamiento semanal-->
      <p>[Stacked bar chart]</p>
      <br />
      <figcaption>Desglose semanal del tiempo de entrenamiento en sigilo, combate y armas.</figcaption>
    </figure>
    <table class="sr-only">
      <caption>Horas de entrenamiento en sigilo, combate y armas</caption>
      <thead>
        <tr>
          <th></th>
          <th scope="col">Sigilo y Agilidad</th>
          <th scope="col">Combate</th>
          <th scope="col">Armas</th>
          <th scope="col">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Semana Uno</th>
          <td>3</td>
          <td>5</td>
          <td>2</td>
          <td>10</td>
        </tr>
        <tr>
          <th scope="row">Semana Dos</th>
          <td>4</td>
          <td>5</td>
          <td>3</td>
          <td>12</td>
        </tr>
        <tr>
          <th scope="row">Semana Tres</th>
          <td>4</td>
          <td>6</td>
          <td>3</td>
          <td>13</td>
        </tr>
      </tbody>
    </table>
  </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>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solución requerida

6.1 KiB Raw Blame History