gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
main
freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md

245 lines
7.4 KiB
Markdown
Raw Permalink Normal View History

chore(i8n,learn): processed translations
2021-02-06 04:42:36 +00:00
---
id: 587d778d367417b2b2512aaa
title: Haz que los elementos solo sean visibles para un lector de pantalla mediante CSS personalizado
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
---
# --description--
chore(i18n,learn): processed translations (#41454) Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
2021-03-12 07:30:30 -07:00
¿Has notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto muestra la importancia de utilizar un esquema de documento lógico y etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual.
chore(i8n,learn): processed translations
2021-02-06 04:42:36 +00:00
Sin embargo, la magia de CSS también puede mejorar la accesibilidad en tu página cuando deseas ocultar visualmente 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 del lector de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos exclusivos de lector de pantalla fuera del área visual de la ventana del navegador.
Aquí hay un ejemplo de las reglas de CSS que logran esto:
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
**Nota:** Los siguientes enfoques CSS No harán lo mismo:
<ul>
<li><code>display: none;</code> o <code>visibility: hidden;</code> oculta el contenido para todos, incluidos los usuarios del lector de pantalla</li>
<li>Los valores cero para los tamaños del píxel, como <code>width: 0px; height: 0px;</code> eliminan ese elemento del flujo de tu documento, lo que significa que los lectores de pantalla lo ignorarán</li>
</ul>
# --instructions--
Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y coloco los datos en una tabla para sus usuarios con dificultad visual. La tabla ya tiene una clase `sr-only`, pero las reglas de CSS aún no se han completado. Asigna a `position` un valor `absolute`, a `left` un valor de `-10000px`, y tanto a `width` como a `height` un valor de `1px`.
# --hints--
Tu código debe establecer la propiedad `position` de la clase `sr-only` en un valor de `absolute`.
```js
assert($('.sr-only').css('position') == 'absolute');
```
Tu código debe establecer la propiedad `left` de la clase `sr-only` en un valor de `-10000px`.
```js
assert($('.sr-only').css('left') == '-10000px');
```
Tu código debe establecer la propiedad `width` de la clase `sr-only` en un valor de `1` píxel.
```js
assert(code.match(/width:\s*?1px/gi));
```
Tu código debe establecer la propiedad `height` de la clase `sr-only` en un valor de `1` píxel.
```js
assert(code.match(/height:\s*?1px/gi));
```
# --seed--
## --seed-contents--
```html
<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>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<td>4</td>
<td>6</td>
<td>3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
# --solutions--
```html
<head>
<style>
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
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>Master Camper Cat's Beginner Three Week Training Program</h2>
<figure>
<!-- Stacked bar chart of weekly training -->
<p>[Stacked bar chart]</p>
<br />
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
<table class="sr-only">
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
<thead>
<tr>
<th></th>
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Week One</th>
<td>3</td>
<td>5</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Week Two</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>12</td>
</tr>
<tr>
<th scope="row">Week Three</th>
<td>4</td>
<td>6</td>
<td>3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
Reference in New Issue Copy Permalink