245 lines
7.4 KiB
Markdown
245 lines
7.4 KiB
Markdown
---
|
|
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--
|
|
|
|
¿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 tu contenido antes de introducir el aspecto de diseño visual.
|
|
|
|
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 & 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 & 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 & 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>© 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 & 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 & 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 & 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>© 2018 Camper Cat</footer>
|
|
</body>
|
|
```
|